【工具】Vue中生成二维码组件——vue-qr(vue sse)

【工具】Vue中生成二维码组件——vue-qr 【工具】Vue中生成二维码组件——vue-qr

推荐整理分享【工具】Vue中生成二维码组件——vue-qr(vue sse)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue-intro,vuejs.,vue snippets,vue sse,vue-introjs,vue生成,vue生成器,vue-introjs,内容如对您有帮助，希望把文章链接给更多的朋友！

npm地址——https://www.npmjs.com/package/vue-qr

注：不支持IE浏览器

效果

1、安包

npm install vue-qr --save

2、引入// vue2.0import VueQr from 'vue-qr'// vue3.0import VueQr from 'vue-qr/src/packages/vue-qr.vue'new Vue({ components: {VueQr}})3、使用<vue-qr :bgSrc='src' :logoSrc="src2" text="Hello world!" :size="200"></vue-qr><vue-qr text="Hello world!" :callback="test" qid="testid"></vue-qr><script>export default { methods:{ test(dataUrl,id){ console.log(url, id) } }}</script>4、相关配置属性属性名含义text编码内容correctLevel容错级别size尺寸, 长宽一致, 包含外边距margin二维码图像的外边距, 默认 20pxcolorDark实点的颜色colorLight空白区的颜色bgSrc欲嵌入的背景图地址gifBgSrc欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能backgroundColor背景色backgroundDimming叠加在背景图上的颜色, 在解码有难度的时有一定帮助logoSrc嵌入至二维码中心的 LOGO 地址logoScale用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin), 默认 0.2logoMarginLOGO 标识周围的空白边框, 默认为0logoBackgroundColorLogo 背景色,需要设置 logo marginlogoCornerRadiusLOGO 标识及其边框的圆角半径, 默认为0whiteMargin若设为 true, 背景图外将绘制白色边框dotScale数据区域点缩小比例,默认为0.35autoColor若为 true, 图像将被二值化处理, 未指定阈值则使用默认值binarizeThreshold(0 < threshold < 255) 二值化处理的阈值callback生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)bindElement指定是否需要自动将生成的二维码绑定到HTML上, 默认是TRUE5、实例

index.vue

<!-- * @Author: user * @Date: 2022-03-22 14:06:12 * @LastEditTime: 2022-03-22 14:06:12 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath:/src/views/downApp.vue--><template> <div class="all"> <div class='top'></div> <div class='center_down_app'> <div class='bg' :style='{backgroundImage:"url(" + bg.src +")"}'></div> <div class='qrcode_sp'> <div class='qrcode_bg'> <!-- <vue-qr :text="downloadData.url" :logoSrc="downloadData.icon + '?cache'" :margin="0" colorDark="#f67b29" colorLight="#fff" :logoScale="0.3" :size="200"></vue-qr> --> <vue-qr :text="downloadData.url" :logoSrc="downloadData.icon" :size="145" :logoScale="0.2" :logoMargin='3' :margin="10" colorDark="#585E67" colorLight="#fff"></vue-qr> </div> <p>用手机扫描二维码安装</p> </div> <div class='download_sp'> <a :href= latestAppData.appUrl > <div class='download_btn' @mousemove="isMask = true" @mouseout="isMask = false"> <img src="@/img/android.svg" class="imgMiddle" /> <div class='btn_w'>下载</div> <div class="mask" v-show="isMask"></div> </div> </a> <p class='versions_sp'>最新版本：{{latestAppData.appVersion}}(build {{latestAppData.upgradeLevel}}) ｜ 大小：{{latestAppData.appSize}}MB | 更新时间：{{latestAppData.updateTime}}</p> </div> </div> </div></template><script type="text/ecmascript-6">import vueQr from 'vue-qr'import {queryLatestApp} from '@/api/request';export default { components: { vueQr }, data () { return { bg: { src: require('@/img/logo_download.png') }, downloadData: { url: '', icon: require('@/img/qr_logo.svg') }, latestAppData: {}, isMask:false } }, created () { queryLatestApp({appType: '安卓'}).then(res => { this.latestAppData = res; this.latestAppData.updateTime = res.updateTime.split(' ')[0]; this.downloadData.url = res.appUrl; }) }}</script><style lang="scss" scope>.all{ width: 100%; height: 100%; background: #131623; overflow: hidden; .top{ width: 100%; height: 46px; background: linear-gradient(90deg, #75C6FE, #B256F9); } .center_down_app{ width: 1366px; height: 646px; margin-left: calc(50% - 683px); position: relative; margin-top: 70px; .bg{ width: 610px; height: 670px; margin-left: calc(50% - 305px); background-size: contain; } .qrcode_sp{ width: 188px; height: 220px; position: absolute; top: 136px; left: 28%; .qrcode_bg{ width: 188px; height: 188px; padding: 20px; background: #141723; border-radius: 30px; border:solid 1px rgba(101, 103, 107, 0.22); box-shadow: 0px 12px 68px 19px rgba(0, 0, 0, 0.59); } p{ width: 188px; height: 16px; font-size: 16px; line-height: 32px; font-weight: 400; color: #848390; text-align: center; } } .download_sp{ width: 461px; height: 110px; position: absolute; right: 22%; bottom: 0px; .download_btn{ width: 434px; height: 62px; line-height: 58px; background: #4E55AF; border-radius: 30px; position: relative; .mask{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 30px; background-color: rgba(0, 0, 0, 0.2); } .imgMiddle{ width: 36px; height: 36px; display: block; float: left; margin: 13px 0px 0px 166px; } .btn_w{ margin-left: 10px; margin-top: 2px; font-size: 20px; letter-spacing: 10px; font-family: Microsoft YaHei; font-weight: bold; color: #FFFFFF; float: left; } } .versions_sp{ height: 14px; font-size: 14px; font-family: PingFang SC; font-weight: 400; color: #C6CAD5; line-height: 24px; margin-top: 34px; } } } @media only screen and (max-height: 770px){ .center_down_app{ margin-top: 40px !important; } .bg{ margin-left: calc(50% - 244px) !important; width: 427px !important; height: 469px !important; } .qrcode_sp{ top: 80px !important; } .download_sp{ bottom: 170px !important; } }}</style>