vue触发真实的点击事件跟用户行为一致问题
更新时间:2024年03月22日 08:49:42 作者:只会安静敲代码的 小周
这篇文章主要介绍了vue触发真实的点击事件跟用户行为一致问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue触发真实的点击事件跟用户行为一致
<template> <div> <button ref="myButton" @click="handleClick">按钮</button> </div> </template> <script> export default { methods: { handleClick() { const button = this.$refs.myButton; // 创建一个鼠标点击事件 const event = new MouseEvent('click', { view: window, bubbles: true, cancelable: true }); // 触发鼠标点击事件 button.dispatchEvent(event); } } } </script>
在这个示例中
我们有一个按钮,并绑定了一个点击事件处理函数 handleClick。
在 handleClick 方法中,我们首先获取按钮元素的引用。
然后,使用 new MouseEvent 创建一个新的鼠标点击事件,可以设置一些相关的属性。
最后,通过调用 dispatchEvent 方法并传递创建的事件对象,来触发真实的鼠标点击事件。
请注意,通过 dispatchEvent 方法触发的鼠标点击事件是真实的,它会触发与用户实际点击按钮时相同的行为和效果。
vue实现自动触发点击事件
1.使用VUE自定义指令实现
<el-tree :check-strictly="isCheck" ref="tree" :data="data" show-checkbox node-key="detectorId" :default-expanded-keys="[]" default-expand-all :default-checked-keys="defKeys" :expand-on-click-node="false" :props="defaultProps" @check-change="handleCheckChange"> <span class="custom-tree-node" slot-scope="{ node, data }"> <span> <i class="iconfont icon-jianceqi" v-if="data.isDet"></i> <i v-else style="color:#F19F00;margin-right:10px;" class="iconfont icon-24gf-folder"></i> {{ node.label }} <!-- <i class="iconfont fr icon-gengduo1"></i> --> </span> <span> <el-button v-if="data.itemsNumber > 0 && data.isShow" type="text" size="mini" v-trigger class="wlh-textColor-red" @click="() => append(data)"> 查看检测器 </el-button> <!-- <el-button type="text" size="mini" @click="() => remove(node, data)"> Delete </el-button> --> </span> </span> </el-tree>
methods(){ append(data) { this.getDeteListFromGroup(data.organizationId, () => { this.checkList.forEach(item => { const newChild = { organizationId: item.detectorId, detectorId: item.detectorId, organizationName: item.detectorName, children: [], isDet: true }; if (!data.children) { this.$set(data, "children", []); } data.children.push(newChild); this.getPolicyOne(); }); }); // data = Object.assign({},data,{isShow:false}) data.isShow = false; } },
2.指令
directives: { trigger: { inserted(el, binging) { // console.log(el) // el.click() $(el).trigger('click');//所以都触发一次, } } }
3.回显赋值
el-tree的数据是动态添加的,所以回显的数据一定要在data数据追加后再回显被选中的数据
getInfo(){ this.isCheck = true //重点:回显之前一定要设置为true this.$nextTick(() => { this.$refs.tree.setCheckedKeys(this.defKeys) //给树节点赋值回显 this.isCheck = false //重点: 赋值完成后 设置为false }) }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue 路由懒加载中给 Webpack Chunks 命名的方法
这篇文章主要介绍了在 vue 路由懒加载中给 Webpack Chunks 命名的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04vue.js使用v-model指令实现的数据双向绑定功能示例
这篇文章主要介绍了vue.js使用v-model指令实现的数据双向绑定功能,简单分析了v-model指令的功能并结合实例形式给出了v-model指令实现数据双向绑定相关操作技巧,需要的朋友可以参考下2018-05-05
最新评论