Vue复制内容到剪贴板 — vue-clipboard2

npm — vue-clipboard2

安装

npm install --save vue-clipboard2

使用

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
 
Vue.use(VueClipboard)

没有特定按钮

在元素上绑定触发事件，方法中获取对象， 通过this.$copyText 复制

methods: {
    copyData(){
        //如果不需要回调：
        this.$copyText(this.message)
        //如果需要回调：
        this.$copyText(this.message).then( e => {
            alert('复制成功')
            console.log(e)
        }, function (e) {
            alert('复制失败')
            console.log(e)
        })
    }
}

点击特定元素

点击元素触发复制，将copy内绑定的属性的值添加到剪贴板

<input type="text" v-model="message">
<!-- copy内填写属性名 -->
<button type="button"
        v-clipboard:copy="message"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError">Copy!</button>

methods: {
    //复制成功的回调
    onCopy: e => {
        alert('你成功复制了: ' + e.text)
    },
    //复制失败的回调
    onError: e => {
        alert('复制失败')
    }
}