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,一经查实,立即删除!

相关文章

容器之docker

Docker 是一个开源的平台&#xff0c;旨在使应用程序的开发、部署和运行更加轻松。它利用容器技术&#xff0c;将应用程序及其依赖环境打包在一起&#xff0c;以便于在任何环境中一致运行。 概述 Docker 通过提供轻量级的虚拟化解决方案&#xff0c;使得开发者可以轻松创建、…

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

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

达梦数据库的DBMS_STATS包

达梦数据库的DBMS_STATS包 基础信息 OS版本&#xff1a; Red Hat Enterprise Linux Server release 7.9 (Maipo) DB版本&#xff1a; DM Database Server 64 V8 DB Version: 0x7000c 03134284132-20240115-215128-20081达梦数据库&#xff08;DM Database&#xff09;提供了 D…

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

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

【python学习】自定义函数的一些高级用法-1

在 Python 中&#xff0c;自定义函数除了基本的定义和调用外&#xff0c;还有一些高级用法&#xff0c;可以让函数更加灵活和强大。以下是一些自定义函数的高级用法示例&#xff1a; 1. 默认参数 函数定义时可以指定默认参数值&#xff0c;当调用函数时没有提供该参数的值时&…

深入理解Spring Boot与Spring Cloud的整合方式

深入理解Spring Boot与Spring Cloud的整合方式 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨Spring Boot与Spring Cloud的整合方式&#x…

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…

第二十一章 函数(Python)

文章目录 前言一、定义函数二、函数参数三、参数类型四、函数返回值五、函数类型1、无参数&#xff0c;无返回值2、无参数&#xff0c;有返回值3、有参数&#xff0c;无返回值4、有参数&#xff0c;有返回值 六、函数的嵌套七、全局变量和局部变量1、局部变量2、全局变量 前言 …

了解 .NET 中的会话管理

在 Web 开发领域&#xff0c;跨多个请求维护状态是一个关键方面。HTTP 的无状态特性要求开发人员实现持久保存用户数据的机制。这就是会话发挥作用的地方。在本文中&#xff0c;我们将探讨什么是会话、它们在 .NET 中的工作方式&#xff0c;并提供实际示例来说明它们的用法。 …

set_source_files_properties QT_QML_SINGLETON_TYPE

目录 前言 QT_QML_SINGLETON_TYPE 属性 基本用法 示例 1. 创建一个基本的 CMake 项目 2. 编辑 CMakeLists.txt 3. 创建 main.cpp 4. 创建 MySingleton.qml 5. 创建 qml.qrc 6. 创建 main.qml 构建和运行项目 结论 前言 在使用 Qt 和 CMake 构建项目时&#xff0c;…

weapp.socket.io.js

!function(t,e){if(“object"typeof exports&&"object"typeof module)module.exportse();else if("function"typeof define&&define.amd)define([],e);else{var re();for(var n in r)(“object"typeof exports?exports:t)[n]r[…

探索未知:sklearn处理未知类别数据的策略

探索未知&#xff1a;sklearn处理未知类别数据的策略 在机器学习项目中&#xff0c;我们经常遇到带有未知类别的数据&#xff0c;这些数据可能因为各种因素而缺失或无法归类。有效地处理这些未知类别对于构建鲁棒的模型至关重要。本文将深入探讨sklearn如何处理带有未知类别的…

解决Java中的NoRouteToHostException异常的方法

解决Java中的NoRouteToHostException异常的方法 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在Java开发中&#xff0c;网络编程是非常重要的一部分&#x…

某腾X滑块验证码

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

JS基础与Chrome介绍

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

白骑士的Python教学基础篇 1.5 数据结构

系列目录​​​​​​​ 上一篇&#xff1a;白骑士的Python教学基础篇 1.4 函数与模块 数据结构是编程语言中用于存储和组织数据的基本构件。在Python中&#xff0c;常见的数据结构包括列表&#xff08;List&#xff09;、元组&#xff08;Tuple&#xff09;、字典&#xff08…

深入理解 “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;它可…