一键复制功能，可复制dom中的所有内容包括图片文本

 1. 使用clipboardAPI

// 复制内容
    copyInfo(message){
      let element = this.$refs.contentContainer // dom元素
      const range = document.createRange();
      range.selectNode(element);
      window.getSelection().removeAllRanges(); // clear current selection
      window.getSelection().addRange(range); // to select text

      try {
          // 判断当前浏览器是否支持clipboardAPI
          if (navigator.clipboard && window.isSecureContext) {
            await navigator.clipboard.write([
                new ClipboardItem({
                  'text/html': new Blob([element.innerHTML], { type: 'text/html' })
                })
            ]).then(() => {
                  this.$message({
                    message: '复制成功',
                    type: 'success'
                  });
              }).catch(err => {
                  console.error('Could not copy text: ', err);
              });
          } else {
              // 不支持使用document.execCommand方法
              document.execCommand('copy');
              this.$message({
                message: '复制成功',
                type: 'success'
              });
          }
      } catch (err) {
          console.error('Error in copying text: ', err);
      }
      window.getSelection().removeAllRanges();
    },

   使用这个方法后发现一个问题使用navigator.clipboard.write复制的dom元素只能粘贴到富文本编辑器或者微信还有dom文档，不能粘贴到其他地方，例如钉钉。

2.clipboard.js

  使用

npm install clipboard --save

<div class="markdown-body"></div>
<i class="el-icon-document-copy btn" 
    data-clipboard-target=".markdown-body" 
    @click="copyInfo(content)" 
    style="padding: 3px;cursor: pointer;">
</i>

copyInfo(message){
  let clipboard = new Clipboard('.btn');
  // 复制成功
  clipboard.on("success", (e) => {
    console.log(e, '复制成功');
    clipboard.destroy();
  });
  //复制失败
  clipboard.on("error", (e) => {
    console.log(e, '复制失败');
    clipboard.destroy();
  });
}

  该方法实现后效果和document.execCommand('copy')类似