vue框架实现点击复制文本功能
一、安装clipboard.js插件
npm install clipboard --save
二、在需要使用的页面引入clipboard.js
import Clipboard from 'clipboard';
三、定义添加复制的内容
:data-clipboard-text="message" // 绑定的数据源
<input type="text" v-model="message" class="input" />
<button class="bar_btn copy_btn" :data-clipboard-text="message" @click="copy">一键复制文案</button>
在data() {
return {
message: "我是可以复制的内容,请点击复制"
}
}
四、在methods中定义的事件
copy() {
var clipboard = new Clipboard(".copy_btn");
clipboard.on("success", e => {
let instance = Toast("复制成功");
setTimeout(() => {
instance.close();
}, 2000);
// 释放内存
clipboard.destroy();
});
clipboard.on("error", e => {
// 不支持复制
let instance = Toast("该浏览器不支持自动复制");
setTimeout(() => {
instance.close();
}, 2000);
// 释放内存
clipboard.destroy();
});
}
五、效果图
六、在a-input中复制的文本框
已经安装vue-clipboard插件的基础上
<div class="desc">
<a-input-group compact style="width:86%">
<a-input style="width: 7%;background:#999999;" default-value="HLS" />
<a-input :value="hls" disabled style="width:92%"/>
</a-input-group>
<a @click="copy(hls)">复制地址</a>
</div>
copy (val) {
const message = val
this.$copyText(message).then(res => {
if (res.code) this.$message.error(res.code)
this.$message.success('复制成功')
})
},