npm i --save clipboard
npm i --save vue-clipboard2
npm i --save vue-clipboard3
//三种复制集合
在main.js中引入vue-clipboard2
import clipboard from 'clipboard';
Vue.prototype.clipboard = clipboard;
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
clipboard 使用方法
//html
<el-button type="text"
data-clipboard-action="copy"
:data-clipboard-text="复制的内容"
class="cobyOrderSn" @click="copylink" >复制</el-button>
copylink(){
let _this = this;
let clipboard = new this.clipboard(".cobyOrderSn");
clipboard.on('success', function () {
console.log(123)
_this.$message({showClose: true,duration:3000,message: '复制成功',type: 'success'});
});
clipboard.on('error', function () {
_this.$message({showClose: true,duration:3000,message:'复制失败',type: 'error'});
});
}
vue-clipboard2 使用方法
let copy = '需要复制的内容'
this.$copyText(copy).then(
res => {
_this.$toast({message: `链接复制成功,请关闭弹窗!`,duration: 2000});
},
err => {
_this.$toast({message: `链接复制失败,请关闭弹窗!`,duration: 2000});
}
);
vue3中使用复制
vue-clipboard3
<script>
import useClipboard from "vue-clipboard3";
export default {
setup () {
const { toClipboard } = useClipboard();//复制
//复制
const copy = (e) =>{
try{
toClipboard('需要复制的内容')
ElMessage.success('复制成功,请在浏览器打开!')
}
catch{
ElMessage.success('该浏览器不支持自动复制')
}
}
}
}