vue点击弹窗自动触发点击事件的解决办法

最新推荐文章于 2024-08-29 10:04:34 发布

麦田上的字节

最新推荐文章于 2024-08-29 10:04:34 发布

阅读量5.1k

点赞数 20

分类专栏： VUE系列【小白也能玩转vue】文章标签： vue 点击事件初始化

未经博主同意，禁止转载

本文链接：https://blog.csdn.net/weixin_41937552/article/details/117232853

版权

VUE系列【小白也能玩转vue】专栏收录该内容

21 篇文章 22 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

在Vue中，当使用Element UI的el-dialog组件并希望点击弹窗后初始化数据，但遇到点击事件默认触发的问题。本文提供了解决方案。

摘要由CSDN通过智能技术生成

业务场景：使用vue +element ui 的el-dialog，点击弹窗之后，默认加载第一个按钮的数据进行初始化。

div

指令：

 // 自动触发点击事件
  directives:{
        trigger:{
          inserted(el,binging){
            // console.log("自动触发事件")
            el.click()
          }
        }
  },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

麦田上的字节

关注关注

20
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
9
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

基于vue的大屏实现弹窗水平垂直居中，点击弹窗外围自动关闭弹窗

m0_51277853的博客

08-09

1330

利用绝对定位定义一个最大的盒子(.big_content)，让其完全覆盖屏幕，再在其中写弹窗，弹窗的水平垂直居中通过对(.big_content)进行flex布局实现。阻止点击事件冒泡触发

vuejs响应用户事件（如点击事件）

12-12

需求：页面上的列表原先有3个，我们想点击一次添加一条记录，也可以在头和尾删除数据；我们也可以删除我们想删除的任意一行记录；如果是用传统的jquery操作，页面中js会特别多，而且操作也很麻烦。这里用vue.js就非常简单。我们先看页面效果：页面初始化.png 末尾增加一项.png 删除项.png 再来看代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale

9 条评论您还未登录，请先登录后发表或查看评论

vue自动触发点击事件

Xmengyan的博客

12-29

1093

vue自动触发点击事件

VUE自动触发click()点击事件

qq_61798125的博客

10-14

4706

第二步，调用$refs.XXX.$el.click()函数，例如（comp_chose是第一步设置的ref的值）在一些场景中我们希望一些事件可以主动触发，可以采用$refs.XXX.$el.click()函数来主动触发。第一步，给需要主动触发的组件添加ref属性。

vue按钮弹框

最新发布

爱敲代码的卡拉米的博客

08-29

894

在Vue中实现按钮点击后弹出对话框（弹框）的功能，通常可以使用一些Vue的UI组件库，如Element UI、Vuetify、BootstrapVue等，这些库提供了丰富的组件，包括对话框（Dialog）、模态框（Modal）等，可以很方便地实现这个功能。但如果你不想使用任何UI库，也可以自己手写一个简单的弹框组件。

vue实现自动触发click事件

m0_46815188的博客

12-17

7046

Vue主动触发点击事件

rocklee的专栏

11-04

1157

备忘一下，百度的都是扯蛋，还得靠自己。

(vue)进入页面自动触发点击事件

nyf_unknow的博客

10-30

3444

思路：使用 ref 属性将 div 标签绑定到了 Vue 实例中的 clickMe 变量上。在 mounted 钩子函数中，通过 this.$refs.clickMe.click() 代码模拟了点击事件，从而触发了 onSubmit 方法。背景：进入页面后需根据表单默认值查询出数据。1.alert弹出说明已进入点击事件中。

vue+elementui实现点击table中的单元格触发事件--弹框

10-15

总结来说，实现Vue+Element UI点击表格单元格触发事件并弹出对话框的关键在于使用`template`和`scope`插槽来定制表格列，以及Element UI提供的组件如`el-popover`来创建弹框。通过这种方式，我们可以灵活地控制表格...

vue实现点击div外部触发事件的封装方法，注：基于element（学习vue的第一个月零不知道几天）

01-08

在 Vue 中，有时我们需要监听用户是否点击了组件外部，例如关闭弹窗或菜单时。基于 Element UI，我们可以方便地实现这一功能，Element UI 提供了一个名为 `clickoutside` 的指令，帮助我们处理点击元素外部的事件。 ...

vue打开子组件弹窗都刷新功能的实现

10-14

在Vue框架中，实现打开子组件弹窗时自动刷新功能是一项常见的需求，特别是在构建具有交互性的用户界面时。本文将详细讲解如何实现这一功能，通过具体的代码实例进行演示。首先，我们关注`vue打开子组件弹窗都刷新`...

vue自动触发点击

jjxp2011的专栏

12-02

3816

注意：触发代码不能放在created生命周期中，因为现在dom还没渲染。

VUE自动触发click()点击事件 其他组件的click

时不我待

12-12

769

【代码】VUE自动触发click()点击事件 其他组件的click。

vue自定义指令实现自动点击事件

weixin_44091915的博客

04-05

8462

记录生活，留下美好！ vue实现自动点击事件，刚进入页面即发生点击事件。这里用的是vue的自定义指令directive，具体使用可移步到vue文档。 1.若是没有v-for循环，则直接放入directive自定义指令。 <template> <div class="clickdown" @click="myClick()" v-clickDown>自动点击&lt...

Vue实现自动触发点击事件

weixin_44773735的博客

06-21

5116

vue

【vue】主动触发点击事件

Withered Wood

10-16

1万+

由vue代码触发点击事件，实现的效果是：点击按钮，触发 <input> 输入框点击事件，从而实现选择文件。示例如下： <template> <input type="file" id="input-upload-file" ref="selectFiles" multiple="multiple"> <el-button class="operation-button-select" @click="handleButtonSelected"&gt

vue中进入页面，自动触发一次点击事件

qq_44268077的博客

03-14

1万+

vue中进入页面，自动触发一次点击事件htmlscript一进去页面，我肯定是要进去就能看到数据，而不是需要点击选项1才得到数据，解决办法就是直接在creat()中调用 html <div @click="get1" >按钮1</div> <div @click="get2">按钮2</div> script export default { data(){ return {} }, methods:{ get1(){ }, ge

vue模拟点击事件