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中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
vue 自定义的组件绑定点击事件
Apr 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
Zend Studio使用技巧两则
2016/04/01 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
Python高级用法总结
2018/05/26 Python
Python实现时间序列可视化的方法
2019/08/06 Python
python实现网站微信登录的示例代码
2019/09/18 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
金士达面试非笔试
2012/03/14 面试题
毕业生自我鉴定
2013/11/05 职场文书
护士检查书
2014/01/17 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
扬尘污染防治方案
2014/06/15 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
出生证明范本
2015/06/15 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
德劲DE1108畅想
2021/04/22 无线电