vue生成二维码QR Code的简单实现方法示例
更新时间:2022年04月28日 15:42:40 作者:~疆
这篇文章主要为大家介绍了vue生成二维码QR Code的实现示例详情,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
qrcodejs2
下载qrcodejs2
cnpm i -S qrcodejs2
使用
<template> <span ref="qrCodeUrl"></span> </template> <script> import QRCode from "qrcodejs2"; export default { data() { return {}; }, mounted() { this.creatQrCode(); }, methods: { creatQrCode() { let a = new QRCode(this.$refs.qrCodeUrl, { text: "hello 大家好", // 需要转换为二维码的内容 width: 100, height: 100, colorDark: "black", //#000000为黑色 colorLight: "white", }); console.log("二维码:", a); }, }, }; </script>
vue-qr
可在二维码中心添加图片
下载:
cnpm i -S vue-qr
使用:
实现效果
代码示例
<template> <vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/qq_40323256/" :size="150" :margin="0" colorDark="black" colorLight="white" ></vue-qr> </template> <script> import vueQr from "vue-qr"; export default { components: { vueQr, }, data() { return { imageUrl: require("@/assets/logo.png"), //欲嵌入至二维码中心的 LOGO 地址 }; }, }; </script>
以上就是vue生成二维码QR Code的实现示例详情的详细内容,更多关于vue生成二维码QR Code的资料请关注脚本之家其它相关文章!
相关文章
Vue全局注册中的kebab-case和PascalCase用法
这篇文章主要介绍了Vue全局注册中的kebab-case和PascalCase用法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-03-03Vue ElementUI实现:限制输入框只能输入正整数的问题
这篇文章主要介绍了Vue ElementUI实现:限制输入框只能输入正整数的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07vue element upload组件 file-list的动态绑定实现
这篇文章主要介绍了vue element upload组件 file-list的动态绑定实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-10-10vue element实现将表格单行数据导出为excel格式流程详解
这篇文章主要介绍了vue element实现将表格单行数据导出为excel格式流程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧2022-12-12
最新评论