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