Eg：最终实现二维码展示
二维码示例.png
讲解使用：
1. 下载插件
npm install --save qrcode
2. 引入插件
import qrcode from 'qrcode';
3. 方法使用
1、定义存储数据
const dataValue = ref<any[]>([]); // 列表的数据
const qrcodeForm = ref<any[]>([]); // 存储二维码的数据
2、数组中使用生成二维码
dataValue.value.forEach((i) => {
qrcodeFun(i.title) // 方法：入参-----要生成二维码的内容
})
3、展示二维码 toDataURL()
// toDataURL()方法用于将生成的二维码转换成数据URL。数据URL是一种将文件数据以URL形式嵌入到HTML文档中的方法，可以直接在浏览器中显示图像。
// toDataURL()方法接受一个配置对象作为参数，其中可以包含以下属性：
// text：要编码为二维码的文本内容（必需）。
// width：二维码的宽度（可选，默认值为256）。
// height：二维码的高度（可选，默认值为256）。
// correctLevel：纠错级别，可选值为"L"、“M”、“Q”、“H”，级别越高，纠错能力越强，但二维码尺寸也会变大（可选，默认值为"M"）。
const qrcodeFun = async (title: string | qrcode.QRCodeSegment[]) => {
await qrcode.toDataURL(title, { width: 100, height: 100})
.then((url) => {
// 获取到url后即可在页面使用--二维码图片
// console.log('url', url)
qrcodeForm.value.push(url)
})
.catch((e) => {
// console.log('e', e)
});
}
4、 VUE页面的展示
<div
v-for="(item, index) in dataValue"
:key="index">
<!-- 二维码生成 -->
<img :src="qrcodeForm[index]">
</div>
其他方法可自行使用
内容不全可以看提供链接或自己搜索文章了解：谢谢！！！
原文：Vue3中使用qrcode库实现二维码生成
npm镜像站：qrcode
1、toDataURL() 如上所示:
toDataURL()方法用于将生成的二维码转换成数据URL。数据URL是一种将文件数据以URL形式嵌入到HTML文档中的方法，可以直接在浏览器中显示图像。
toDataURL()方法接受一个配置对象作为参数，其中可以包含以下属性：
(1) text：要编码为二维码的文本内容（必需）。
(2) width：二维码的宽度（可选，默认值为256）。
(3) height：二维码的高度（可选，默认值为256）。
(4) correctLevel：纠错级别，可选值为"L"、“M”、“Q”、“H”，级别越高，纠错能力越强，但二维码尺寸也会变大（可选，默认值为"M"）。
2、toCanvas()：
toCanvas()方法是用来生成二维码并渲染到一个canvas元素上的。
toCanvas()方法有以下参数：
(1) canvas：一个HTMLCanvasElement对象，表示要渲染二维码的canvas元素。
(2) content：一个字符串，表示要生成二维码的内容。
(3) options：一个可选的对象，表示生成二维码的配置选项。
3、create()：
create()方法是用于生成二维码图像的方法。它接受一个参数对象，用于配置生成的二维码的各个属性。
下面是create()方法的参数及其示例：
参数对象的属性：
(1) text: 要编码为二维码图像的文本内容。例如：text: ‘https://www.example.com’
(2) options: 用于配置二维码的属性对象。其中包含以下属性：
1) width: 二维码图像的宽度（像素）。例如：width: 200
2) height: 二维码图像的高度（像素）。例如：height: 200
3) colorDark: 二维码的暗色（前景色）的颜色值（CSS颜色）。例如：colorDark: ‘#000000’
4) colorLight: 二维码的亮色（背景色）的颜色值（CSS颜色）。例如：colorLight: ‘#ffffff’
5) correctLevel: 二维码的纠错级别。可选值为 ‘L’ (低), ‘M’ (中), ‘Q’ (高), ‘H’ (最高)。例如：correctLevel: ‘H’
4、QRCodeRenderersOptions()方法
在Vue3中，qrcode库是用于生成二维码的库。QRCodeRenderersOptions()是该库中的一个方法，用于配置二维码的渲染选项。
该方法的参数可以是一个对象，包含以下属性：
width：二维码的宽度，可以是一个整数值，默认为256。
height：二维码的高度，可以是一个整数值，默认为256。
margin：二维码与周围边框的间距，可以是一个整数值，默认为4。
color：二维码的颜色，可以是一个CSS颜色值，默认为黑色。
background：二维码的背景颜色，可以是一个CSS颜色值，默认为白色。
scale：二维码的放大倍数，可以是一个整数值，默认为4。
type：二维码的编码类型，可以是一个字符串值，默认为'image/png'。
网友评论