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

原文地址:https://blog.csdn.net/weixin_53579656/article/details/131690574

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

上一篇 2023年07月13日 09:41
微服务系列文章之 Redisson实现分布式锁(3)
下一篇 2023年07月13日 09:42