1.前言
- 该组件依赖qrcode.js与element-ui
- 支持二维码大小配置，点击大图预览
- 该组件以vue文件形式进行封装，需要配置httpVueLoader插件进行引入，其他格式请自行更改源码
2.使用方法
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
- 引入组件(这里使用httpVueLoader进行引入)
<script>
new Vue({
el:"#app",
data: {
qrcode: "你好"
},
components:{
'ep-qrcode': httpVueLoader('./ep-qrcode.vue'),//二维码组件
},
})
</script>
<body>
<div id="app" v-cloak>
<ep-qrcode :text="qrcode"></ep-qrcode>
</div>
</body>
3.配置项列表
| 参数 |
默认值 |
必填 |
说明 |
| text |
请传入二维码的值 |
是 |
支持数字和字符串 |
| size |
20 |
否 |
二维码的大小 |
| preview |
false |
否 |
是否支持点击大图预览 |
| preview_size |
256 |
否 |
大图预览时二维码的大小 |
4.qrcode.js基本使用
this.instance = new QRCode(DOM, {
text: '二维码内容',
width: 200,
height: 200,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
})
//清空原二维码
this.instance.clear()
//渲染新二维码
this.instance.makeCode(newVal)
5.大图预览的技巧
- 通常情况下的大图预览，都是点击element-ui的el-image组件自动完成的，但是有些情形下图片没有通过el-image进行渲染，就无法按element-ui的方式进行预览
- 可以渲染一个el-image，传入要预览的图片URL，再设为隐藏状态，当要预览目标图片时，更新el-image组件的src地址，并且调用特定方法，模拟点击事件
<!-- 图片预览 -->
<div style="display: none;">
<el-image
ref="preview_image"
style="width: 100px; height: 100px"
:src="preview_image"
:preview-src-list="[preview_image]">
</el-image>
</div>
//更新要预览的图片地址
this.preview_image = "要预览的图片地址"
//触发预览
this.$refs.preview_image.clickHandler()
6.源码及思路
- 通过组件形式接收参数，调用qrcode.js进行二维码渲染
- 大图预览：先调用qrcode.js进行大图渲染获取base64地址，再调用element-ui的图片组件进行预览
- 源码
<template>
<div class="ep-qrcode-wrap">
<!-- 小图 -->
<div ref="qrcode" :class="{'can-preview': preview}" @click="onClick" class="qrcode-box">
</div>
<!-- 预览图 -->
<div ref="qrcode_preview" style="display: none;">
</div>
<!-- 图片预览 -->
<div style="display: none;">
<el-image
ref="preview_image"
style="width: 100px; height: 100px"
:src="preview_image"
:preview-src-list="[preview_image]">
</el-image>
</div>
</div>
</template>
<script>
module.exports = {
data(){
return {
instance: null,//实例
instance2: null,//实例
preview_image: "",//预览图地址
}
},
mounted(){
//渲染二维码（默认图）
this.instance = new QRCode(this.$refs.qrcode, {
text: this.text + '',
width: this.size,
height: this.size,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
})
//渲染二维码（预览图）
if(this.preview){
this.instance2 = new QRCode(this.$refs.qrcode_preview, {
text: this.text + '',
width: this.preview_size,
height: this.preview_size,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
})
}
},
watch:{
//监听watch
text(newVal,oldVal){
//清空原二维码
this.instance.clear()
//渲染新二维码
this.instance.makeCode(newVal)
//更新大图
if(this.preview){
//清空原二维码
this.instance2.clear()
//渲染新二维码
this.instance2.makeCode(newVal)
}
}
},
props:{
//二维码的值
text:{
type: [String,Number],
default: "请传入二维码的值"
},
//默认的二维码大小
size: {
type: Number,
default: 20
},
//是否支持点击大图预览
preview: {
type:Boolean,
default: false
},
//点击大图预览的二维码大小
preview_size: {
type: Number,
default: 256
},
},
methods:{
onClick(){
//未开启预览，直接返回
if(!this.preview) return
//获取图片地址
this.preview_image = this.instance2._el.children[1].src
//触发预览
this.$refs.preview_image.clickHandler()
}
}
}
</script>
<style scoped>
.ep-qrcode-wrap .qrcode-box > img{
display: inline-block !important;
}
.ep-qrcode-wrap .can-preview{
cursor: pointer;
}
</style>
