使用vue时，如何在页面实现复制的效果

直接进入正题

很多网站有一键复制的按钮，例如某度文档，某DN，那么，在使用vue开发时，如何在自己的页面中添加一个能实现复制内容的元素呢？

主角：useClipboard

vueuse.org/core/useCli…

demo：

import { ref } from 'vue'
import { useClipboard, usePermission } from '@vueuse/core'

const input = ref('')

const { text, isSupported, copy } = useClipboard()
const permissionRead = usePermission('clipboard-read')
const permissionWrite = usePermission('clipboard-write')
</script>

<template>
  <div v-if="isSupported">
    <note>
      Clipboard Permission: read <b>{{ permissionRead }}</b> | write
      <b>{{ permissionWrite }}</b>
    </note>
    <p>
      Current copied: <code>{{ text || 'none' }}</code>
    </p>
    <input v-model="input" type="text">
    <button @click="copy(input)">
      Copy
    </button>
  </div>
  <p v-else>
    靓仔，你滴浏览器拉跨搞不了
  </p>
</template>

1. copy需要拷贝的内容
2. copied 是否拷贝成功
3. isSupported 浏览器是否支持，需要授权读取粘贴板和写入粘贴板权限