tags: ‘vue’, ‘复制’

categories: ‘vue’, ‘复制’

复制插件地址

安装使用

下载依赖

  1. npm install clipboard --save

main.js
在mian.js中引入，当然我们也可以在用到的.vue中引入，因为我不止一个地方用到了复制，所以直接在main.js里面引入了。

  1. import clipboard from 'clipboard';  // 引入clipboard,这是复制的插件
  2. Vue.prototype.clipboard = clipboard;  //注册到vue原型上

.vue中调用
更多操作查看官方文档

  1. <template>
  2.   <div>
  3.     <div class="content">
  4.       <p>aaaa</p>
  5.       <p>bbbb</p>
  6.       <p>cccc</p>
  7.       <p>dddd</p>
  8.     </div>
  9.     <button class="Btn">复制</button>
  10.   </div>
  11. </template>
  13. <script>
  14.   let _this = '';
  16.   export default{
  17.     methods: {
  18.       initBtnCopy(nameBtn,nameContent){
  19.         _this.myClipboard ? _this.myClipboard.destroy() : '';
  21.         this.myClipboard = new Clipboard(nameBtn, {
  22.           target: function() {
  23.             return document.querySelector(nameContent);
  24.           }
  25.         });
  27.         this.myClipboard.on('success', function(e) {
  28.           _this.$Message.success("复制成功!");
  30.           // 先销毁之前的，再重新定义
  31.           _this.myClipboard.destroy();
  32.           initBtnCopy
  34.           e.clearSelection();
  35.         });
  36.         this.myClipboard.on('error', function(e) {
  37.           _this.$Message.info('请按 Ctrl+C 复制文字');
  38.         });
  39.       }
  40.     },
  41.     beforeCreate : function (){
  42.       _this = this;
  43.     },
  44.     mounted(){
  45.       this.initBtnCopy(".Btn", ".content");
  46.     }
  47.   }
  48. </script>