Skip to content
一种使用Vue指令去解析二维码的插件。
JavaScript
Branch: master
Clone or download
pqs
Latest commit 73bfe10 Dec 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src/lib 目录结构调整 Nov 22, 2019
.gitignore 创建项目 Nov 22, 2019
README.md 更新 中英文对照 Dec 20, 2019
index.js 版本更新 1.0.1 Nov 22, 2019
package.json

README.md

Vue-QRCode-Directive

Version License Downloads

一种使用Vue指令去解析二维码的插件。( A plug-in that uses the Vue instruction to parse qr codes. )

使用 ( Use )

安装 ( Install )

npm install vue-qrcode-directive --save
or
yarn add vue-qrcode-directive

在main.js中注册 ( Register in main.js )

import qrcode from 'vue-qrcode-directive'
Vue.use(qrcode)

在元素上使用v-qr指令 ( Use the v-qr instruction on the label )

<template>	
  <div v-qr="options" v-if="options" />
</template>
<script>
export default {
  data() {
    return {
      options: 'www.baidu.com'
    }
  }
}
</script>

options参数配置 ( Parameter configuration )

1.简易配置 ( 1.Easy configuration )

options: '我是二维码的内容'

即直接提供二维码的数据即可

2.以对象的形式提供 ( 2.Available as an object )

options: {
  text: `我是二维码的内容(I'm the content of the QR code.)'`,
  render: "canvas",
  width: 256,
  height: 256,
  typeNumber: -1,
  correctLevel: 2,
  background: "#ffffff",
  foreground: "#000000"
}
参数(params) 含义(meaning) 默认值(default)
text 二维码中的内容 NA
render 渲染的方式,canvas或者table canvas
width 二维码的宽度 256
height 二维码的高度 256
correctLevel 校正级 2
typeNumber 类型码 -1
background 背景色 #ffffff
foreground 前景色 #000000

qrcode核心解析器来源 ( Core Parser Source )

来自jeromeetienne的jquery-qrcode中的qrcode.js ( Qrcode.js from Jquery-qrcode from Jeromeetienne )

==> 点击前往(Go to) jquery-qrcode

因此options的配置保持跟jquery-qrcode中的一样,可以自行前往查看。( So options are configured to stay the same as in jquery-qrcode, and you can go to check it yourself. )

You can’t perform that action at this time.