点击复制链接按钮即可复制 实现过程：
下载 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>参考guxuehua
