禁用元素上事件的vuejs列表

Question

如何监听禁用元素上的事件？我有一个输入框，我已经禁用了它，但如果用户双击它，我想启用它。我知道使用标签和使用CSS关闭标签是可能的。我想知道是否有一种方法可以在没有标签的情况下做到这一点——是否有某种方法可以禁用输入并为其处理事件？或者有没有一种方法可以使输入不可聚焦，除非双击？

Answer 1

您可以通过超时来阻止输入的默认操作。如果用户在ms之前点击，则运行所需的代码：

new Vue({
el: '#app',
data: {
checked: false,
timeoutId: null, // You do not need to have this defined, vue will initialize it for you, but here for clarity
},
methods: {
dblClick(event) {
// Simple click
if (!this.timeoutId) {
event.preventDefault();
event.stopPropagation();
this.timeoutId = setTimeout(() => {
this.timeoutId = null;
}, 300);
return // Do not run below code if it is a single click
}
// double click
this.timeoutId = null;
console.log('dblClick')
}
}
});

#app {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100vh;
}
h1 {
font-size: 1.5em;
margin-bottom: 5px;
}
i {
font-size: .75em;
margin: 0;
color: #969696;
}
input {
transform: scale(2);
margin: 20px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h1>Checkbox is {{ checked ? 'checked' : 'not checked' }}</h1>
<i>Double-click to change</i>
<input v-model="checked" type="checkbox" @click="dblClick">
</div>