yiyun-qrcode v0.0.3

亦云二维码组件

doc

example

git

npm install yiyun-qrcode

import YiYunQrCode from 'yiyun-qrcode'
// import 'yiyun-qrcode/style.css' /** 使用TemplateEditor组件需要引入的css文件 **/

Vue.use(YiYunQrCode)

// 单独使用某个组件如QrCodeBinder
import { QrCodeBinder } from 'yiyun-qrcode'

Vue.use(QrCodeBinder)

QrCodeContainer

展示一个使用了模版的二维码

宽高直接在组件上设置样式即可,必须与模版默认宽高同比例,不然可能出现显示异常

例

const qrInfo = {
  "id": "4XyE7bjFLUq", // 二维码ID
  "model": {
    "config": {
      "id": "color5",
      "svg": "<svg...", // 模版字符串
      "defaultColor": "#254569", // 模版默认背景色值
      "defaultWidth": 120, // 模版默认宽
      "defaultHeight": 80, // 模版默认高
      "hasLogo": true, // 模版是否有logo
      "hasTitle": true, // 模版是否有标题
      "hasSubTitle": true, // 模版是否有副标题
      "tagCount": 4, // 模版字段数量
      "type": 2, // 0 黑白模版    1 彩色模版    2 自定义模版
    },
    "width": 120,
    "height": 80,
    "backgroudColor": "#254569",
    "logo": "https://pinia.vuejs.org/logo.svg",
    "title": "🥸🥸🥸🥸",
    "subTitle": "",
    "tagFields": [
      "🥸🥶🫠🥲🥸🥶🫠🥲🥸🥶",
      "🥱🥱🥱🥱",
      "🥱",
      "卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡卡",
    ],
  },
}

<QrCodeContainer
  :qrInfo="qrInfo"
  style="{ 'width': `${qrInfo.model.width}mm`, 'height': `${qrInfo.model.height}mm` }"
/>

参数

QrCodeTemplate

展示模版缩略图

例

const tplInfo = {
  "id": "4XxixG511AP",
  "name": "标签981011",
  "svg": "<svg...",
  "svgDemo": "https://dl-edisk.effio.cn/ptest/1522378481458163712.svg",
  "defaultColor": "#FFFFFF",
  "defaultWidth": 150,
  "defaultHeight": 100,
  "hasLogo": true,
  "hasTitle": true,
  "hasSubTitle": true,
  "tagCount": 4,
  "type": 2,
}

<QrCodeTemplate :tplInfo="tplInfo" style="height:250px;" />

参数

QrCodeBinder

根据给的模版信息与模版数据实时展示带有模版的二维码

宽高直接在组件上设置样式即可,必须与模版默认宽高同比例,不然可能出现显示异常

例

const tplInfo = {
  "id": "4XxixG511AP",
  "svg": "<svg...",
  "defaultColor": "#FFFFFF",
  "defaultWidth": 150,
  "defaultHeight": 100,
  "hasLogo": true,
  "hasTitle": true,
  "hasSubTitle": true,
  "tagCount": 4,
	"type": 2,
}

const tplData = {
  "id": "4XvmuiUeC2b", // 二维码ID
  "width": 150, // 模版宽(自定义模版无效)
  "height": 100, // 模版高(自定义模版无效)
  "backgroudColor": "#FFFFFF", // 模版背景色
  "logo": "https://pinia.vuejs.org/logo.svg",
  "title": "KKAOKAO",
  "subTitle": "北包包包包包包包包包包包包包包包包包包包包包包包包",
  "tagFields": [ // 字段集合
    "🥶🫠🥲🥸🥶🫠🥲🥲",
    "🫠🥲🥸🥶🫠🥲🥸🥶",
    "🫠🥲🥸🥶🫠🥲🥸🥶",
    "🥲🥸🥶🫠🥲🥸🥶🫠",
  ],
}

<QrCodeBinder
	:style="{ 'width': `${tplData.width}mm`, 'height': `${tplData.height}mm` }"
	:tplInfo="tplInfo" :tplData="tplData" ref="QrCodeBinder"
	focusColor="rgba(251, 113, 133, 1)"
/>

参数

方法

QrCodeTemplateEditor

创建新的自定义模版或者编辑已有自定义模版,组件推荐最小尺寸(宽:1090px, 高:810px)

例

const preTplInfo = {
	id: '',
  name: '',
  defaultColor: '#FFFFFF',
  defaultWidth: 150,
  defaultHeight: 100,
}
const preControls = [{"type":"rect","tag":"rect": "..."}]
const templateName = '标签123'

<QrCodeTemplateEditor
	ref="templateEditor" style="width:100%;height:100%;"
  :fonts="[{ name: 'Fira Code', value: 'Fira Code' }, { name: 'JetBrains Mono', value: 'JetBrains Mono' }]"
  :colors="['#eea2a4', '#ee3f4d', '#12aa9c', '#57c3c2', '#ef6f48', '#9b1e64']"
  :preControls="preControls" :preTplInfo="preTplInfo" primaryColor="#fb7185"
	:fieldMaxCount="5" :rectMaxCount="5" :showHotKeyBoard="true" :hotKey="true"
/>

参数

方法

interface IQrCodeTemplate {
  id?: String, // 二维码ID,如未传则返回的数据不含有这项
  name: String,
  svg: String, // 模版字符串
  width: Number,
  height: Number,
  defaultColor: String,
  hasLogo: Boolean,
  hasTitle: Boolean,
  hasSubTitle: Boolean,
  tagCount: Number,
  controls: JSON.stringify([]Control), // 二维码控件信息
}

事件