qrcodejs2插件实现生成带有图标的二维码

1,050 阅读1分钟

image.png

1.安装QRCode

npm install qrcodejs2 --save

2.在页面中引入

import QRCode from 'qrcodejs2'

3.使用

<el-popover
  placement="bottom"
  trigger="hover">
  <div id="qrcode" ref="qrcode" v-if="!isNoImg">
      <!-- 通过position: absolute;给中间放置图片,如果不需要icon可不加,加上之后对扫码没有影响 -->
    <div class="qrcode-icon"></div>
  </div>
  <div v-else>暂无二维码</div>
  <a slot="reference">扫一扫</a>
</el-popover>
getAppInfo () {
  this.$nextTick (function () {
    this.qrcode('https://xxx/xxx/xxx/xxx/xxx')
  })
},
qrcode (value) {
  const qrcode = new QRCode('qrcode', {
      width: 200,  // 设置宽度 
      height: 200, // 设置高度
      text: value,
  })
  return qrcode
},