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>

 

Logo

前往低代码交流专区

更多推荐