- 下載arale-qrcode依賴：
npm i arale-qrcode --save
- 引用依賴：
import AraleQRCode from "arale-qrcode";
- 代碼部分：
<template>
<div class="container">
// 生成二維碼按鈕
<van-button @click="getErweima">點(diǎn)擊生成二維碼</van-button>
// 生成二維碼彈窗
<van-overlay :show="show">
<div class="wrapper">
<img :src="img" />
</div>
</van-overlay>
</div>
</template>
<script>
import AraleQRCode from "arale-qrcode"; //引入依賴
export default {
name: "index",
data() {
return {
show: false,
img: "",
};
},
mounted() {
},
methods: {
makeCode() {
const result = new AraleQRCode({
render: "svg",
text: "http://www.baidu.com",
size: 120,
});
// 將svg xml文檔轉(zhuǎn)換成字符串
const svgXml = new XMLSerializer().serializeToString(result);
// 將svg字符串轉(zhuǎn)成base64格式，通過 window.btoa方法創(chuàng)建一個(gè) base-64 編碼的字符串，進(jìn)行二次編碼解碼(encodeURIComponent 字符串進(jìn)行編碼和解碼，unescape 進(jìn)行解碼)。
const src = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(svgXml)));
localStorage.setItem("image", src);
this.getImg();
},
// 獲取存儲(chǔ)的圖片給到頁面
getImg() {
this.img = localStorage.getItem("image");
localStorage.removeItem("image");
},
getErweima() {
this.show = true
this.makeCode()
},
},
};
</script>
<style lang="scss" scoped></style>
Learning is like the fennel, but without its increase, it has its own advantages.文章來源地址http://www.zghlxwxcb.cn/news/detail-829325.html
文章來源：http://www.zghlxwxcb.cn/news/detail-829325.html
到了這里，關(guān)于前端自動(dòng)生成二維碼并長按識(shí)別跳轉(zhuǎn) Vue的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
