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

简介: vue 生成二维码:vue-qr插件

1. 安装插件

# npm 安装
npm install vue-qr --save
# yarn 安装
yarn add vue-qr

2. 使用

<template>
  <div>
    <vue-qr 
      :correctLevel="3" 
      :autoColor="false" 
      colorDark="#313a90" 
      :bgSrc="bgSrc" 
      :logoSrc="logoSrc" 
      :text="codeUrl" 
      :size="95" 
      :margin="0" 
      :logoMargin="3">
    </vue-qr>
  </div>
</template>
<script>
import VueQr from 'vue-qr'
export default {
  data () {
    return {
      logoSrc: require('../assets/img/qrlogo.png'),
      bgSrc: require('../assets/img/bgSrc.png'),
      codeUrl: 'https://github.com/lx719679895'
    }
  },
  components: {
    VueQr
  }
}
</script>

参数说明:参数说明

相关文章
|
2天前
|
资源调度 JavaScript 前端开发
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
|
2天前
|
JavaScript 前端开发
vue组件化开发流程梳理,拿来即用
vue组件化开发流程梳理,拿来即用
|
2天前
|
JavaScript Go
Vue路由跳转及路由传参
Vue路由跳转及路由传参
|
3天前
|
JavaScript 前端开发 BI
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院
开发环境 技术架构:前后端分离 开发语言:C#.net6.0 开发工具:vs2022,vscode 前端框架:Vue,Ant-Design 后端框架:百小僧开源框架 数 据 库:sqlserver2019
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院
|
6天前
|
JavaScript
【vue】如何跳转路由到指定页面位置
【vue】如何跳转路由到指定页面位置
9 0
|
6天前
|
JSON JavaScript 前端开发
【vue】假数据的选择和使用
【vue】假数据的选择和使用
12 1
|
6天前
|
JavaScript 前端开发
【vue】iview如何把input输入框和点击输入框之后的边框去掉
【vue】iview如何把input输入框和点击输入框之后的边框去掉
12 0
|
5天前
|
监控 JavaScript
Vue中的数据变化监控与响应——深入理解Watchers
Vue中的数据变化监控与响应——深入理解Watchers
|
5天前
|
JavaScript 安全 前端开发
Vue 项目中的权限管理:让页面也学会说“你无权访问!
Vue 项目中的权限管理:让页面也学会说“你无权访问!
15 3