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+vant实现购物车全选和反选功能
Nov 17 Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
如何优化vue打包文件过大
Apr 13 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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
Sea.JS知识总结
2016/05/05 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
Python处理中文标点符号大集合
2018/05/14 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
2014年商场国庆节活动策划方案
2014/09/16 职场文书