vue移动端使用Clipboard复制粘贴动态的数据总是报错,解决办法
点击复制链接按钮即可复制实现过程:List item下载引入到需要的组件中import Clipboard from 'clipboard';2.1 实现代码:template部分<template><!-- 复制链接 -->&am
·
点击复制链接按钮即可复制
实现过程:
- 下载
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>
更多推荐
已为社区贡献12条内容
所有评论(0)