vue 实现一键复制功能（复制图片和文字）

前言

• 一键复制这个功能也是经常使用到的，实现起来并没有那么复杂，原生就可以实现。

• 原理就是找到这个Dom元素把这个元素里面的文字和图片直接复制下来。

• 细节复制方法的时候可能会出现斜杆（不是不生效不用管），图片大小会维持原来的图片大小。

• 注意在页面scss写的样式复制出来并不会生效，记得写行内样式才能识别到

代码实现

1.页面结构-记得写行内样式才能控制图片大小问题

              <div class="QRbutton">
                <el-button type="primary" size="mini" @click="getqrcopy"
                  >复制二维码</el-button>
              </div>
              <div class="QRdetail" ref="QRdom">
                <div class="QRcopy">
                  <img
                    src="需要复制图片地址-http形式"
                    alt="二维码复制"
                    width="180"
                    height="180"
                    style="border: 1px solid #ccc"
                  />
                  <p style="margin: 0px">测试设备-二维码</p>
                </div>
              </div>

2.页面样式

.QRbutton {
      display: flex;
      align-content: center;
      margin: 0 0 10px 0;
      .el-button {
        margin-right: 20px;
      }
    }
    .QRdetail {
      .QRcopy {
        width: 200px;
        height: 220px;
        // border: 1px solid #ccc;
        padding: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 180px;
          height: 180px;
        }
      }
    }

3.页面方法-通过ref找到dom元素

// 二维码复制
    getqrcopy() {
      this.$nextTick(function () {
        //nextTick,当前dom渲染完毕的回调
        //打印获取的dom
        console.log('QRdom', this.$refs.QRdom) 
        const selection = window.getSelection()
        const range = document.createRange()
        //传入dom
        range.selectNode(this.$refs.QRdom) 
        selection.addRange(range)
        //copy是复制-中间可能会出现一条杠不用管不影响使用
        document.execCommand('copy') 
        // 清除缓存
        selection.removeAllRanges()
        // 提示用户复制成功
      })
    }

---

总结：

经过这一趟流程下来相信你也对 vue 实现一键复制功能（复制图片和文字）有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕