Vue复制到剪贴板

1.需求背景

有些业务需求需要点击按钮复制链接，本文就是记录该如何实现

应用中间件 vue-clipboard2

2.实现方法

   1）先下载 vue-clipboard2

 npm  install vue-clipboard2  --save

  2） 引入安装包

​​​​
1、 脚手架搭建的用户
import Vue from 'vue'

import VueClipboard  from 'vue-clipboard2'

Vue.use( VueClipboard )


2、独立使用( 注意：vue-clipboard2  需要再vue.js后面引入 )

<script src="vue.min.js"></script>

<script src="vue-clipboard2.js"></script>

  3）页面中使用

1、 html  结构
<div>
    <span :title="teamLink" class="invitLink pull-left ellipsis" v-text="teamLink" >
    </span>
    <el-button class="cpLink" type="primary" v-clipboard:error="onError"
     v-clipboard:copy="teamLink"  v-clipboard:success="onCopy">
     复制链接
     </el-button>
</div>


2、  JS  操作

 methods:{
     // 复制成功
    onCopy(e){
        this.$message({
            message:'复制成功！',
            type:'success'
        })
    },
    // 复制失败
    onError(e){
       this.$message({
            message:'复制失败！',
            type:'error'
        })
    },
 }

3、实际项目中
3.1 clipboard 插件引入

3.2 clipboard方法的操作

onCopy(e){
        console.log('s');
        this.$Toast({content: '复制成功', duration: 1500})
    },
    // 复制失败
    onError(e){
      console.log('e');
       this.$Toast({content: '复制失败', duration: 1500})
    },

3.3 dom 结构中方法的绑定