快捷導(dǎo)航

vue觸發(fā)真實(shí)的點(diǎn)擊事件跟用戶行為一致問題

更新時間：2024年03月22日 08:49:42 作者：只會安靜敲代碼的小周

這篇文章主要介紹了vue觸發(fā)真實(shí)的點(diǎn)擊事件跟用戶行為一致問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue觸發(fā)真實(shí)的點(diǎn)擊事件跟用戶行為一致

<template>
  <div>
    <button ref="myButton" @click="handleClick">按鈕</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    handleClick() {
      const button = this.$refs.myButton;
      
      // 創(chuàng)建一個鼠標(biāo)點(diǎn)擊事件
      const event = new MouseEvent('click', {
        view: window,
        bubbles: true,
        cancelable: true
      });
      
      // 觸發(fā)鼠標(biāo)點(diǎn)擊事件
      button.dispatchEvent(event);
    }
  }
}
</script>

在這個示例中

我們有一個按鈕，并綁定了一個點(diǎn)擊事件處理函數(shù) handleClick。

在 handleClick 方法中，我們首先獲取按鈕元素的引用。

然后，使用 new MouseEvent 創(chuàng)建一個新的鼠標(biāo)點(diǎn)擊事件，可以設(shè)置一些相關(guān)的屬性。

最后，通過調(diào)用 dispatchEvent 方法并傳遞創(chuàng)建的事件對象，來觸發(fā)真實(shí)的鼠標(biāo)點(diǎn)擊事件。

請注意，通過 dispatchEvent 方法觸發(fā)的鼠標(biāo)點(diǎn)擊事件是真實(shí)的，它會觸發(fā)與用戶實(shí)際點(diǎn)擊按鈕時相同的行為和效果。

vue實(shí)現(xiàn)自動觸發(fā)點(diǎn)擊事件

1.使用VUE自定義指令實(shí)現(xiàn)

 <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');//所以都觸發(fā)一次，
      }
    }
  }

3.回顯賦值

el-tree的數(shù)據(jù)是動態(tài)添加的，所以回顯的數(shù)據(jù)一定要在data數(shù)據(jù)追加后再回顯被選中的數(shù)據(jù)

  getInfo(){
   this.isCheck = true //重點(diǎn)：回顯之前一定要設(shè)置為true
   this.$nextTick(() => {
       this.$refs.tree.setCheckedKeys(this.defKeys) //給樹節(jié)點(diǎn)賦值回顯
       this.isCheck = false //重點(diǎn)： 賦值完成后 設(shè)置為false
   })
  }

在這里插入圖片描述