Vue笔记-vue中使用JS创建的函数

主要是公司对前端要求不高,能解决问题就行了,前端不太熟,用js这种处理起来方便,在此记录下。

在src中创建一个api目录,新建custom.js

export const getDivHeightByClass = (className) => {let divElements = document.getElementsByClassName(className);for (let i = 0; i < divElements.length; i++) {let height = divElements[i].offsetHeight;return height;}return 0;
};export const getDivWidthByClass = (className) => {let divElements = document.getElementsByClassName(className);for (let i = 0; i < divElements.length; i++) {let height = divElements[i].offsetWidth;return height;}return 0;
};

在对应的vue中导入,然后就可以直接调用了

<template>......
</template><script>
import {getDivHeightByClass, getDivWidthByClass} from '../../api/custom.js'
export default {............mounted() {let height = getDivHeightByClass("xxx");let width = getDivWidthByClass("yyy");}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/864537.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.NET 调用API创建系统服务实现权限维持

01阅读须知 此文所节选自小报童《.NET 内网实战攻防》专栏&#xff0c;主要内容有.NET在各个内网渗透阶段与Windows系统交互的方式和技巧&#xff0c;对内网和后渗透感兴趣的朋友们可以订阅该电子报刊&#xff0c;解锁更多的报刊内容。 02基本介绍 本文内容部分节选自小报童…

FreeRTOS开发五、任务状态切换以及空闲任务回收结束的任务

1、任务状态切换 任务创建的时候就会处于就绪状态ready&#xff0c;然后他马上就能够运行进入Running状态&#xff0c;运行中可以调用vTaskDelay进入阻塞状态&#xff0c;实际就是延时一小段时间&#xff0c;等待唤醒&#xff0c;当延时时间过去后就回到了就绪状态&#xff0…

pytorch-ResNet18简单复现

目录 1. ResNet block2. ResNet18网络结构3. 完整代码3.1 网络代码3.2 训练代码 1. ResNet block ResNet block有两个convolution和一个short cut层&#xff0c;如下图&#xff1a; 代码&#xff1a; class ResBlk(nn.Module):def __init__(self, ch_in, ch_out, stride):su…

Java学习 (六) 面向对象--this、继承、方法重写、super

一、this 关键字 1、this 演示 vi Person.java public class Person {String name;int age;//显示声明构造器public Person(String s , int i){name s;age i;}public void setAge(int age){age age;}}vi PersonTest.java public class PersonTest {public static void m…

某腾X滑块验证码

⚠️前言⚠️ 本文仅用于学术交流。 学习探讨逆向知识,欢迎私信共享学习心得。 如有侵权,联系博主删除。 请勿商用,否则后果自负。 网址 aHR0cHM6Ly9jbG91ZC50ZW5jZW50LmNvbS9wcm9kdWN0L2NhcHRjaGE= 1. 先整体分析一下 1_1. 验证码信息下发接口 cap_union_prehandle ua:…

JS基础与Chrome介绍

导言 在Web开发中后端负责程序架构和数据管理&#xff0c;前端负责页面展示和用户交互&#xff1b;在这种前后端分离的开发方式中&#xff0c;以接口为标准来进行联调整合&#xff0c;为了保证接口在调用时数据的安全性&#xff0c;也为了防止请求参数被篡改&#xff0c;大多数…

深入理解 “androidx.databinding.DataBindingUtil“ 细节和使用

介绍 数据绑定&#xff08;Data Binding&#xff09;是 Android 中的一个强大功能&#xff0c;它允许你使用声明性格式而不是编程方式将布局中的 UI 组件绑定到应用中的数据源。androidx.databinding.DataBindingUtil 类是一个工具类&#xff0c;它提供了用于处理数据绑定的方…

容器技术-docker5

一、docker-compose 常用命令和指令 1. 概要 默认的模板文件是 docker-compose.yml&#xff0c;其中定义的每个服务可以通过 image 指令指定镜像或 build 指令&#xff08;需要 Dockerfile&#xff09;来自动构建。 注意如果使用 build 指令&#xff0c;在 Dockerfile 中设置…

【面试干货】Static关键字的用法详解

【面试干货】Static关键字的用法详解 1、Static修饰内部类2、Static修饰方法3、Static修饰变量4、Static修饰代码块5、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Java编程语言中&#xff0c;static是一个关键字&#xff0c;它可…

MT19937 64bit 机器上的实现及原理解析

1&#xff0c; mt19937 实现源码 mt19937-64bit_ex.cpp /*References:T. Nishimura, Tables of 64-bit Mersenne TwistersACM Transactions on Modeling and Computer Simulation 10. (2000) 348--357.M. Matsumoto and T. Nishimura,Mersenne Twister: a 623-dimensionally e…

水果商城外卖微信小程序模板

手机微信水果外卖&#xff0c;水果电商&#xff0c;水果商城网页小程序模板。包含&#xff1a;主页、列表页、详情页、购物车、个人中心。 水果商城外卖小程序模板

[C++][设计模式][迭代器模式]详细讲解

目录 1.动机2.模式定义3.要点总结4.代码感受 1.动机 在软件构建过程中&#xff0c;集合对象内部结构常常变化各异。但对于这些集合对象&#xff0c;我们希望不暴露其内部结构的同时&#xff0c;可以让外部客户代码透明地访问其中包含的元素&#xff1b; 同时这种”透明遍历“也…

可燃气体报警器检测机构:严格遵守的安全标准

随着工业、商业和家庭领域对安全要求的不断提高&#xff0c;可燃气体报警器作为预防火灾和爆炸事故的重要设备&#xff0c;其性能稳定性和可靠性越来越受到关注。 可燃气体报警器检测机构应运而生&#xff0c;为确保这些设备的有效运行发挥着不可替代的作用。 接下来&#xf…

超强风冷制动电阻器-大功率对流冷却电阻器

风冷制动电阻 EAK 的风冷制动电阻器的制造功率范围为 5 kW 至 1200 kW。这些电阻器用于从螺旋桨、起重机、绞盘、顶部驱动器等倾倒多余的电力。 风冷电阻器是独立的单元&#xff0c;不需要进一步安装。该装置由内置风扇冷却。它也可以在没有风扇的情况下制作&#xff08;非强…

HTMLCSS(入门)

HTML <html> <head><title>第一个页面</title></head><body>键盘敲烂&#xff0c;工资过万</body> </html> <!DOCTYPE>文档类型声明&#xff0c;告诉浏览器使用哪种HTML版本显示网页 <!DOCTYPE html>当前页面采取…

D - Intersecting Intervals(abc355)

题意&#xff1a;有n个区间&#xff0c;找出俩俩区间相交的个数 分析&#xff1a; 设初始俩俩相交&#xff0c;找出不相交的&#xff08;不同区间l>r)&#xff0c;减去即可 #include<bits/stdc.h> using namespace std; typedef long long ll; int main(){ ios:…

【前端CSS3】一篇搞懂各类常用选择器(黑马程序员)

文章目录 一、前言&#x1f680;&#x1f680;&#x1f680;二、正文&#xff1a;2.1 基础选择器2.1.1 标签选择器2.1.2 类选择器2.1.3 id选择器2.1.4 通配符选择题2.1.5 类选择器与id选择器区别☀️☀️☀️2.1.6 基础选择器总结&#x1f680; 2.2 复合类选择器2.2.1 后代选择…

Linux系统编程:信号

目录 1.信号概念 2.信号产生 2.1 终端 2.2 系统调用 2.3 硬件异常 2.4 软件条件 2.5 小结 3. 进程退出时的核心转储问题 4. 信号捕捉初识 5. 阻塞信号 5.1 相关概念 5.2 在内核中的表示 6. 信号捕捉 6.1 知识铺垫 6.2 信号捕捉流程 6.3 sigset_t 6.4 信号集操…

CTFHUB-SSRF-上传文件

通过file协议访问flag.php文件内容 ?urlfile:///var/www/html/flag.php 右键查看页面源代码&#xff0c;发现需要从内部上传一个文件这样才能正常获取到flag ?urlhttp://127.0.0.1/flag.php 发现无提交按钮&#xff0c;构造一个 <input type"submit" name&qu…

RabbitMQ 之 延迟队列

目录 ​编辑一、延迟队列概念 二、延迟队列使用场景 三、整合 SpringBoot 1、创建项目 2、添加依赖 3、修改配置文件 4、添加 Swagger 配置类 四、队列 TTL 1、代码架构图 2、配置文件代码类 3、生产者 4、消费者 5、结果展示 五、延时队列优化 1、代码架构图 …