vue复制到剪切板

VUE 中实现复制到剪切板，在电脑任何位置可复制功能

1、环境

vue 、 clipboard

2、使用步骤

1） 安装依赖包

    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 插件引入

clipboard 插件的引入.jpg

3.2 clipboard方法的操作

clipboardjs 方法的操作.jpg

3.3 dom 结构中方法的绑定

dom结构中方法的绑定.jpg