条形码 Barcode ​

<template>
	<tm-app>
		<tm-sheet :followDark="false">
			<tm-text _class="text-weight-b" label="条形码，全端支持"></tm-text>
			<tm-text
				:font-size="24"
				label="支持的码制非常的丰富，由于我本人非工业人员，对于条码制式不太了解，但程序提供了常见的:CODE128 CODE39 EAN_UPC系列 ITF MSI pharmacode"
			></tm-text>
			<tm-text color="red" label="尽量横屏生成，数字多，生成的条形会溢出画布导致数据残缺，无法识别哦~"></tm-text>

			<view class="flex flex-center">
				<tm-barcode :width="636" :option="opts"></tm-barcode>
			</view>
		</tm-sheet>
		<tm-sheet>
			<view class="flex flex-row flex-row-bottom-start">
				<tm-text label="属性设置"></tm-text>
				<tm-text :font-size="22" _class="ml-10" label="(实时生效)"></tm-text>
			</view>
			<tm-divider></tm-divider>
			<tm-radio-group v-model="opts.lineColor" defaultValue="#000000">
				<tm-radio value="#000000" label="黑色"></tm-radio>
				<tm-radio value="#0000FF" label="蓝色"></tm-radio>
				<tm-radio value="#FF0000" label="红色"></tm-radio>
			</tm-radio-group>
			<tm-divider></tm-divider>
			<tm-input prefixLabel="文本内容" align="right" placeholder="请输入文本" v-model="opts.text" type="text"></tm-input>
			<tm-input
				:margin="[0, 24]"
				prefixLabel="字体大小"
				align="right"
				placeholder="请输入字号"
				v-model="opts.fontSize"
				type="number"
			></tm-input>
			<tm-input prefixLabel="线宽PX" align="right" placeholder="请输入线条宽度" v-model="opts.width" type="number"></tm-input>
		</tm-sheet>
	</tm-app>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmRadio from '@/tmui/components/tm-radio/tm-radio.vue'
import tmRadioGroup from '@/tmui/components/tm-radio-group/tm-radio-group.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
import tmInput from '@/tmui/components/tm-input/tm-input.vue'
import tmBarcode from '@/tmui/components/tm-barcode/tm-barcode.vue'
let opts = ref({ lineColor: '#000000', fontSize: 20, width: 2, text: '1234567890123456789' })
</script>