KendoUI之条形码和二维码的使用记录

正文

<template>
    <div>
        <!-- 条形码 -->
        <barcode :value="2346722"
                        :type="'ean8'"
                        :width="280"
                        :height="100">
        </barcode>
        <barcode :value="barcodeValue"
                        :width="280"
                        :height="100">
        </barcode>
        <h4>Enter a number:</h4>
        <numerictextbox type="number"
                                title="number"
                                :value="100000"
                                :min="0"
                                :max="10000000000000"
                                v-model="barcodeValue"
                                :format="'n0'">
        </numerictextbox>

        <!-- 二维码 -->
        <qrcode :value="'geo:42.65049,23.37925,100'"
                :error-collection="'H'"
                :size="120"
                :encoding="'UTF_8'"
                :color="'#166a83'">
        </qrcode>
        <qrcode :value="qrCodeValue" :size="200" :encoding="'UTF_8'"></qrcode>
        <input v-model="qrCodeValue"/>
    </div>
</template>
<script>
import { Barcode } from '@progress/kendo-barcodes-vue-wrapper';
import { NumericTextBox } from '@progress/kendo-inputs-vue-wrapper';
import { QRCode } from '@progress/kendo-barcodes-vue-wrapper';

export default {
  name: 'App',
  components: {
    'barcode': Barcode,
    'numerictextbox': NumericTextBox,
    'qrcode': QRCode
  },
  data: function() {
    return {
        barcodeValue: 1234,
        qrCodeValue: 'Some Text'
    }
  }
}
</script>

相关API属性

kendo-barcode

* Props
render-as: string [value: canvas|svg]
background: string
border: object
checksum: boolean
color: string
height: number
padding: object
text: object
type: string [value: EAN8|EAN13|UPCE|UPCA|Code11|Code39|Code39Extended|Code93|Code93Extended|Code128|Code128A|Code128B|Code128C|GS1-128|MSImod10|MSImod11|MSImod1010|MSImod1110|POSTNET]
value: string
width: number

* Methods
kendoWidget

kendo-qrcode

* Props
background: string
border: object
color: string
encoding: string [value: ISO_8859_1|UTF_8]
error-correction: string [value: L|M|Q|H]
padding: object
render-as: string [value: canvas|svg]
size: number|string
value: number|string
* Methods
kendoWidget

BorderProps

border-color: string
border-dash-type: string
border-width: number

PaddingProps

padding-bottom: number
padding-left: number
padding-right: number
padding-top: number

TextProps

text-color: string
text-font: string
text-margin-bottom: number
text-margin-left: number
text-margin-right: number
text-margin-top: number
text-visible: boolean