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";, // 二维码中间的logo
        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&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>

示例图：

扫码结果