1. 安裝插件

【vue-qr 官網地址】

npm install vue-qr --save
// or
yarn add vue-qr --save

2. 組件使用

<template><vue-qr :logo-src="logoSrc":size="237":margin="0":auto-color="true":dot-scale="1":text="appSrc"colorDark="black"colorLight="white"/>
</template><script>
import VueQr from 'vue-qr'
export default {components: {VueQr }  data () {logoSrc: "https://img0.baidu.com/it/u=3361661493,3866593411&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500";, // 二維碼中間的logoappSrc: "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%88%98%E4%BA%A6%E8%8F%B2%20%E6%98%9F%E6%84%BF%E9%85%8D%E5%9B%BE&step_word=&hs=0&pn=49&spn=0&di=46137345&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3605601565%2C2804458256&os=2472503939%2C599717717&simid=3605601565%2C2804458256&adpicid=0&lpn=0&ln=161&fr=&fmq=1700721452187_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=11&oriquery=&objurl=https%3A%2F%2Fww1.sinaimg.cn%2Fmw690%2F693ad074ly1hjyfp6w37kj223o2wenpe.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fojtk5_z%26e3Bv54AzdH3F80mc9md8ndAzdH3FNp8Nijo3z&gsm=1e&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwxLDMsMiw2LDQsNSw3LDgsOQ%3D%3D&lid=10340456181220662631"; // 二維碼內容},}
</script>

示例圖：

掃碼結果