vue中对同一元素添加单击和双击事件并解决他们之间的冲突

第一种

<div id="app">
	<button @click="a" @dblclick="b">点击</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            name: "清欢"
        },
        methods: {
           a() {
               this.flag = true
               setTimeout(() => {
                   if (this.flag) {
                       console.log(1);
                   }
               }, 300);
            },
            b() {
                this.flag = false
                console.log(5);
            }
        }
    })
</script>

第二种

<div id="app">
	<button @click="a" @dblclick="b">点击</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let timer = null
    let vm = new Vue({
        el: "#app",
        data: {
            name: "清欢"
        },
        methods: {
            a() {
                clearTimeout(timer)
                timer = setTimeout(() => {
                     console.log(1);
                }, 300);
             },
             b() {
                console.log(5);
                clearTimeout(timer)
             }
         }  
     })
</script>