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 +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
浅谈Vue的computed计算属性
Mar 21 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
php 301转向实现代码
2008/09/18 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
javascript计时器详解
2015/02/28 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
js实现图片轮播效果
2015/12/19 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
Python3中的真除和Floor除法用法分析
2016/03/16 Python
Python yield 使用方法浅析
2017/05/20 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
Reformation官网:美国女装品牌
2018/09/14 全球购物
C语言编程练习
2012/04/02 面试题
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
主治医师岗位职责
2013/12/10 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
2014个人年度工作总结
2014/12/15 职场文书
法院个人总结
2015/03/03 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
辞职申请书范本
2019/05/20 职场文书