vue点击弹窗自动触发点击事件的解决办法(模拟场景)
业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化。
div
指令:
// 自动触发点击事件 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实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
需求: 1. 页面部分元素的尺寸需要根据实际打开时浏览器尺寸进行设置: 2. 页面打开后,调节浏览器窗口大小时需要动态调节部分元素的尺寸: 需要注意的点: window.onresize只能在项目中一处进行引用触发,如果在多个地方进行引用触发,会导致只有1个触发事件生效. 解决"多个组件都需要触发"的方案只能是通过一个地方触发后通过组件间通信进行触发. (以调节class为myDiv的div的宽度为例) 解决需求1的方案: html <template> <div c
-
vue父组件点击触发子组件事件的实例讲解
最近在学习Vue父子组件通信的问题,刚好遇到一个父子之间事件事件派发与接收,在这里记录一下,在这里我使用的是ref 给子组件注册引用信息.官网是这样解释的 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例: 父组件app.vue <template> <div id="app"> <!--父组件--> <
-
vue中阻止click事件冒泡,防止触发另一个事件的方法
使用vue阻止子级元素的click事件冒泡,很简单,用stop <div @click="test1()"> <span @click.stop="test2()">按钮1</span> <span>按钮2</span> </div> 这样点击div里面的按钮1,就不会触发div绑定时间test1()方法. 以上这篇vue中阻止click事件冒泡,防止触发另一个事件的方法就是小编分享给大家的全部
-
vue集成openlayers加载geojson并实现点击弹窗教程
本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程,供大家参考,具体内容如下 第一步:安装vue-cli cnpm install -g @vue/cli 第二步:新建一个项目 1.新建项目 (vue-openlayers为项目名),并选择default模版 vue create vue-openlayers 2.安装openlayers cnpm i -S ol 第三步:写业务代码 1.删除掉HelloWorld.vue 新建 olmap.vue组件 comp
-
vue中实现点击空白区域关闭弹窗的两种方法
1. 第一种做法 首页在外层容器里面取一个名字为main,即ref="main",当bankSwitch为true的时候,弹窗出现 <div class="selectedBorder" ref="main"> <div class="bankItem" v-if="bankSwitch == true"> 你好我是弹窗里面的内容部分 </div> </div>
-
vue实现点击按钮“查看详情”弹窗展示详情列表操作
html: <template> <div> <Modal v-model="classStatus" width="900" title="详情:" :styles="{top: '80px'}"> <Table stripe class="task-table" :columns="columnsName4" :data="task
-
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化. div 指令: // 自动触发点击事件 directives:{ trigger:{ inserted(el,binging){ // console.log("自动触发事件") el.click() } } }, PS:下面看下vue 自动触发点击事件 需要,点击左边的列表出详情,但是都需要点击事件,页面进来时,默认触发点击事件 方法一,vue自定义指令 direc
-
关于Vue 3.0引入百度地图不兼容的解决办法
目录 关于Vue 3.0引入百度地图 不兼容的解决办法 1. 问题:Vue 3.0引入百度地图 不兼容 2. 解决办法 3.vue页面 引入并执行 4.完成, 地图如下 关于Vue 3.0引入百度地图 不兼容的解决办法 1. 问题:Vue 3.0引入百度地图 不兼容 百度地图开发平台文档 封装的vue版本暂时还没有 到 vue 3.0 如果 用npm 引入并使用的话,会出现报错 at eval (bindEvent.js?4fab:8) at Array.forEach (<anonymous>
-
中文输入法不触发onkeyup事件的解决办法
这两天做一个需要实时监控文本框输入的功能,碰到了中文输入法无法触发onkeyup事件的恶心问题. 具体表现是这样的: 当监听一个input的keyup的事件的时候,英文输入法的情况下可以实时的通过keyup事件检测到文本框value的变化,但是当输入法变成中文后,input的keyup事件就不会被正常触发.这是最先前的写法. <html> <head> <script type="text/javascript" src="http://www.
-
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
很多朋友都遇到了Destoon供求栏目下旺旺无法正常显示,点击提醒"会员名不存在"的情况,原因是旺旺更改了在线旺旺的代码,但是Destoon没有及时更新.这时候只需要修改api/im.func.php中第二段旺旺联系的那段: 即将function im_ali($id, $style = 0) 修改成下面的方法即可. function im_ali($id, $style = 0) { return $id ? '<a href="http://amos.im.alis
-
vue.js打包项目后页面出现空白的解决办法
相信很多刚刚接触vue的伙伴会遇到这样的问题,就是说vue项目在开发环境下一切正常,但是打包之后,打开index.html页面却是一片空白,打开控制台发现这样的错误 出现这种情况要分两个处理方式(vue-cli2和vue-cli3),先说vue-cli2: 首先找到config/index.js文件,将assetPublicPath的路径改为"./"即可, vue-cli3的话要稍微麻烦些,因为vue-cli3简洁了许多,没有了配置文件,所以需要自己创建,只能在项目的根目录下创建,并且
-
Vue Vite热更新不起作用的正确解决办法
目录 解决方案: 正确示例: 错误示例: 注意: 附:vue3+vite不热更新的解决方案 总结 解决方案: 提示:文件夹名称严格注意大小写 router 路由中名称 和文件夹(目录), 文件名需要保证大小写一致 正确示例: { path: 'show', component: () => import("@/views/show/index.vue"), } show 目录名index.vue 文件名这样大小写都是与路由中一致的就不会出现问题 错误示例: { path: 'sh
-
vue安装node-sass和sass-loader报错问题的解决办法
目录 可行版本(针对 node 16+ 版本) 问题描述 解决方法 补充知识:解决启动VUE项目时报node-sass不能运行问题 总结 可行版本(针对 node 16+ 版本) 不想浪费时间看的,可直接去尝试 npm install node-sass@6.0.1 -D npm install sass-loader@10.2.0 -D 问题描述 问题描述:在进行一个vue项目练习时需要导入node-sass.sass-loader这两个依赖,书本提供代码是npm install sass-l
-
vue中的主动触发点击事件
目录 主动触发点击事件 如何自动触发点击事件 模拟点击下载文件.图片 主动触发点击事件 由vue代码触发点击事件,实现的效果是:点击按钮,触发 <input> 输入框点击事件,从而实现选择文件. 示例如下: <template> <input type="file" id="input-upload-file" ref="selectFiles" multiple="multiple"&g
-
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Ext4.2+ Ext.grid.plugin.RowExpander存在bug,添加的collapsebody,expandbody无法触发,查看了下 Ext.grid.plugin.RowExpander对应的源代码,没有添加collapsebody,expandbody事件,即使按照网上的方 法重写Ext.grid.plugin.RowExpander的init和toggleRow方法也无法触发 collapsebody,expandbody事件. 解决办法:给grid对象添加collap
-
ViewPager和SlidingPaneLayout的滑动事件冲突解决方法
问题描述: ViewPager和SlidingPaneLayout的滑动事件冲突. 问题分析: 在手指左右滑动时,SlidingPaneLayout会屏蔽ViewPager的滑动事件. 解决办法: 自定义SlidingPaneLayout类 import android.content.Context; import android.support.v4.view.MotionEventCompat; import android.support.v4.widget.SlidingPaneLay
随机推荐
- 基于对象合并功能的实现示例
- C#实现HTML转WORD及WORD转PDF的方法
- C++通过自定义函数求一元二次方程的根
- JRun3.0配合IIS的安装全过程
- php使用cookie实现记住用户名和密码实现代码
- jQuery操作cookie方法实例教程
- js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
- 在同一台服务器上配置多个Tomcat的方法
- Yii框架参数化查询中IN查询只能查询一个的解决方法
- PHP中关键字interface和implements详解
- Android 广播监听网络状态详解及实例代码
- C#实现清空回收站的方法
- PHP删除数组中指定下标的元素方法
- vue elementUI table 自定义表头和行合并的实例代码
- 使用opencsv文件读写CSV文件
- Vue基础学习之项目整合及优化
- 探讨Windows XP 神奇的组策略
- .NETCore Docker实现容器化与私有镜像仓库管理
- 高级数据结构及应用之使用bitmap进行字符串去重的方法实例
- python3解析库BeautifulSoup4的安装配置与基本用法