该方法同时适用于移动端以及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
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐