第一种: 原生复制该订单号
<span class="number">{{value}}</span>
<span class="copy" @click="copyName(value)">复制</span>
copyName() {
const text = document.querySelector(".number");
let range = document.createRange();
range.selectNodeContents(text);
let selection = document.getSelection();
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("Copy");
this.$toast("复制成功");
}
第二种:通过插件复制
// 下载插件
cnpm i vue-clipboard2
// main.js引入注册
import VueClipBoard from 'vue-clipboard2'//一键复制
Vue.use(VueClipBoard)
1、使用this.$copyText()方法进行复制
// 页面使用复制方法
copyUrl(v) {
let _this = this
this.$dialog.confirm({
title: '请复制电子凭证地址到浏览器打开进行查看',
confirmButtonText: '一键复制',
message: v.policyUrl
})
.then(() => {
this.$copyText(v.policyUrl).then(
function () {
_this.$toast('复制成功!')
},
function (e) {
console.log('copy arguments e:', e)
}
)
}).catch(() => {})
}
2、通过自定义指令复制
<template>
<div>
<div>
<textarea name="复制内容" id cols="30" rows="10" v-model="value"></textarea>
<button
v-clipboard:copy="value"
v-clipboard:success="firstCopySuccess"
v-clipboard:error="firstCopyError"
>第一种方式复制</button>
</div>
<div>
<textarea name="粘贴内容" id cols="30" rows="10"></textarea>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value: "复制内容"
};
},
methods: {
firstCopySuccess(e) {
console.log("copy arguments e:", e);
alert("复制成功!");
},
firstCopyError(e) {
console.log("copy arguments e:", e);
alert("复制失败!");
}
}
};
</script>