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

posted @ 2021-11-09 16:47  GoodTimeGGB  阅读(60)  评论(0编辑  收藏  举报