vue - - - - - vue-qr插件生成二维码

最新推荐文章于 2025-10-25 10:32:46 发布

原创最新推荐文章于 2025-10-25 10:32:46 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 同时被 2 个专栏收录

61 篇文章

订阅专栏

npm插件

5 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用vue-qr插件生成带有Logo和内容的二维码，包括安装步骤和组件配置示例。

vue-qr插件生成二维码

1. 安装插件
2. 组件使用
- - 示例图：
  - 扫码结果

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>