vue中使用Clipboard.js方法详解

为什么选择Clipboard.js这里就不多加描述,直接进入正题,如何在vue项目中实现复制效果。

1、安装Clipboard.js

npm install clipboard --save

2、使用单页面中引入Clipboard.js

import Clipboard from 'clipboard';

3、div代码

<div class="alert_input display_flex mt20 ">
<button ref="copy" data-clipboard-text="复制的内容部分" @click="copyText" class="cobyOrderSn sure_button flex1 cursor orange_fff">复制</button>
</div>

4、js代码(注这里的js只是提示操作,实际复制在你点击按钮的时候已经复制到了剪切板)

copyText:function(){
this.$message({
showClose: true,
type:'success',
message: '复制成功!'
})
},

以上便完成了文本的简单复制操作。

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!