先安装生成二维码的工具包

yarn  add   qrcode   -S     或者      npm install qrcode -S

我们先了解一下,一般做功能的时候,

是点击生成二维码,先让他弹框我这里用的是 Element组件

我们先,生成个弹窗里面放个布画标签<canvas>准备放生成的二维码

<!-- 分享展示, 预览的二维码的弹层  -->
<el-dialog title="二维码" :visible="showCodeDialog" @close="showCodeDialog = false">
  <!-- 二维码 -->
    <!--放个容器控制一下居中-->
  <el-row type="flex" justify="center">
    <canvas ref="myCanvas" />
  </el-row>
</el-dialog>

下面是js代码--------点击按钮我就没做,大家自己做触发一下看看效果

url是个网址,可以写成死的,测试效果.

// 引入下载的工具包
import QrCode from 'qrcode'

 btn(url) {
    // 判断url有没有值
  if (!url) return
  // 这句代码会进行视图更新,但是视图更新操作会被包装到一个task里面(promise微任务 -> 宏任务)
  this.showCodeDialog = true
  this.$nextTick(() => {
    // 如果这里 url 写的是网址, 就会跳转到对应网址 (二维码分享效果)
    QrCode.toCanvas(this.$refs.myCanvas, url)
  })
}

这样功能就实现了,感谢观看!!!