项目中有些场景需要点击复制某段内容并粘贴的功能 如点击复制名称,订单号,文章段落等
需要先安装 引入 使用对应的方法

1.安装
npm install clipboard --save

2.引入
直接在使用的页面中引入

 import Clipboard from 'clipboard'

3.使用

使用 data-clipboard-text 属性设置您想包含的内容即可 绑定点击事件

html部分

<template>
  <div class="home">
    <div :data-clipboard-text='copyText' @click="copyBtn" id="copy">点击复制</div>
  </div>
</template>

<script>
import Clipboard from 'clipboard'

export default {
  name: 'Home',
  data(){
    return{
      copyText:'测试复制文字'
    }
  },
  methods:{
    copyBtn(e) {
      let clipboard = new Clipboard("#copy");
      clipboard.on('success', e => {
        console.log("复制成功")
        //可加一下复制成功的提示

        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        console.log("不支持复制")
        //可加一下复制失败的提示
        
        // 释放内存
        clipboard.destroy()
      })
    },
  }
}
</script>