vue 使用vue-clipboard2包实现一键复制功能（复制图片和文字）

前言

• 一键复制这个功能也是经常使用到的，但一般都是有提供的包直接使用就可以了。

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

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

代码实现

1.下包

npm install --save vue-clipboard2

2.在main.js中引入挂载

// 复制功能
import VueClipboard from 'vue-clipboard2'   
// 挂载
Vue.use(VueClipboard)

3.页面解构

 <div class="QRCOPY">
              <div class="QRbutton">
                <el-button type="primary" size="mini" @click="getqrcopy"
                  >复制二维码</el-button
                >
              </div>
              <div class="QRdetail" ref="QRdom">
                <img
          src="https://img1.baidu.com/it/u=1704676583,784504267&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                  alt="二维码复制"
                />
                <p>测试-复制二维码</p>
              </div>
            </div>

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

// 二维码复制
    getqrcopy() {
      this.$nextTick(function () {
        //nextTick,当前dom渲染完毕的回调
        //打印获取的dom
        console.log('foo', 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 使用vue-clipboard2包实现一键复制功能（复制图片和文字）有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕文章来源地址https://uudwc.com/A/pLk05