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 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 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
Protoss热键控制
2020/03/14 星际争霸
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
python 创建弹出式菜单的实现代码
2017/07/11 Python
Python制作词云的方法
2018/01/03 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
python压包的概念及实例详解
2021/02/17 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
中软国际Java程序员笔试题
2014/07/19 面试题
学生实习推荐信范文
2013/11/26 职场文书
业务主管岗位职责范本
2013/12/25 职场文书
部门年终奖分配方案
2014/05/07 职场文书
实习公司领导推荐函
2014/05/21 职场文书
反邪教观后感
2015/06/11 职场文书
导游词之太湖
2019/10/08 职场文书