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 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
浅析Python中的join()方法的使用
2015/05/19 Python
利用Python如何生成随机密码
2016/04/20 Python
python实现感知器算法详解
2017/12/19 Python
python实现周期方波信号频谱图
2018/07/21 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
药学专业个人自我评价
2013/11/11 职场文书
实习自我鉴定
2013/12/15 职场文书
单身联谊活动方案
2014/01/29 职场文书
工程质量承诺书
2014/03/27 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
社区护士演讲稿
2014/08/27 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python