Question

我有一张桌子，桌子上有不同宽度的列。我使用了粘性标头，必须为它们计算列宽。

现在，我编写了一个通过双击标题来增加列宽的函数。这适用于第一次双击。但是，如果我单击4到6次，则第一次双击后什么也没有发生。我该如何重置事件，以便在再单击2次后再次触发事件？

当我移动鼠标时，可以一次连按两次。但这不是目标。

这是代码段：

<th 
  v-for="c in data.columns" 
  v-if="visiblecolumns.includes(c)" 
  v-on:dblclick="COLUMN_DEFINITION[c]+=50" 
  :style="{ 'min-width': COLUMN_DEFINITION[c] + 'px', 'max-width': COLUMN_DEFINITION[c] + 'px' }">
    {{ c }}
</th>

Answer 1

<th 
  v-for="c in data.columns" 
  v-if="visiblecolumns.includes(c)" 
  @click="changeColumnDefinition" 
  :style="{ 'min-width': COLUMN_DEFINITION[c] + 'px', 'max-width': COLUMN_DEFINITION[c] + 'px' }">
    {{ c }}
</th>

发件人：vue.js: how to handle click and dblclick events on same element，并由@ JBDouble05建议

new Vue({
    el: '#app',
    data: {
        counter: 0,  // count the clicks
        timer: null  // Needs to be specified here so it can be accessed on both clicks
    },    
    methods: {
        changeColumnDefinition: function(event){
            var self = this
            this.counter++ 
            if(this.counter == 1) {
                this.timer = setTimeout(function() {
                    // DO NOTHING BUT RESET IN CASE THERES JUST ONE CLICK                    
                    self.counter = 0
                }, 500);  // increase delay as you like
            }else{
                clearTimeout(this.timer);  
                // COLUMN_DEFINITION[c]+=50
                self.counter = 0;
            }         
        }      
    }
});

注意，这超出了问题，但：

我个人会将其包装在一个组件中，因为您可能会有多个头。如果您需要调用外部函数，请使用：

this.$emit('someEvent', someValue);

要发出事件，然后以您的组件的身份访问

<my-awesome-component @someEvent="someFunction"></my-awesome-component>

Answer 2

您应该做的是制作一个模变量，并将一个递增语句附加到您的v-on:dblclick属性上，该语句在变量的值上添加一个（增量），然后在您的JavaScript中添加一个事件侦听器文件，然后在发生这种情况时，对该变量执行模运算：如果该变量可被两个（counter % 2 == 0整除，则用户已经双击了两次。如果它不能被两个（counter % 2 != 0整除，则他们已经单击了奇数次，您可以重新参与他们第一次双击它时发生的事件。那是一口气，但是希望您能理解，只是问您是否需要简化或进一步的解释。

VueJS如何双击doubleclick

2 个答案: