插件 - vue-clipboard2 的使用方法

摘要： vue-clipboard2 是vue的一键复制到剪贴板的插件，方便又好用。安装及引用npm install --save vue-clipboard...

vue-clipboard2 是vue的一键复制到剪贴板的插件，方便又好用。

安装及引用

npm install --save vue-clipboard2        // 安装

main.js                       // 引用

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

使用

第一种方式：

HTML：

<template>
    <div>
        <p v-clipboard:copy="msg" v-clipboard:success="onCopy" v-clipboard:error="onError"> {{msg}} </p>
    </div>
</template>

JS：

export default {
    data(){
    return {
        msg: "这是被复制的内容"
    },
    methods: {
        onCopy() {
            console.log("我复制成功啦");
        },
            
        onError() {
            console.log("我复制失败啦");
        }
    }
}

第二种方式：

HTML：

<template>
    <div>
        <p @click=="doCopy(msg)"> {{msg}} </p>
    </div>
</template>

JS：

export default {
    data(){
    return {
        msg: "这是被复制的内容"
    },
    methods: {
        doCopy() {
            console.log("我要复制啦");
            let that = this;
            this.$copyText(e).then(function (e) {
                console.log("我复制成功啦");
            }, function (e) {
                console.log("我复制失败啦");
            })
        }
    }
}