本文作者:问几许

插件 - vue-clipboard2 的使用方法

问几许 3年前 ( 2019-07-31 ) 3123 抢沙发
插件 - 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("我复制失败啦");
            })
        }
    }
}
文章版权及转载声明

作者:问几许本文地址:https://wenjixu.com/blog/127.html发布于 3年前 ( 2019-07-31 )
文章转载或复制请以超链接形式并注明出处问几许

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,3123人围观)参与讨论

还没有评论,来说两句吧...