将文本生成二维码,打印指定DOM

旧友前度丶

于 2021-11-24 15:15:57 发布

阅读量410

点赞数

文章标签： html 服务器前端

本文链接：https://blog.youkuaiyun.com/wangyangzxc123/article/details/121516342

版权

本文介绍了如何在前端使用Element UI对话框展示二维码，通过`$nextTick`确保在二维码生成后正确显示。方法中，针对传入的数据，如`row`，进行操作并调用Qrcode库生成二维码到指定的canvas元素上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对应代码.

   <!--
      二维码生成
      1.设置弹框
      2.下包
      3.导包.
      4.触发点击事件弹出框
      5.使用$nextTick方法获取生成的二维码.
     -->
    <el-dialog :visible.sync="isShowo" title="二维码">
      <div style="text-align:center">
        <canvas ref="canvas" />
      </div>
    </el-dialog>

  methods: {
    // 二维码生成功能
    imgfn(row) {
      console.log(row)
      if (!row) {
        return
      }
      this.isShowo = true
      this.$nextTick(() => {
        Qrcode.toCanvas(this.$refs.canvas, row, { width: 400, height: 400 })
      })
    }
}

打印指定DOM