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组件封装上传图片和视频的示例代码

    Vue组件封装上传图片和视频的示例代码

    这篇文章主要介绍了Vue封装上传图片和视频的组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-07-07
  • Vue vm.$attrs使用场景详解

    Vue vm.$attrs使用场景详解

    这篇文章主要介绍了vm.$attrs使用场景详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 浅析Vue下的components模板使用及应用

    浅析Vue下的components模板使用及应用

    这篇文章主要介绍了Vue下的components模板的使用及应用,本文通过代码介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • vue 路由懒加载中给 Webpack Chunks 命名的方法

    vue 路由懒加载中给 Webpack Chunks 命名的方法

    这篇文章主要介绍了在 vue 路由懒加载中给 Webpack Chunks 命名的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • nuxt.js中间件实现拦截权限判断的方法

    nuxt.js中间件实现拦截权限判断的方法

    这篇文章主要介绍了nuxt.js中间件实现拦截权限判断的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue实现todolist单页面应用

    vue实现todolist单页面应用

    这篇文章主要为大家详细介绍了vue实现todolist单页面应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • Vue实现自动检测以及版本的更新

    Vue实现自动检测以及版本的更新

    当用户在当前站点停留时间比较长,中途站点进行升级更新之后,用户如果不刷新页面就任然停留在旧的页面里,如何让用户收到一个提示,引导用户进行更新操作呢?下面给大家介绍如何站点更新如何在生产环境提示用户更新,进行页面刷新操作,核心原理其实很简单
    2023-03-03
  • vue.js使用v-model指令实现的数据双向绑定功能示例

    vue.js使用v-model指令实现的数据双向绑定功能示例

    这篇文章主要介绍了vue.js使用v-model指令实现的数据双向绑定功能,简单分析了v-model指令的功能并结合实例形式给出了v-model指令实现数据双向绑定相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • Vue中props用法介绍

    Vue中props用法介绍

    这篇文章主要给大家分享的是 Vue中props用法介绍,​ 在Vue中通过props,可以将原本孤立的组件串联起来,也就是可以子组件可以接收父组件传递过来的data,下面我们一起进入文章看看内容的详细介绍吧,需要的朋友也可以参考一下
    2021-11-11
  • vue移动端轻量级的轮播组件实现代码

    vue移动端轻量级的轮播组件实现代码

    这篇文章主要介绍了vue移动端轻量级的轮播组件实现代码,一个简单的移动端卡片滑动轮播组件,适用于Vue2.x。本文给大家带来了实例代码,需要的朋友参考下吧
    2018-07-07

最新评论