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中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
Vue操作Storage本地化存储
Apr 29 Vue.js
vue中data里面的数据相互使用方式
Jun 05 Vue.js
vue实现简易音乐播放器
Aug 14 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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
jquery模拟按下回车实现代码
2011/09/20 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
Python饼状图的绘制实例
2019/01/15 Python
python判断无向图环是否存在的示例
2019/11/22 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
Python列表操作方法详解
2020/02/09 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
电气自动化自荐信
2013/10/10 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
工地安全生产标语
2014/06/06 职场文书
董事长助理工作职责
2014/06/08 职场文书
课外科技活动总结
2014/08/27 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
2015年度企业工作总结
2015/05/21 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript
python基础之错误和异常处理
2021/10/24 Python
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js