vue 点击文字input_Vue实现点击按钮复制文本内容

点击复制功能主要通过 clipboard.js来实现

在vue中使用clipboard.js时候发现一个问题，就是如果不是input或者button按钮的话，则复制不成功，使用步骤如下：

1、引入clipboard.js，方法如下：

第一种直接npm安装：npm install clipboard --save

第二种：(下载地址：[https://clipboardjs.com/](https://clipboardjs.com/))

2、在需要使用的组件中import

引用方法：import Clipboard from 'clipboard';

3、添加需要复制的内容

例如：

一键复制文案

立即阅读

解析：data-clipboard-text后边跟需要复制的内容

4、添加点击后的方法

data(){

return{

message:'我是可以复制的内容，请点击复制',

}

},

methods: {

copy() {

var clipboard = new Clipboard('.copy_btn')

clipboard.on('success', e => {

let instance = Toast('复制成功');

setTimeout(() => {

instance.close();

}, 2000);

// 释放内存

clipboard.destroy()

})

clipboard.on('error', e => {

// 不支持复制

let instance = Toast('该浏览器不支持自动复制');

setTimeout(() => {

instance.close();

}, 2000);

// 释放内存

clipboard.destroy()

})

}

}