前端（Vue使用clipboard）文字复制功能

推荐方法二
放法一、

// navigator clipboard 需要https等安全上下文
if (navigator.clipboard && window.isSecureContext) {
  // navigator clipboard 向剪贴板写文本
  navigator.clipboard.writeText(this.content).then(() => {
    this.$message.success('复制成功');
  });
} else {
  // 创建text area，已弃用
  let textArea = document.createElement('textarea');
  textArea.value = this.content;
  // 使text area不在viewport，同时设置不可见
  textArea.style.position = 'absolute';
  textArea.style.opacity = '0';
  textArea.style.left = '-999999px';
  textArea.style.top = '-999999px';
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();
  // 执行复制命令并移除文本框
  document.execCommand('copy');
  this.$message.success(`复制成功: ${this.content}`);
  textArea.remove();
}

方法二、Vue 使用clipboard

npm i clipboard

设置全局指令

/**
* v-clipboard 文字复制剪贴
* Copyright (c) 2021
*/

import Clipboard from 'clipboard'
export default {
  bind(el, binding, vnode) {
    switch (binding.arg) {
      case 'success':
        el._vClipBoard_success = binding.value;
        break;
      case 'error':
        el._vClipBoard_error = binding.value;
        break;
      default: {
        const clipboard = new Clipboard(el, {
          text: () => binding.value,
          action: () => binding.arg === 'cut' ? 'cut' : 'copy'
        });
        clipboard.on('success', e => {
          const callback = el._vClipBoard_success;
          callback && callback(e);
        });
        clipboard.on('error', e => {
          const callback = el._vClipBoard_error;
          callback && callback(e);
        });
        el._vClipBoard = clipboard;
      }
    }
  },
  update(el, binding) {
    if (binding.arg === 'success') {
      el._vClipBoard_success = binding.value;
    } else if (binding.arg === 'error') {
      el._vClipBoard_error = binding.value;
    } else {
      el._vClipBoard.text = function () { return binding.value; };
      el._vClipBoard.action = () => binding.arg === 'cut' ? 'cut' : 'copy';
    }
  },
  unbind(el, binding) {
    if (!el._vClipboard) return
    if (binding.arg === 'success') {
      delete el._vClipBoard_success;
    } else if (binding.arg === 'error') {
      delete el._vClipBoard_error;
    } else {
      el._vClipBoard.destroy();
      delete el._vClipBoard;
    }
  }
}

使用

Vue.directive('clipboard', clipboard)

v-clipboard:copy="内容"
v-clipboard:success="复制成功后的方法"