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";,
appSrc: "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©right=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>
示例图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5e114e8e31398385d988675686fa66f7.png)
扫码结果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9884015e7c4afa982f80da0583165631.png)