javascript - VueJS如何双击双击

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;
            }         
        }      
    }
});

---

注意这超出了问题范围，但是:

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

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

发出一个事件，然后在您的组件中访问它

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