Vue如何实现自动触发功能
目录
- 实现自动触发功能
- 自定义指令实现自动点击事件
- 1.若是没有v-for循环
- 2.若是有v-for循环
实现自动触发功能
今天在项目中遇到一个问题,就是当页面加载的时候,我希望某个元素通过点击事件添加样式,试了下jQuery的trigger方法,并没有任何效果,于是只能手动添加,先把功能实现,晚上回来的时候,闲着没事做便温故Vue知识点,正好听到视频中老师在讲解关于自定义指令directives属性,于是便试了下
<button @click='toggle' v-trigger>toggle</button>
directives:{ trigger:{ inserted(el,binging){ el.click() //$(el).trigger('click') } } }
页面加载的时候,点击事件被执行了!
自定义指令实现自动点击事件
vue实现自动点击事件,刚进入页面即发生点击事件。
这里用的是vue的自定义指令directive,具体使用可移步到vue文档。
1.若是没有v-for循环
则直接放入directive自定义指令。
<template> <div class="clickdown" @click="myClick()" v-clickDown>自动点击</div> </template> export default { directives: { clickDown: { inserted(el) { el.click() } } } }
2.若是有v-for循环
需要自动点击索引第一个,则需要binding。
<template> <div class="clickdown" @click="myClick()" v-for="(item,index) in list" :key="index" v-clickDown="index">自动点击索引第一个</div> </template> export default { directives: { clickDown: { inserted(el,binding,index) { if(binding.value===0){ el.click() } } } } }
好了,完美!
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
详解vue中在父组件点击按钮触发子组件的事件
我把这个实例分为几个步骤解读: 1.父组件的button元素绑定click事件,该事件指向notify方法 2.给子组件注册一个ref="child" 3.父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg 4.子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中 父组件 <template> <div id="app&qu
-
解决vue elementUI 使用el-select 时 change事件的触发问题
如下所示: <el-select v-model="level" size="mini" placeholder="请选择" :change="selectChange()"> <el-option v-for="item in select" :key="item.value" :label="item.label" :value="it
-
Vue 防止短时间内连续点击后多次触发请求的操作
如果连续点击提交按钮,可能会重复提交数据,导致出错,解决的方法可以使用disabled限制点击,感觉体验不是太好,所有给大家分享下面的方法 <el-button @click="throttle()">测试</el-button> export default { data(){ return { lastTime:0 //默认上一次点击时间为0 } } } methods:{ throttle(){ //获取当前时间的时间戳 let now = new Dat
-
浅谈vue.watch的触发条件是什么
很多人习惯用watch,但是却很少有人知道watch的真正触发条件.如果不是对vue原理了如指掌,请谨慎使用watch. 示例1,下面会触发watch 吗? <script> new Vue({ data() { return { city: {id: 1, name: 'Beijing'} } }, watch: { city() { console.log('city changed') } }, created() { this.city = {id: 1, name: 'Beijing
-
vue项目watch内的函数重复触发问题的解决
问题描述: 有两个页面A和B,每个页面里都有一个getList()方法.这个两个方法都需要传一个相同的参数C,参数C的选择过程又比较麻烦.为了避免在切换A.B两个界面重复选择参数C的问题,我将参数C存入vuex中,然后在两个页面里都使用watch监听参数C来执行getList()方法.然后发现一个问题,从A页面进入B页面后,在B页面重新选择参数C,A页面的getList()方法竟然也会被执行,反之亦然,从B页面到A页面后,在A页面改变参数C也会执行B页面的getList()方法. 后来发现是使用
-
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化. div 指令: // 自动触发点击事件 directives:{ trigger:{ inserted(el,binging){ // console.log("自动触发事件") el.click() } } }, PS:下面看下vue 自动触发点击事件 需要,点击左边的列表出详情,但是都需要点击事件,页面进来时,默认触发点击事件 方法一,vue自定义指令 direc
-
Vue如何实现自动触发功能
目录 实现自动触发功能 自定义指令实现自动点击事件 1.若是没有v-for循环 2.若是有v-for循环 实现自动触发功能 今天在项目中遇到一个问题,就是当页面加载的时候,我希望某个元素通过点击事件添加样式,试了下jQuery的trigger方法,并没有任何效果,于是只能手动添加,先把功能实现,晚上回来的时候,闲着没事做便温故Vue知识点,正好听到视频中老师在讲解关于自定义指令directives属性,于是便试了下 <button @click='toggle' v-trigger>toggl
-
vue实现带自动吸附功能的悬浮球
本文实例为大家分享了vue实现带自动吸附功能的悬浮球,供大家参考,具体内容如下 封装的组件代码,可以引到页面直接使用 <template> <div ref="floatDrag" class="float-position" :style="{ left: left + 'px', top: top + 'px', zIndex: zIndex }" @touchmove.prevent
-
vue 输入电话号码自动按3-4-4分割功能的实现代码
输入框绑定 <input class="inputBox" type="phone" placeholder=" 请输入手机号" maxlength="13" v-model="phoneNum"/> 监听事件,每次号码发生改变时触发 大体的逻辑是:先比较号码变化前后的长度,判断是输入还是删除,如果是输入的话,利用正则表达式改变号码格式. watch: { phoneNum (newValue,
-
Vue Autocomplete 自动完成功能简单示例
本文实例讲述了Vue Autocomplete 自动完成功能.分享给大家供大家参考,具体如下: 页面 : 用闭包的方式,index表示第几个组件 <el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="((item)=>{handleSelect(item, index)})&qu
-
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
官网的demo献上 在elementui Input输入框中可以找到远程搜索组件,获取服务端的数据 官网中的数据list都是写在loadAll()中的,而如果我们此时要用到mock的数据就要在此基础上对代码进行修改. -mock数据的获取- 我们要获取远程mock中所有学生的学号信息,根据输入的数据来远程查找目标,并且在选中该目标后能够自动填充对应的姓名.生日.手机等信息,实现快速获取信息的功能,再也不用手动一个个去输入所有的数据啦- 在template中添加el-autocomplete <e
-
vscode 配置vue+vetur+eslint+prettier自动格式化功能
该配置用于vue开发,最终效果是保存时自动根据eslint对js.html和css代码进行格式化. vscode Vetur插件 Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和eslint会有冲突,所以没用上. vscode ESlint插件 Eslint插件用于根据工程目录的.eslintrc.js配置文件在编辑器中显示一些错误提示,后面的自定格式化根据这里的错误提示进行格式化操作. 基于vue-cli创建的项目 以下相关步骤需要注意: 创建的时候把Linter/For
-
自动在Windows中运行Python脚本并定时触发功能实现
目录 环境介绍 运行Python脚本:.bat文件 举例: 定时在Windows中触发.bat文件(英文版系统) 环境介绍 系统环境:Windows 10 Python版本:Python 3.5 必备包:无 运行Python脚本:.bat文件 在Windows中,.bat文件是批处理文件,是与Linux中.sh(shell)文件很像的东西. 如果,我们想在Windows中运行一个Python脚本,我们可以通过CMD,首先进入python文件所在的目录,之后运行. 但是这样很麻烦,每次都要打开CM
-
vue实现加载页面自动触发函数(及异步获取数据)
目录 加载页面自动触发函数 实例 页面加载时,触发某个函数的方法 解决方法如下 加载页面自动触发函数 实例 methods:{ onCreate:async function() { const router = useRouter() const route = useRoute() const { id = '', f = 1 } = route.query console.log("======="+id) const res = await reqGetOrderNumByCl
-
vue实现输入框自动跳转功能
本文实例为大家分享了vue实现输入框自动跳转的具体代码,供大家参考,具体内容如下 <template> <div class="inputClass"> <div v-for="(item,index) in list" :key="index"> <input v-model="item.value" type="password" class="inp
-
基于chosen插件实现人员选择树搜索自动筛选功能
要实现的功能截图: 要求: 1.点击输入框可以根据拼音自动筛选数据,并且标记已经选择的数据,没有结果的时候提示,相应的更新左边树状态 2.勾选树右侧树的复选框左侧出现相应的内容 我用到的插件 vue+chosen+ztree vue:组件化的MVVM库 chosen:单选列表和多选列表增强 ztree:基于jquery的树插件 分析 chosen插件已经可以实现1中的大部分效果,我们只需要预先获取数据,实现左右两侧一 一对应,最后点击发送获取最终的数据集合ID 具体实现 chosen需要的htm
随机推荐
- python 七种邮件内容发送方法实例
- SQL2005Express中导入ACCESS数据库的两种方法
- 基于Jquery的实现回车键Enter切换焦点
- BIOS中英文对照表
- CentOS防火墙用法浅析
- 详解如何设置CentOS 7开机自动获取IP地址
- python比较两个列表大小的方法
- ThinkPHP自定义函数解决模板标签加减运算的方法
- 解析php中用PHPMailer来发送邮件的示例(126.com的例子)
- ASP面向对象编程探讨及比较
- MySQL优化之如何查找SQL效率低的原因
- JavaScript判断文件上传类型的方法
- Java中HttpServletResponse响应中文出现乱码问题
- 利用C++实现从std::string类型到bool型的转换
- JavaScript DOM学习第六章 表单实例
- 原生JavaScript实现连连看游戏(附源码)
- win2008 iis7 上传大文件限制的真正解决办法
- 一个收集图片的bookmarlet(js 刷新页面中的图片)
- php导出csv数据在浏览器中输出提供下载或保存到文件的示例
- vue.extend实现alert模态框弹窗组件