安装 qrcodejs2 插件

npm install qrcodejs2 --save

使用

html

<div id="qrcode" ref="qrcode"></div>

JS

createQRcode(id, text) {
  let long = document.documentElement.clientWidth * (136 / 375)
  new QRCode('qrcode', {
    width: long,
    height: long,
    text: text,
  });
},

公式

比如：你默认设置二维码图片宽高为 136×136，页面宽高为 375×812
width = document.documentElement.clientWidth * (136 / 375);
height = width;

# vue.js # javascript # 前端
Logo
乐奇 Rokid 开放社区

更多推荐

cover

极刻觅镜 | AI眼镜退货率30%至70%：这个数字统计的是线上渠道，线下验光试戴后成交的订单退货率明显更低

avatar 乐奇 Rokid 开放社区

6.9 元还是 13.5 元？在 Rokid 眼镜上用 AIUI 算清单位价

500 毫升，6.9 元。1.25 升，13.5 元。把两项都换成一升，价格分别是 13.80 元和 10.80 元。总价更高的那瓶，单位价格反而更低。不过，这个结论有一个前提：规格和价格都得读对。假如第二瓶实际只有 750 毫升，13.5 元这个总价没有变，比较结果就会转向另一边。我用这两组数字做了一个 AIUI 小项目，叫“比一比”。它接收两项报价，把每份规格、包装件数和整组总价放到两张卡片上

avatar 乐奇 Rokid 开放社区

出门要办三件事：用 AIUI 给 Rokid 眼镜做一个“顺手办”

取快递、买牛奶、送洗衣服，都是几分钟的小事，凑在一次出门里，就需要记住先后顺序。到了快递柜旁边，可能临时想先去超市；一件事办完后，又要知道下一件是什么。这样的安排适合做成一张随进度变化的行动卡片。想到把这些小事放到眼镜里，我先问了一个很具体的问题：抬眼看过来，能不能立刻找到“现在办什么”。因此页面围绕当前事项和下一件事来排布，复杂操作放到后面的管理页。这次我用 AIUI 做了“顺手办”：接收一组要

avatar 乐奇 Rokid 开放社区