vue-clipboard2 点击复制粘贴功能(复制内容到剪贴板)

一、安装 vue-clipboard2，并全局引入

// 方式1： 通过 script 标签引入包
<script src="vue.min.js"></script>
<script src="dist/vue-clipboard.min.js"></script>


// 方式2：通过 npm 进行安装，并使用 import 在入口文件（ main.js ）进行引入
npm install vue-clipBoard2 --save

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

二、简单使用

方式1：使用 v-clipboard指令 的方式

<template>
    <div>可以通过点击下面文字，实现文字复制到剪贴板</div>
    <div v-clipboard:copy="divContent"
        v-clipboard:success="onSuccess" 
        v-clipboard:error="onError">
        {{ divContent }}
    </div>
</template>

<script>
    export default {
        data(){
            return {
                divContent: '这是div承载的内容'
            }
        },
        methods: {
            onSuccess(e){
                console.log("内容已复制到剪切板！，复制的内容为：" + e.text)
            },
            onError(e){
                console.log("抱歉，复制失败！")
            },
        }
    }
<script>

方式2：使用 @click绑定函数 + this.$copyText的方式

<template>
    <div>可以通过点击下面文字，实现文字复制到剪贴板</div>
    <div @click="doCopy">{{ divContent }}</div>
</template>

<script>
    export default {
        data(){
            return {
                divContent: '这是div承载的内容'
            }
        },
        methods: {
            doCopy(){
                this.$copyText(this.divContent).then((res) => {
                    console.log("内容已复制到剪切板！，复制的内容为：" + res.text)
                }).catch(err => {
                    console.log("抱歉，复制失败！")
                })
            },
        }
    }
<script>