Vue->实现内容复制粘贴功能的封装

在本文中用到的是一个vue第三方库:vue-clipboard2

此插件的安装以及使用方式以下
:

第一步:安装库而且导入模块

npm i --save vue-clipboard2

在main.js中导入模块而且注册

import VueClipboard from 'vue-clipboard2'
<br Vue.use(VueClipboard)

第二步:在须要操做的DOM元素中加入v-xxx代码，好比:

<van-cell title="服务单号" :value="dataForm.afsNo" v-clipboard:copy="dataForm.afsNo" v-clipboard:success="$copySuccess" v-clipboard:error="$copyError" />

第三步:封装复制成功/复制失败方法

` Vue.prototype.$copySuccess = function (element) { Toast.success({ duration: 1000, message: '已复制' }) }

Vue.prototype.$copyError = function (element) { Toast.success({ duration: 1000, message: '复制失败' }) } ` ·

写在最后

但愿个人分享对你有所帮助，更多资讯请持续关注，我会分享愈来愈多的实战经验哦！ 或加入大前端知识体系社区一块儿探索技术:608229520