前言
-
一键复制这个功能也是经常使用到的,但一般都是有提供的包直接使用就可以了。
-
原理就是找到这个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://uudwc.com/A/pLk05