vue实现复制内容到粘贴板

方案：找到textarea对象（input同样适用），获取焦点，选中textarea的所有内容，并调用document.execCommand("copy")
实现代码：

  <template>
       <div>
          <textarea ref="letters"></textarea>
          <button @click="copyToClipboard('letters')">复制</button>
      </div>
  </template>
  <script>
   export default {
        data() {
            return {
                loading: false
            }
        },
        created() {
            this.$nextTick(function () {
                this.$refs.letters.value = '姓名：小白兔\n性别：男\n电话号码：18500000000';
            })
        },
        methods: {
            //复制内容到粘贴板
            copyToClipboard(elemRef) {
                let target;
                let succeed = false;
                if (this.$refs[elemRef]) {
                    target = this.$refs[elemRef];
                    // 选择内容
                    let currentFocus = document.activeElement;
                    target.focus();
                    target.setSelectionRange(0, target.value.length);
                    // 复制内容
                    try {
                        succeed = document.execCommand("copy");
                        alert("内容复制成功");
                    } catch (e) {
                        succeed = false;
                    }
                    // 恢复焦点
                    if (currentFocus && typeof currentFocus.focus === "function") {
                        currentFocus.focus();
                    }
                }
                return succeed;
            },
        }
    }
  </script>

如果要做类似于博客园的点击后全选添加：

   注：增加div显示出数据，点击隐藏div,textare展示
        下面代码是全选状态： 
        target.setSelectionRange(0, target.value.length);

上图：

image.png