VUE3.X中使用vue-clipboard3实现一键复制功能

该方法同时适用于移动端以及PC端

安装：

npm install --save vue-clipboard3

在需要的组件中引入并使用：

<template>
	//我这里用了vant组件库的button按钮，你可以根据自己需要将click绑定在需要的元素上
	//clickBtn(value)中的value为需要复制的原始数据
  <van-button square text="复制" type="success" class="delete-button"  @click='clickBtn(value)'/>
</template>
<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>

参考网站

https://www.npmjs.com/package/vue-clipboard3