vue3,vue2使用clipboard进行复制

1.安装依赖

npm install --save vue-clipboard3

2.使用

 <van-button square text="复制" type="success" class="delete-button"  @click='clickBtn(value)'/>

vue3

<script>
import { defineComponent } from '@vue/composition-api'
import useClipboard from 'vue-clipboard3'

export default defineComponent({
  setup() {
	 //对原始数据进行处理，拼接成自己需要的格式
	 function clickBtn(value){
      console.log(value)
      //处理数据格式
      let Msg = '编号: '+ value.Code + '\r\n' +'名称: ' + value.Name + '\r\n' + '规格: ' + value.Spec + '\r\n' + '计量单位: ' + value.UnitName
      //调用复制操作函数
      copy(Msg)
    }	

    const { toClipboard } = useClipboard()
    const copy = async (Msg) => {
      try {
      	//复制
        await toClipboard(Msg)
        console.log(Msg)
        //下面可以设置复制成功的提示框等操作
        //...
      } catch (e) {
      	//复制失败
        console.error(e)
      }
    }

    return { clickBtn }
  }
})
</script>

vue2

npm install --save vue-clipboard2

其一

<template id="demo">
  <div>
    <p>{{message}}</p>
    <button type="button"
      v-clipboard:copy="message"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError">复制</button>
  </div>
</template>
 
<script>
 
export default {
  data() {
    return {
      message: '要复制的内容'
    }
  },
  methods: {
    // 复制成功
    onCopy: function (e) {
      console.log('成功复制： ' + e.text)
    },
    // 复制失败
    onError: function (e) {
      console.log('复制失败')
    }
  }
}
</script> 

其二

<template id="t">
    <div class="container">
    <p>{{message}}</p>
    <button type="button" @click="doCopy">复制</button>
    </div>
  </template> 
<script>
 
export default {
  data() {
    return {
      message: '要复制的内容'
    }
  },
 methods: {
   doCopy: function () {
     this.$copyText(this.message).then(function (e) {
        console.log('复制成功',e.text)
     }, function (e) {
        console.log(err)
        console.log('不能复制，复制失败')
     })
   }
 }
}
</script> 

注意：
data-clipboard-text中为复制内容，class名必须与new Clipboard()中的class名相同。
阻止冒泡@click.stop无法使用clipboard进行复制，改为使用其他方法实现。

const copy = (data: string) => {
     let url = data
     let oInput = document.createElement('textarea')
     oInput.value = url
     document.body.appendChild(oInput)
     oInput.select() // 选择对象;
     document.execCommand('Copy') // 执行浏览器复制命令
     console.log('复制成功')
     oInput.remove()
 }