Vue二维码组件-JZTXT

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的图片组件进行预览
源码