利用qrcode 生成二维码

最新推荐文章于 2025-04-23 10:12:37 发布

smouns_

最新推荐文章于 2025-04-23 10:12:37 发布

阅读量1.8k

点赞数 1

分类专栏： element-ui vue 文章标签：前端前端框架

本文链接：https://blog.youkuaiyun.com/smouns_/article/details/121523882

版权

vue 同时被 2 个专栏收录

26 篇文章

订阅专栏

element-ui

10 篇文章

订阅专栏

本文介绍了如何使用qrcode库将文本转换为二维码，并通过Vue组件展示在canvas上，提供实例代码和配置参数详解。

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

将文本生成二维码

使用：

安装 yarn add qrcode
导入 import Qrcode from 'qrcode'
定义一个canvas标签放二维码
- ```
<canvas ref="canvas" />  
```

生成

Qrcode.toCanvas(canvasElement, [options],[cb(error)])

canvasElement：画布标签(需要放置二维码的canvas标签)
text: 需要编码的数据(文本内容)
cd（error）：回调
options：配置项===>

{
   text：要生成二维码的地址
   width；二维码的宽度
   height：二维码的高度
   colorDark：二维码的背景色
   colorLight：二维码的前景色
   以上配置只是一部分配置，
}

代码如下:

封装弹框组件:

<template>
  <el-dialog title="二维码" :visible.sync="dialogVisible" width="50%">
    <div>
      <canvas ref="Canves" />
    </div>
  </el-dialog>
</template>

<script>
import xxx from 'qrcode'
export default {
  name: '',
  data() {
    return {
      dialogVisible: false
    }
  },
  computed: {},
  created() {},
  methods: {
    text(img) {
      // dialog 内容首次渲染时 dom可能还获取不到就执行了代码,所以使用异步获取
      this.$nextTick(() => {
        xxx.toCanvas(this.$refs.Canves, img, { width: 200, height: 200 })
      })
    }
  }
}
</script>

组件中使用:

<template>
  <div>
      <button @click="changeFn">点击生成二维码</button>
      <!-- 弹框部分 -->
      <Canvas ref="can" />
  </div>
</template>
<script>
//导入组件
import Canvas from './text.vue'
export default {
  name: '',
  components: { Canvas },
  data() {
    return {
      imageUrl:
        'http://qwer-1308460156.cos.ap-chengdu.myqcloud.com/1637655345618'
    }
  },
  methods: {
    changeFn() {
      //显示弹框
      this.$refs.can.dialogVisible = true
      this.$refs.can.text(this.imageUrl)
    }
  }
}
</script>