vue实现点击按钮复制input里面的内容

vue实现点击按钮复制input里面的内容

1. HTML

<a-input type="text" value="这是内容" class=“input”></a-input><a-button size="small" @click="copyText">复制</a-button>

2. 样式大概是这样
   
3. 要实现点击复制按钮把input输入框中的内容复制到剪切板上
4. 开始我想用的是input的select()功能实现

copyText(){
   var input = document.createElement("input");   // js创建一个input输入框
   input.value = this.text;  // 将需要复制的文本赋值到创建的input输入框中
   document.body.appendChild(input);    // 将输入框暂时创建到实例里面
   input.select();   // 选中输入框中的内容
   document.execCommand("Copy");   // 执行复制操作
   document.body.removeChild(input); // 最后删除实例中临时创建的input输入框，完成复制操作
},

但是在vue项目中exeCommand方法不行，在代码中直接就是有删除线。所以只能换一种方法。

5. 通过clipboard.js可以很方便的实现
   5.1 先按照npm install clipboard --save
   5.2 在需要用到的组件引入import Clipboard from ‘clipboard’;

//html
<a-input
              class="link-style"
              type="text"
              :value="value"
              read-only
            />
            <a-button
              @click="copy"
              :data-clipboard-text="value"
            >复制</a-button>

注意：data-clipboard-text后面的内容就是要复制的内容，所以这个时候可以把input输入框的内容提出来给value

copy() {
      var clipboard = new Clipboard('.link-btn')
      clipboard.on('success', () => {
        this.$message.success('复制成功~')
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', () => {
        // 不支持复制
        this.$message.error('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
    },

这样就可以实现点击按钮将内容复制到剪切板啦~