vue移動端使用Clipboard複製貼上動態的資料總是報錯,解決辦法
阿新 • • 發佈:2018-11-02
點選複製連結按鈕即可複製
實現過程:
- 下載
npm install clipboard --save
- 引入到需要的元件中
import Clipboard from "clipboard";
3.1 實現程式碼:template部分
<template> <!-- 複製連結 --> <div class='copy'> <input type="text" v-model="copyContent" id="copy_text" class="copyValue"> <button class="tagRead" data-clipboard-action="copy" data-clipboard-target="#copy_text" @click="copy" >複製連結</button> </div> </template>
3.2 script部分
<script> import Clipboard from "clipboard"; export default { name: "performance", data() { return { copyContent: "http://112.uve97a.cn/?icode=" + "123456" }; }, methods: { // 複製內容 copy() { var clipboard = new Clipboard(".tagRead"); clipboard.on("success", e => { console.log("複製成功"); // 釋放記憶體 clipboard.destroy(); }); clipboard.on("error", e => { // 不支援複製 console.log("該瀏覽器不支援自動複製"); // 釋放記憶體 clipboard.destroy(); }); } } }; </script>
3.3 style部分
<style scoped> .copyValue { display: inline-block; width: 240px; height: 24px; line-height: 20px; border-radius: 30px; background-color: rgba(255, 255, 255, 1); text-align: center; box-shadow: 0px 0px 0px 0px rgba(131, 33, 172, 1); border: 2px solid rgba(255, 185, 36, 1); color: rgba(0, 0, 0, 1); font-size: 12px; text-align: center; font-family: SourceHanSansSC-regular; padding: 4px; } .tagRead { width: 70px; height: 26px; border-radius: 24px; border: 0.1px solid transparent; padding: 0; background: -webkit-linear-gradient( top, #ffe4a3, #ffba28 ); background: -o-linear-gradient( bottom, #ffe4a3, #ffba28 ); background: -moz-linear-gradient( bottom, #ffe4a3, #ffba28 ); background: linear-gradient( to bottom, #ffe4a3, #ffba28 ); color: #5e2d05; font-size: 12px; font-weight: bolder; } </style>