vue + element-ui + vue-clipboard2 实现文字复制粘贴功能与提示

1、在所在项目下安装插件

npm install vue-clipboard2 --save

2、在所在项目的index.js注入vue-clipboard2

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

3、使用

<div>
    <el-button size="mini" type="primary" icon="el-icon-copy-document" round class="copy-btn" v-clipboard:copy="要复制的文本内容的值" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
</div>

回调函数

methods: {
   
    // 复制成功时的回调函数
    onCopy (e) {
   
        this.$message.success('内容已复制到剪切板！')
    },
    // 复制失败时的回调函数
    onError (e) {
   
        this.$message.error('抱歉，复制失败！')
    },
}

以上就是vue + element-ui + vue-clipboard2 实现文字复制粘贴功能与提示的介绍，做此记录，如有帮助，欢迎点赞关注收藏！