app-preset-qrcode.vue 3.6 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
<template>
    <div :class="className">
        <template v-if="QRCodeConfig.url">
            <ibiz-qr-code
                :size="QRCodeConfig.size"
                :url="QRCodeConfig.url"
                :bgSrc="QRCodeConfig.bgSrc"
                :margin="QRCodeConfig.margin"
                :backgroundColor="QRCodeConfig.backgroundColor"
                :logoSrc="QRCodeConfig.logoSrc"
                :logoMargin="QRCodeConfig.logoMargin"
                :logoBgColor="QRCodeConfig.logoBgColor"
                :logoRadius="QRCodeConfig.logoRadius"
                :whiteMargin="QRCodeConfig.whiteMargin"
                class="ibiz-qr-code"
                :callback="callback">
            </ibiz-qr-code>
        </template>
    </div>
</template>

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

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

    /**
     * 名称
     *
     * @type {string}
     * @memberof AppPresetQrCode
     */
    @Prop() public name!: string;

    /**
     * 类名
     *
     * @memberof AppPresetQrCode
     */
    get className(): string {
49
        return `app-preset-qrcode ${this.name}`;
50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139
    }

    /**
     * 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 AppPresetQrCode
     */
    public QRCodeConfig: { 
        size?: number, 
        url?: string, 
        bgSrc?: string,
        margin?: number, 
        backgroundColor?: string, 
        logoSrc?: string,
        logoMargin?: number, 
        logoBgColor?: string, 
        logoRadius?: number,
        whiteMargin?: boolean,
    } = {}

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

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

    /**
     * 获取二维码绘制数据
     *
     * @type {*}
     * @memberof AppPresetQrCode
     */
    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>