标签：Vue 预览 大图 qrcode 二维码 源码 组件
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进行二维码渲染
- 大图预览：先调用qrcode.js进行大图渲染获取base64地址，再调用element-ui的图片组件进行预览
- 源码
标签：Vue,
预览,
大图,
qrcode,
二维码,
源码,
组件
From： https://www.cnblogs.com/OrochiZ-/p/17701857.html