clipboard.js

clipboard实现复制功能

移动端为了更好的用户体验，经常会有一些省略操作步骤的需求，像点击按钮自动帮用户实现复制功能、输入框智能补全用户输入、通过滑动拼图代替传承输入验证码等等，clipboard.js就是一个兼容性好的实现复制功能的库…

官方网站

项目用了vue框架，直接通过npm的方式安装，或者直接下载源码

 npm install clipboard --save
 //vue中用
 import Clipboard from 'clipboard' //或者指向源码本地路径
 
 //html  data-clipboard-action 动作类型 data-clipboard-target 复制内容节点id
 <span @click="copyTxt" id="copy" data-clipboard-action="copy"  data-clipboard-target="#wxh" :data-clipboard-text="privilege.privateService">联系专属管家</span>
 <p v-show="wxh_show">专属管家微信号:<em id="wxh">{{ privilege.privateService }}</em>已复制,请前往微信添加</p>

/*不需要绑定事件，库已帮我们实现 注意父节点 千万不要阻止事件冒泡 
  vue @click.stop 它通过冒泡的方式去监听事件的*/
 //在mounted下新建实例 ok 完成！easy。
mounted() {
     let clip=new Clipboard('#copy');
     clip.on('success',()=>{});
     clip.on('error',()=>{console.log('复制失败')});
}