qrcodejs2 二维码生成h5自适应问题

h5开发中 ,因为插件postcss-pxtorem 会将px 转成rem

qrcodejs2生成的二维码没有自适应(不会根据屏幕改变大小),因为里面使用的是行内样式

自己改了插件代码,上传到npm

下载可直接使用

引入页面:
import QRCode from 'qrcodeliaowei'

页面标签:
<div id="qrcode" ref="qrcode"></div>

methods:
 creatQrCode() {
      this.$refs.qrcode.innerHTML = ''; //清除二维码方法一
      let text = 'xxxx';
      var qrcode = new QRCode(this.$refs.qrcode, {
        text: text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H,
      })
      qrcode.clear(); // 清除二维码方法二
}

如果想使用vue vant组件中写h5
只需要在元素#qrcode样式中设置高宽即可
#qrcode{
  width:200px;
  height:200px;
}
二维码会根据元素#qrcode自适应

详情请看qrcodeliaowei - npmhttps://www.npmjs.com/package/qrcodeliaowei

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值