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

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

clipboard 插件的引入.jpg

3.2 clipboard方法的操作

clipboardjs 方法的操作.jpg

3.3 dom 结构中方法的绑定

dom结构中方法的绑定.jpg