vue点击弹窗自动触发点击事件的解决办法(模拟场景)


Posted in Vue.js onMay 25, 2021

业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化。

 div

vue点击弹窗自动触发点击事件的解决办法(模拟场景)

 指令:

// 自动触发点击事件
  directives:{
        trigger:{
          inserted(el,binging){
            // console.log("自动触发事件")
            el.click()
          }
        }
  },

PS:下面看下vue 自动触发点击事件

需要,点击左边的列表出详情,但是都需要点击事件,页面进来时,默认触发点击事件

方法一,vue自定义指令

directives:{
    trigger:{
     inserted(el, binging){
        console.log(el.id)
        el.id == 'nav0' ? el.click() : null // 只点击第一个,id是在循环中手动添加的
       // $(el).trigger('click')  // 所有都触发一次,然后就是最后一个
      }
    }
  },

用法:

<span class="nav-item" :id="'nav' + index" v-trigger :class="{'active': item.stage == activeId}" @click="navClick(item)" v-for="(item, index) in nav" :key="item.stage">{{item.stage_name}}</span>

以上就是vue点击弹窗自动触发点击事件的解决办法(模拟场景)的详细内容,更多关于vue自动触发点击事件的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue+iview实现文件上传
Nov 17 Vue.js
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
Vue深入理解插槽slot的使用
Aug 05 Vue.js
vue-element-admin项目导入和导出的实现
May 21 #Vue.js
vue2实现provide inject传递响应式
May 21 #Vue.js
vue使用节流函数的踩坑实例指南
vue实现同时设置多个倒计时
May 20 #Vue.js
Vue和Flask通信的实现
Vue Element UI自定义描述列表组件
使用这 6个Vue加载动画库来减少我们网站的跳出率
You might like
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
twig里使用js变量的方法
2016/02/05 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
浅谈React中组件间抽象
2018/01/27 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
深入浅析python 中的匿名函数
2018/05/21 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
django实现类似触发器的功能
2019/11/15 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
python开根号实例讲解
2020/08/30 Python
Python __slots__的使用方法
2020/11/15 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
美国眼镜网:GlassesUSA
2017/09/07 全球购物
群众路线对照检查材料
2014/09/22 职场文书
安全生产标语大全
2014/10/06 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
高三语文复习计划
2015/01/19 职场文书
文言文辞职信
2015/02/28 职场文书
期中考试后的感想
2015/08/07 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
PHP设计模式(观察者模式)
2021/07/07 PHP
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS