前端vue项目生成带logo的二维码

最新推荐文章于 2024-04-19 23:06:30 发布

敲代码的TKP

最新推荐文章于 2024-04-19 23:06:30 发布

阅读量1k

点赞数

分类专栏： javaScript vue 文章标签： vue.js 前端 javascript

TKP

本文链接：https://blog.csdn.net/TKP666/article/details/126927431

版权

javaScript 同时被 2 个专栏收录

48 篇文章 4 订阅

订阅专栏

vue

47 篇文章 2 订阅

订阅专栏

Vue 生成带 logo 的二维码

安装 vue_qrcodes

npm install --save vue_qrcodes

使用 vue_qrcodes

import qrcodes from "vue_qrcodes"
export default {
  components: { qrcodes },
  data() {
    return {
      codeLogo: require("../img/logo.png"),
      qrCodeText: '123456',
      codeSize: '',
      logoSize: '',
    }
  },
  created () {
    this.codeSize = document.documentElement.clientWidth * (200 / 375)
    this.logoSize = document.documentElement.clientWidth * (32 / 375)
  },
}

页面标签

<qrcodes 
  :url="qrCodeText" 
  :iconurl="codeLogo" 
  :wid="codeSize" 
  :hei="codeSize" 
  :imgwid="logoSize" 
  :imghei="logoSize" 
/>

Property	Description	Type	Default
url	image of Qrcode 二维码中间小图片地址	String	[www.baidu.com](https://www.baidu.com)
iconurl	Values of Qrcode 二维码输入的内容	String	[https://cn.vuejs.org/images/logo.png](https://cn.vuejs.org/images/logo.png)
wid	Qrcode width 二维码宽度	Number	70
hei	Qrcode height 二维码高度	Number	70
colorDark	Qrcode color 二维码颜色	String	70
url	Values of Qrcode 二维码输入的内容	String	#000000
colorLight	Qrcode background 二维码背景色	String	#ffffff
imgwid	Qrcode image width 二维码中间小图片宽度	Number	30
imghei	Qrcode image heigth 二维码中间小图片高度	Number	30