VUE 点击复制方案

参考：https://blog.csdn.net/Dream_xun/article/details/90485066

 

1.安装插件　　或者cnpm 命令也可以

npm install --save vue-clipboard2

2.main.js引入，或者在使用的组件页面引入，这里在main.js引入

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

示例：

<template>
    <div class="copyBox">
          复制的内容：<span>{{copyText}}span>
          <el-button  type="text" size="medium"
            v-clipboard:copy="copyText"     //绑定变量
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          >点我复制el-button>
    div>
template>
<script>
export default {
...  //vue其他代码
data(){
    return{
        copyText:'欢迎访问 Dream_xu 的博客！'
}
}
methods: {
    onCopy(){
        this.$message.success('复制成功')
    },
    onError(){
        this.$message.console.error('复制失败');
    }
}
script>