自定义指令

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。

拨打电话 v-phone-call

const phoneCall = (el: HTMLElement, binding: DirectiveBinding) => {
  el.onclick = e => {
    e.stopPropagation()
    const phone = el.getAttribute('phone') || binding.value.phone
    window.location.href = `tel:${phone}`
  }
}

<div v-phone-call="{ phone: yourPhone }">拨打电话<van-icon name="phone" color="#B7BCCD" /></div>
<div v-phone-call :phone="yourPhone">拨打电话<van-icon name="phone" color="#B7BCCD" /></div>

监听窗口大小变化 v-resize

const resize = {
  mounted(el: HTMLElement & any, binding: DirectiveBinding) {
    const { value: callback } = binding
    const width = ref(0)
    const height = ref(0)
    const handleResize = () => {
      width.value = el.clientWidth
      height.value = el.clientHeight
      callback({ width: width.value, height: height.value })
    }
    el._handleResize = handleResize
    // 监听窗口大小变化，调用 handleResize
    window.addEventListener('resize', handleResize)
    // 初始时调用一次 handleResize
    handleResize()
  },
  beforeUnmount(el: HTMLElement & any) {
    window.removeEventListener('resize', el._handleResize)
  }
}

<template>
  <div v-resize="resize">
    <p>Window width: {{ windowWidth }}</p>
    <p>Window height: {{ windowHeight }}</p>
  </div>
</template>
<script setup lang="ts">
  const windowWidth = ref(window.innerWidth)
  const windowHeight = ref(window.innerHeight)
  const resize = size => {
    console.log(size)
    windowWidth.value = size.width
    windowHeight.value = size.height
  }
</script>

复制文本 v-copy

const copy = (el: HTMLElement) => {
  el.addEventListener('click', () => {
    const text = el.innerText || ''
    const textarea = document.createElement('textarea')
    console.log(el.innerText)
    textarea.value = text
    document.body.appendChild(textarea)
    textarea.select()
    document.execCommand('copy')
    document.body.removeChild(textarea)
    showToast(text)
  })
}

<div v-copy>复制我吧</div>