Vue3 使用 clipboard实现复制粘贴功能

起因

今天在写一个项目的时候使用到了clipboard但是发现网上的教程好像都是vue2的。所以查了一下github这里记录一下Vue3 使用 clipboard。

Install

npm install --save @soerenmartius/vue3-clipboard

使用

在全局中使用 v-clipboard

src/main.js 或 src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { VueClipboard } from '@soerenmartius/vue3-clipboard'
createApp(App).use(VueClipboard).mount('#app')

列子

在按钮上使用 v-clipboard

<template>
  <input v-model="value" />
  <button v-clipboard="value">Copy</button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const value = ref('lorem')
    return { value }
  },
})
</script>

复制成功事件和失败事件

<template>
  <input v-model="value" />
  <button
    v-clipboard:copy="value"
    v-clipboard:success="onSuccess"
    v-clipboard:error="onError"
  >
    Copy
  </button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const value = ref('lorem')
    const onSuccess = () => {
      console.log('success')
    }
    const onError = () => {
      console.log('error')
    }
    return { value, onSuccess, onError }
  },
})
</script>

独立使用toClipboard

<template>
  <input v-model="value" />
  <button @click="toClipboard(value)">Copy</button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { toClipboard } from '@soerenmartius/vue3-clipboard'
export default defineComponent({
  setup() {
    const value = ref('lorem')
    return { value, toClipboard }
  },
})
</script>