vue 点击按钮复制指定内容到剪切板,复制变量值到剪切板
程序员文章站
2022-05-15 23:53:32
...
1.安装插件
npm install --save vue-clipboard2
或者
cnpm install --save vue-clipboard2
2.main.js引入,或者在使用的组件页面引入,这里在main.js引入
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
3.使用demo
<template>
<div class="copyBox">
复制的内容:<span>{{copyText}}</span>
<el-button type="text" size="medium"
v-clipboard:copy="copyText" //绑定变量
v-clipboard:success="onCopy"
v-clipboard:error="onError"
>点我复制</el-button>
</div>
</template>
<script>
export default {
... //vue其他代码
data(){
return{
copyText:'欢迎访问 Dream_xu 的博客!'
}
}
methods: {
onCopy(){
this.$message.success('复制成功')
},
onError(){
this.$message.console.error('复制失败');
}
}
</script>
下一篇: javascript实现复制内容到剪切板