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后面引入 )

  3）页面中使用

1、 html  结构

    
    
    
     复制链接
     



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 结构中方法的绑定