前言

复制是最常见的功能，当产品经理要我们实现这一功能，告诉他直接用ctrl+v肯定会被‘翻白眼’，这时候肯定要大声说复制功能小菜一碟。本节我们就来看一下如何实现复制功能。

实现

说起复制，首先想到的就是ctrl+c，ctrl+c能把选中的内容放到Clipboard(剪贴板)中，复制功能说白了就是把内容放到剪贴板中，要实现复制离不开剪贴板，那么我们先来了解Clipboard。

Clipboard

Clipboard是一个临时存储区域，能够让用户进行复制、粘贴等操作，而这些操作可以由Clipboard控制，Navigator.clipboard就表示系统剪贴板，对应这有以下相关方法：

• read():读取剪贴板的数据，包括图片等。
• write():将数据写入剪贴板。
• readText():读取剪贴板文本数据。
• writeText():将文本写入剪贴板。

其中write与wtirteText可以帮我们实现复制功能，根据具体需求选择合适的方法即可。下面我们就写一个复制功能的实例。

实例

本次我们用vue2技术栈去实现，其他技术栈也是用write/writeText方法。画一个输入框与复制按钮，点击复制按钮就能把输入框里面的内容复制出来。

点击复制按钮就会提示复制成功，此时我们ctrl+v就会发现粘贴的内容就是刚才输入框输入的内容。如果我们想要复制图像等就把writeText变成write。 复制功能的实现就是如此简单，如果多个页面都需要用到复制功能我们可以封装一个组件，把按钮变成复制图标。 哪个页面需要就注册使用：

   <CopyText :text="123"/>

自定义指令

上面例子中我们封装了一个组件，除此之外我们还可以封装一个自定义指令，实现复制功能。vue2中自定义指令为directive，directive是由一个包含钩子函数的对象构成，对应的钩子函数有bind，inserted等，每个钩子函数接收以下参数：

• el:dom元素。
• binding:包含着传给指令的值，修饰符等内容的对象。
• vnode:虚拟Dom元素。
• oldVnode：之前的虚拟Dom元素，只能在componentUpdated、updated使用。 一般我们用el、binding两个参数就可以啦，指令定义完成之后，用vue.directive(id,fun)方法去注册。根据以上内容我们写一个v-copy的指令，如果指令中传值了我们就复制传递过来的值，如果没有我们直接复制el元素的text，这样就有两种用法了。

   import { DirectiveOptions } from 'vue'
export const copy: DirectiveOptions = {
  inserted(el, binding) {
    const { value } = binding
    //双击触发
    el.addEventListener('dblclick', () => {
      if (value) {
        navigator.clipboard.writeText(value)
      } else {
        navigator.clipboard.writeText(el.innerText)
      }
    })
    el.style.cursor = 'copy'
  }
}

新建一个directives文件夹，再建copy.ts文件，写入上述代码，然后再main.ts中引入注册。

   import * as directives from '@/directives'
   //全局注册
   Object.keys(directives).forEach(key => {
  Vue.directive(key, (directives as { [key: string]: DirectiveOptions })[key])
})

这时候我们在页面上就可以使用v-copy指令，如果v-copy后面有值就会复制参数值，如果没有就复制自身文本。

    <div v-copy>123</div>
    <div v-copy="456">复制</div>

在页面上双击第一个div就会复制123，双击第二个div就会复制456。

vue-clipboard2

Vue-clipboard2是可以完成复制功能的插件，用法非常简单，并且功能要比我们自己写的丰富。我们将该插件下载，然后再main.ts中引入使用。

   import VueClipBoard from 'vue-clipboard2'
   Vue.use(VueClipBoard)

复制方法就绑定到了实例中，这时候我们直接用this.$copyText方法就能复制内容。

     private handleCopy() {
    this.$copyText(`${this.text}`)
    this.$message.success('复制成功')
  }

就是如此的简单方便。

总结

以上就是在vue中实现复制功能的方法，如果想要简单一点的就直接用vue-clipboard2插件；如果只是一两处复制我们就直接用Navigator.clipboard实现。