文章目录
-
- 概要
- 安装插件
- 代码实例
概要
要将图片地址生成二维码，你可以使用 QrCode 库（假设你已经在项目中引入了该库）。以下是一个简单的示例代码，演示了如何使用 QrCode 库将图片地址转换为二维码并显示在页面上
安装插件
先下载生二维码的插件 通过 $ npm i qrcode 命令
代码实列
写一个弹出层
dom为一个canvas的dom对象， info为转化二维码的信息
我们尝试将canvas标签放到dialog的弹层中
<template><el-dialog title="二维码" :visible.sync="showCodeDialog" @opened="showQrCode" @close="imgUrl=''"><el-row type="flex" justify="center"><canvas ref="myCanvas" /></el-row></el-dialog>
</template><script>
import QrCode from 'qrcode';export default {data() {return {showCodeDialog: false,imgUrl: '', // 图片地址};},methods: {showQrCode(url) {// url存在的情况下才弹出层if (url) {this.showCodeDialog = true;// 确保页面已经渲染完毕this.$nextTick(() => {// 将地址转化成二维码QrCode.toCanvas(this.$refs.myCanvas, url, (error) => {if (error) {console.error(error);}});});} else {this.$message.warning('图片地址为空');}},},
};
</script>
