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


所有评论(0)