vue使用qrcode生成二维码,可以自定义大小转换rem

直接上代码

界面:
 <div style="width: 3.33rem;height: 3.3rem;">
   <div id="qrcode" ref="qrcode" style="width:3.33rem!important;height:3.3rem!important"></div>
 </div>

方法:
let qrcode = new QRCode('qrcode', {
          width: 125,  // 二维码宽度
          height: 125, // 二维码高度
          text: “二维码内容信息”,
          colorDark : '#ffffff',//前景色
          colorLight : '#E03B3B',//背景色
          correctLevel : QRCode.CorrectLevel.H //容错级别,
        })


css:
 /*#qrcode>>>canvas必须有,控制生成二维码大小*/
 #qrcode>>>canvas{
    width: 100% !important;
    height: 100% !important;
  }
  #qrcode>>>img{
    width: 100% !important;
    height: 100% !important;
  }
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue生成二维码可以使用两种方式,一种是使用qrcode库,另一种是使用vue-qr(有icon)。关于qrcode库的使用,可以通过npm安装qrcodejs2库,并在需要生成二维码的页面中导入QRCode,然后在模板中创建一个具有相应ref属性的div元素,将二维码渲染到这个div中。具体代码如下: ```javascript // 安装qrcodejs2 npm install --save qrcodejs2 // 页面中导入QRCode import QRCode from 'qrcodejs2' // 模板中创建div元素 <div class="qrcode" ref="qrCodeUrl"></div> // 在方法中创建二维码 methods: { creatQrCode() { var qrcode = new QRCode(this.$refs.qrCodeUrl, { text: 'https://blog.csdn.net/weixin_42601136', width: 100, height: 100, colorDark: '#000000', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.H }) } }, // 在mounted钩子中调用creatQrCode方法 mounted() { this.creatQrCode(); } ``` 如果想使用vue-qr生成带有icon的二维码,可以在vue文件中导入qrcode库,并按照相应的文档使用vue-qr组件。具体代码如下: ```javascript // 在script标签中导入qrcode import QRCode from "qrcode"; // 使用vue-qr组件 <template> <div> <vue-qr :value="qrCodeUrl" :icon="iconUrl"></vue-qr> </div> </template> // 在data中定义二维码和icon的地址 data() { return { qrCodeUrl: 'https://blog.csdn.net/weixin_42601136', iconUrl: 'icon.png' } } ``` 以上就是在Vue使用qrcode生成二维码的方法。如果想了解更多细节,可以参考相关文档和示例。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [利用VUE生成二维码(两种方式)](https://blog.csdn.net/weixin_42601136/article/details/114839489)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [在Vue使用QRCode生成二维码](https://blog.csdn.net/simper_boy/article/details/95214062)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值