copy

提示

将文本复制到剪切板

基础语法：v-copy:事件.修饰符='选项'

支持的事件：

• click
• contextmenu

---

修饰符：

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

---

可用的选项：

• 字符串：要复制的内容
• 对象：
  • copyText：要复制的内容
  • success：成功的回调函数 (event, copyText) => {}
  • error：失败的回调函数 (err, copyText) => {}

简单使用

demo1

<template>
  <demo>
    <button
      class="demo-button"
      v-copy="{
        copyText: 'v-copy指令',
        success: copySuccess,
        error: copyError
      }"
    >
      点击复制
    </button>
  </demo>
</template>
<script lang="ts" setup>
import Notice from '../../../util/notice'
import demo from '../../global/demo.vue'

const copySuccess = (event: Event, copyText: string) => {
  new Notice().success(`${copyText}: 复制成功`)
}
const copyError = (err: Error, copyText: string) => {
  new Notice().error(`${copyText}: 复制失败`)
}
</script>

绑定多个事件

demo2

<button
  class="demo-button"
  v-copy:click-contextmenu.prevent="{
    copyText: 'v-copy指令',
    success: copySuccess,
    error: copyError
  }"
>
  点击复制
</button>