app-preset-qrcode.vue

<template>
  <div class="app-preset-qrcode">
    <template v-if="QRCodeConfig.url">
      <vue-qr
        class="app-vue-qr"
        :size="QRCodeConfig.size"
        :text="QRCodeConfig.url"
        :bgSrc="QRCodeConfig.bgSrc"
        :margin="QRCodeConfig.margin"
        :backgroundColor="QRCodeConfig.backgroundColor"
        :logoSrc="QRCodeConfig.logoSrc"
        :logoMargin="QRCodeConfig.logoMargin"
        :logoBackgroundColor="QRCodeConfig.logoBgColor"
        :logoCornerRadius="QRCodeConfig.logoRadius"
        :whiteMargin="QRCodeConfig.whiteMargin"
        :callback="callback"
      >
      </vue-qr>
    </template>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import vueQr from 'vue-qr';

@Component({
  components: { vueQr },
})
export default class AppPresetQrcode extends Vue {
  /**
   * 内容 value数据格式：对象类型的JSON字符串，参数类型与QRCodeConfig一致："{ "url": "http://www.baidu.com" }"
   *
   * @type {string}
   * @memberof AppRawItem
   */
  @Prop() public value?: any;

  /**
   * ibiz-qr-code组件可传参数
   * @param {number} size  二维码大小，包含边框
   * @param {string} url  二维码内容
   * @param {string} bgSrc  背景图片
   * @param {number} margin 二维码外边距
   * @param {string} backgroundColor 背景颜色
   * @param {string} logoSrc 中央图标logo地址
   * @param {number} logoMargin logo周围的空白边框
   * @param {string} logoBgColor logo边框的背景色
   * @param {number} logoRadius logo边框圆角半径
   * @param {boolean} whiteMargin 背景图外是否设置白色边框
   * @type {*}
   * @memberof AppQRCode
   */
  public QRCodeConfig: {
    size?: number;
    url?: string;
    bgSrc?: string;
    margin?: number;
    backgroundColor?: string;
    logoSrc?: string;
    logoMargin?: number;
    logoBgColor?: string;
    logoRadius?: number;
    whiteMargin?: boolean;
  } = {};

  /**
   * 二维码生成的回调函数
   * @type {*}
   * @memberof AppQRCode
   */
  public callback(event: any) {
    // TODO
  }

  /**
   * 获取二维码数据
   * @type {*}
   * @memberof AppQRCode
   */
  public created() {
    this.getQRCodeData();
  }

  /**
   * 获取二维码绘制数据
   *
   * @type {*}
   * @memberof AppQRCode
   */
  public getQRCodeData() {
    if (this.value && typeof this.value == 'string') {
      const value = JSON.parse(this.value);
      const { size, url, bgSrc, margin, backgroundColor, logoSrc, logoMargin, logoBgColor, logoRadius, whiteMargin } =
        value;
      this.QRCodeConfig = {
        size,
        url,
        bgSrc,
        margin,
        backgroundColor,
        logoSrc,
        logoMargin,
        logoBgColor,
        logoRadius,
        whiteMargin,
      };
      // TODO
    }
  }
}
</script>

<style lang='less'>
@import './app-preset-qrcode.less';
</style>