Vue實現剪貼板複製功能

NO IMAGE

小白單純記錄一下工作中遇到的需求:在vue中如何實現複製功能 (注: 依賴第三方插件 clipboard)

一. 安裝插件

   第一種直接npm安裝: npm install clipboard --save 
第二種:  <script src="js/clipboard.min.js"></script>(下載地址:https://clipboardjs.com/)

二. 全局注入(main.js)

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

三. 封裝方法方便多次使用

新建一個index.js文件裡面存放項目會多次使用的方法

export default{
install(Vue,opstion){
//把方法寫在vue原型方便調用
Vue.prototype.copy = function (value) {
this.$copyText(
`${value}`
).then( res => {
//這是element的Message 消息提示組件
this.$message({
message: "複製成功",
type: "success"
});
},
err => {
this.$message.error("複製失敗");
}
);
},
}
}

四. 在需要複製的頁面中調用copy方法

        <template>
<el-tooltip class="item" effect="dark" content="複製" placement="bottom">
<i class="icon copy iconfont" @click.stop="copyCode()">&#xe603;</i>
</el-tooltip>
</template>
<script>
//直接調用copy方法就可以了
copyCode(scope) {
//把需要複製的內容傳value
this.copy(scope.row.date);
},
</script>

剛開始寫工作記錄掘金大佬手下留情,如有錯誤望請告知.

相關文章

iOS底層探索方法

iOS底層探索類

[ts基礎]如何編寫一個ts聲明文件(xxx.d.ts)

JavaScript優雅寫法及騷操作記錄