vue给同一元素绑定单击click和双击事件dblclick，执行不同逻辑

原博：https://www.cnblogs.com/feng-xl/p/9375992.html

 

在做项目过程中，需求是点击孔位单击弹出对话框查看产品总数，双击弹出对话框查看详情。一开始直接click和dblclick写在标签里面，但是不管怎么样，总是执行单击事件

解决办法：利用计时器，在大概时间模拟双击事件

html部分代码：

 

    
           {{item.id}}
 

.native主要用于监听组件根元素的原生事件,主要是给自定义的组件添加原生事件。

官方对.native修饰符的解释为：有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native js部分代码

 

      
        

          

            

              

                
应用名称
                
                
              
              

                

                  查询
                  重置
                
              
            
          
          

            
              
              
                
              
            
          

          

            
            
          
        
        

          取 消
          确 定
        
      
    


//这个方法是用来选中该条数据，手动再去点击确认按钮
handleCurrentChange(obj) {
      this.selectAppObj = obj;
    },

//确认按钮方法
 confirmApp() {
      if (!this.selectAppObj.appId) {
        this.$message({
          message: '请选择应用!',
          type: 'error',
        });
        return;
      }
      apiCase.calculateNumByAppId({
        params: {
          params: {
            appId: this.selectAppObj.appId,
          },
        },
      }).then((data) => {
        if (data.state === 0) {
          const number = data.data;
          if (number >= 4) {
            this.$message({
              message: '同一个应用案例最多为4个',
              type: 'error',
            });
          } else {
            this.form.appId = this.selectAppObj.appId;
            this.form.appZone = this.selectAppObj.appZone;
            this.form.appKind = this.selectAppObj.appKind;
            this.form.appName = this.selectAppObj.appName;
            this.$refs.appNameForm.clearValidate();
            this.dialogSelectVisible = false;
          }
        }
      }).catch((err) => {
        this.$message({
          message: err.response.message,
          type: 'error',
        });
      });
    },

双击确认事件@cell-dblclick 也可以写成@row-dblclick