Eg：最終實現(xiàn)二維碼展示
二維碼示例.png
講解使用：
1. 下載插件
npm install --save qrcode
2. 引入插件
import qrcode from 'qrcode';
3. 方法使用
1、定義存儲數(shù)據(jù)
const dataValue = ref<any[]>([]); // 列表的數(shù)據(jù)
const qrcodeForm = ref<any[]>([]); // 存儲二維碼的數(shù)據(jù)
2五鲫、數(shù)組中使用生成二維碼
dataValue.value.forEach((i) => {
qrcodeFun(i.title) // 方法：入?yún)?----要生成二維碼的內(nèi)容
})
3、展示二維碼 toDataURL()
// toDataURL()方法用于將生成的二維碼轉(zhuǎn)換成數(shù)據(jù)URL岔擂。數(shù)據(jù)URL是一種將文件數(shù)據(jù)以URL形式嵌入到HTML文檔中的方法位喂，可以直接在瀏覽器中顯示圖像浪耘。
// toDataURL()方法接受一個配置對象作為參數(shù)，其中可以包含以下屬性：
// text：要編碼為二維碼的文本內(nèi)容（必需）塑崖。
// 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>
其他方法可自行使用
內(nèi)容不全可以看提供鏈接或自己搜索文章了解：謝謝Ｓ忌浴０苫啤！
原文：Vue3中使用qrcode庫實現(xiàn)二維碼生成
npm鏡像站：qrcode
1唆姐、toDataURL() 如上所示:
toDataURL()方法用于將生成的二維碼轉(zhuǎn)換成數(shù)據(jù)URL拗慨。數(shù)據(jù)URL是一種將文件數(shù)據(jù)以URL形式嵌入到HTML文檔中的方法，可以直接在瀏覽器中顯示圖像奉芦。
toDataURL()方法接受一個配置對象作為參數(shù)赵抢，其中可以包含以下屬性：
(1) text：要編碼為二維碼的文本內(nèi)容（必需）。
(2) width：二維碼的寬度（可選声功，默認值為256）烦却。
(3) height：二維碼的高度（可選，默認值為256）先巴。
(4) correctLevel：糾錯級別其爵，可選值為"L"、“M”伸蚯、“Q”摩渺、“H”，級別越高剂邮，糾錯能力越強摇幻，但二維碼尺寸也會變大（可選，默認值為"M"）。
2囚企、toCanvas()：
toCanvas()方法是用來生成二維碼并渲染到一個canvas元素上的丈咐。
toCanvas()方法有以下參數(shù)：
(1) canvas：一個HTMLCanvasElement對象，表示要渲染二維碼的canvas元素龙宏。
(2) content：一個字符串棵逊，表示要生成二維碼的內(nèi)容。
(3) options：一個可選的對象银酗，表示生成二維碼的配置選項辆影。
3、create()：
create()方法是用于生成二維碼圖像的方法黍特。它接受一個參數(shù)對象蛙讥，用于配置生成的二維碼的各個屬性。
下面是create()方法的參數(shù)及其示例：
參數(shù)對象的屬性：
(1) text: 要編碼為二維碼圖像的文本內(nèi)容灭衷。例如：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()是該庫中的一個方法猾蒂，用于配置二維碼的渲染選項均唉。
該方法的參數(shù)可以是一個對象，包含以下屬性：
width：二維碼的寬度婚夫，可以是一個整數(shù)值浸卦，默認為256。
height：二維碼的高度案糙，可以是一個整數(shù)值，默認為256靴庆。
margin：二維碼與周圍邊框的間距时捌，可以是一個整數(shù)值，默認為4炉抒。
color：二維碼的顏色奢讨，可以是一個CSS顏色值，默認為黑色焰薄。
background：二維碼的背景顏色拿诸，可以是一個CSS顏色值扒袖，默認為白色。
scale：二維碼的放大倍數(shù)亩码，可以是一個整數(shù)值季率，默認為4。
type：二維碼的編碼類型描沟，可以是一個字符串值飒泻，默認為'image/png'。
