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

news2025/1/17 6:12:14

主要是公司对前端要求不高,能解决问题就行了,前端不太熟,用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.coloradmin.cn/o/1881492.html

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

相关文章

Java面试题--JVM大厂篇之G1 GC的分区管理方式如何减少应用线程的影响

目录 引言: 正文: 1. 区域划分&#xff08;Region&#xff09; 2. 并行和并发回收 3. 区域优先回收&#xff08;Garbage First&#xff09; 4. 可预测的停顿时间 5. 分阶段回收 6. 复制和压缩 实际效果: 场景举例 1. 减少单次GC的影响 2. 支持高并发环境 3. 优…

设计模式-代理模式和装饰者模式

二者都是结构型的设计模式. 1.代理模式 1.1定义 为其他对象提供一种代理以控制对这个对象的访问. 代理从code实现方面分为静态代理和动态代理两种&#xff1b; 从适用范围来看,分为远程代理,虚拟代理,保护代理,智能引用几种. 远程代理:为某个对象在不同的内存地址空间提供…

张小凡砍灵竹

题目 张小凡刚入青云门时&#xff0c;拜入大竹峰田不易门下&#xff0c;师父要求他上山砍灵竹锻炼体力。第一天他砍了1根&#xff0c;之后的九天他分别砍了2&#xff0c;4&#xff0c;5&#xff0c;5&#xff0c;8&#xff0c;7&#xff0c;9&#xff0c;12&#xff0c;2根&am…

【Python】已解决:AttributeError: ‘Series‘ object has no attribute ‘sortlevel‘

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决&#xff1a;AttributeError: ‘Series‘ object has no attribute ‘sortlevel‘ 一、分析问题背景 在数据分析和处理过程中&#xff0c;Pandas库是一个非常强大的工具。它…

Tomcat的安装和虚拟主机和context配置

一、 安装Tomcat 注意&#xff1a;安装 tomcat 前必须先部署JDK 1. 安装JDK 方法1&#xff1a;Oracle JDK 的二进制文件安装 [rootnode5 ~]# mkdir /data [rootnode5 ~]# cd /data/ [rootnode5 data]# rz[rootnode5 data]# ls jdk-8u291-linux-x64.tar.gz [rootnode5 data]…

基于springboot+vue+uniapp的语言课学习系统小程序

开发语言&#xff1a;Java框架&#xff1a;springbootuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#…

数据恢复篇:计算机格式化后如何恢复照片

您想了解如何从已格式化的笔记本电脑或台式机中恢复已删除的照片吗&#xff1f;这篇文章解释了如何使用最佳格式照片恢复软件来做到这一点。格式化计算机后&#xff0c;您可以通过简单的步骤恢复已删除的图像。 将照片保存在笔记本电脑或 PC 硬盘上是很常见的。与相机存储卡和…

02-《石莲》

石 莲 石莲&#xff08;学名&#xff1a;Sinocrassula indica A.Berger&#xff09;&#xff0c;别名因地卡&#xff0c;为二年生草本植物&#xff0c;全株无毛&#xff0c;具须根。花茎高15-60厘米&#xff0c;直立&#xff0c;常被微乳头状突起。茎生叶互生&#xff0c;宽倒披…

“吃饭大学”!中国大学食堂排行TOP10(含西电)

同学们们&#xff0c;考研择校考虑的因素除了学术&#xff0c;地理位置等方面&#xff0c;你们还会考虑哪些因素呢&#xff1f;小研作为一个吃货&#xff0c;必定会考虑的一个因素当然是大学的食堂美食啊~ 那中国超级好吃的大学食堂在哪&#xff1f;一起来看看有没有你的目标院…

文华均线交叉多空买卖点-支撑压力自动画线-波浪AB画线指标公式

A1:MA(C,5); A2:MA(C,10); MA1:MA(A1,15); MA2:MA(A2,15); JC:CROSS(MA1,MA2); SC:CROSSDOWN(MA1,MA2); N:1; JC1:BARSLAST(JC)N; SC1:BARSLAST(SC)N; VERTLINE(SC,COLORRED),DOT; VERTLINE(JC,COLORGREEN),DOT; H1:VALUEWHEN(SC,HHV(H,JC1)),COLORRED;//当前死叉到…

(4.2)Sourcegraph(Chrome插件)——github实现源码阅读

一、下载 下载方式参考&#xff1a;如何安装 Chrome 插件&#xff1f;以 Show_Rank 为例 下载链接一&#xff1a;从Chrome应用商店直接搜索&#xff0c;https://chromewebstore.google.com/detail/sourcegraph/dgjhfomjieaadpoljlnidmbgkdffpack?utm_sourceext_app_menu 如…

“论单元测试方法及应用”写作框架,软考高级论文,系统架构设计师论文

论文真题 1、概要叙述你参与管理和开发的软件项目,以吸你所担的主要工作。 2、结给你参与管理和开发的软件项目&#xff0c;简要叙述单元测试中静态测试和动态测试方法的基本内容。 3、结给你惨与管理和研发的软件项目,体阐述在玩测试过程中,如何确定白盒测试的覆盖标准,及如…

【SQL】已解决:SQL错误(208):对象名‘STRING_SPLIT‘无效

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决&#xff1a;SQL错误&#xff08;208&#xff09;&#xff1a;对象名‘STRING_SPLIT‘无效 在使用SQL Server进行数据库操作时&#xff0c;遇到错误&#xff08;208&#xff…

详细配置SQL Server的链接服务器(图文操作Mysql数据库)

目录 前言1. MySQL ODBC 驱动2. 配置 SQL Server 链接服务器3. 彩蛋前言 此处配置以及安装没有什么理论知识 所以直奔主题,跟着以下步骤配置安装即可 需求:准备在10.197.0.110中链接外部的10.197.0.96的mysql数据源 已默认在10.197.0.96中安装了MySQL数据库并且知道其连接信…

隐私计算实训营第二期第12基于隐语的VisionTransformer框架

01 MPCViT&#xff1a;安全且高效的MPC友好型 Vision Transformer架构 总体框架&#xff1a; 首先分析了ViT产生较大延时的原因&#xff0c;思考能否去除这些操作。 然后&#xff0c;对比不同的注意力机制&#xff0c;发现它们中有的具有很好的效率&#xff0c;有的则具有很…

WebRtc实现1V1音视频通话

简介 WebRTC&#xff0c;名称源自网页实时通信&#xff08;Web Real-Time Communication&#xff09;的缩写&#xff0c;是一个支持网页浏览器进行实时语音通话或视频聊天的技术&#xff0c;是谷歌 2010 年以 6820 万美元收购 Global IP Solutions 公司而获得的一项技术。 WebR…

YOLO系列笔记(十八)—— YOLOv1和YOLOv2总结与对比

YOLOv1和的v2总结与对比 YOLOv1主要思想算法架构主干网络损失函数 训练过程网络预测主要成果优化方向 YOLOv2算法架构主干网络损失函数 相较之前的优化添加Batch Normalization引入锚框&#xff08;Anchor Boxes&#xff09;机制引入DarkNet-9多尺度输入训练 网络训练第一阶段&…

数据结构--队列(图文)

队列是一种特殊的线性表&#xff0c;其核心特点是先进先出。 概念及特点&#xff1a; 概念 队列是一种只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的线性表。进行插入操作的一端被称为队尾&#xff08;Tail 或 Rear&#xff09;&#xff0c;进行删除…

使用ChatGLM3自带的网页客户端

【图书推荐】《ChatGLM3大模型本地化部署、应用开发与微调》-CSDN博客 通过简单的代码领略一下ChatGLM3大模型_chatglm3 history怎么写-CSDN博客 除了我们上面使用自定义的gradio组件完成网页客户端的搭建&#xff0c;智谱AI的ChatGLM3在创建之初就本着“方便用户&#xff0c…

小韩厂涨乌托邦公式源码

小韩厂涨&乌托邦&公式源码已经测试通过,可以发布云平台自行编辑 DRAWGBK(C>0, RGB(50,60,250),RGB(17,21,89),0,11,0); H1:=MAX(DYNAINFO(3),DYNAINFO(5)); L1:=MIN(DYNAINFO(3),DYNAINFO(6)); P1:=H1-L1; 阻力:=L1+P1*7/8,COLORGREEN; 支撑:=L1+P1*0.5/8,COLORRED;…