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

原创

GoodTime

发布于 2023-10-31 10:20:13

4590

发布于 2023-10-31 10:20:13

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('抱歉，复制失败！')
    },
}