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实现下载文件流完整前后端代码
Nov 17 Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
vue实现在data里引入相对路径
Jun 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
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
Python实现的石头剪子布代码分享
2014/08/22 Python
python修改操作系统时间的方法
2015/05/18 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
python cumsum函数的具体使用
2019/07/29 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
师范教师毕业鉴定
2014/01/13 职场文书
小学新教师培训方案
2014/02/03 职场文书
优秀经理获奖感言
2014/03/04 职场文书
校庆口号
2014/06/20 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技