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 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
Vue 打包后相对路径的引用问题
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
生成缩略图
2006/10/09 PHP
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
Python素数检测实例分析
2015/06/15 Python
python url 参数修改方法
2018/12/26 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
英语自荐信常用语句
2013/12/13 职场文书
教师对学生的评语
2014/04/28 职场文书
小学教师培训方案
2014/06/09 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
公司财务管理制度
2015/08/04 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server
python和anaconda的区别
2022/05/06 Python
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技