async

说明

v-async -- 同步指令

指定的事件触发后会触发调用，事件如果被频繁触发，那么节流函数会按照一定的频率来触发调用

基础语法：v-async:事件-时间.修饰符

修饰符

• stop: 阻止点击事件继续冒泡
• prevent: 阻止浏览器的默认行为
• capture: 添加事件侦听器时使用事件捕获模式
• once: 事件只会触发一次
• passive: 告诉浏览器不用去查询，我们没用preventDefault阻止默认行为

简单使用

demo1

<template>
  <demo>
    <button class="demo-button" v-async="getData">点击获取数据</button>
    <div class="info">
      <div class="info-item">
        <div class="text">默认睡眠时间</div>
        <div class="tag">0ms</div>
      </div>
      <div class="info-item">
        <div class="text">默认绑定事件</div>
        <div class="tag">click</div>
      </div>
      <div class="info-item">
        <div class="text">调用次数</div>
        <div class="tag">{{ demoData.count }}</div>
      </div>
    </div>
  </demo>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import demo from '../../global/demo.vue'
import Notice from '../../../util/notice'

type DemoData = {
  count: number
}

const demoData = reactive<DemoData>({
  count: 0
})

const getData = (e: Event) => {
  return new Promise(async (resolve, reject) => {
    const res = (await new Notice().loading('success!')) as any
    setTimeout(() => {
      res.success()
      demoData.count++
      resolve('success')
    }, 1000)
  })
}
</script>

<style lang="less" scoped></style>

事件绑定

demo2

<button class="demo-button" v-async:contextmenu.prevent="contextmenu">
  右键点击获取数据
</button>

绑定多个事件

demo3

<button class="demo-button" v-async:click-contextmenu.prevent="contextmenu">
  左右键点击获取数据
</button>

设置睡眠时间

demo4

<button class="demo-button" v-async:2000="getData">左右键获取数据</button>