Vue动态复制

复制链接 {{copyContent}}

//npm install clipboard --save import Clipboard from "clipboard"; export default { name: "performance", data() { return { copyContent: "http://112.uve97a.cn/?icode=" + "123456" }; }, created() { let _this = this setInterval(function () { _this.copyContent = (Math.random(1000)*100).toFixed(0) // console.log(v-clipboard); }, 1500) }, methods: { // 复制内容 copy() { var clipboard = new Clipboard(".tagRead"); clipboard.on("success", e => { console.log("复制成功"); // 释放内存 clipboard.destroy(); }); clipboard.on("error", e => { // 不支持复制 console.log("该浏览器不支持自动复制"); // 释放内存 clipboard.destroy(); }); } } };

`
.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;
opacity: 0;
}

.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;
}`