Skip to content
On this page

组件库文档 tmui.design

条形码 Barcode

这是一个条形码组件,属性多,可以生成非常个性化的组件哦~
尽量横屏生成,数字多,生成的条形会溢出画布导致数据残缺,无法识别哦~


🌶️ 条形码 Barcode 示例

查看模拟效果
示例代码
vue
<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:"123 456 89"})
</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
optionObjectasPropType<Baroptions>看下面的参数
widthNumber600画布的宽
heightNumber240画布的高

“option” 中的参数

ts
export interface Baroptions {
	width: number,//线条的宽度
	height: number,//线条的高度。
	format: string, //条码类型
	displayValue?: boolean, //是否显示下方文本
	text?: string, //待生成的文本
	textAlign?: string, //文本对齐 left,right,center
	textMargin: number,//文本与条码的间距
	fontSize: number, //文本小,默认20
	lineColor?: string,//线条颜色
}

🌹 事件

🌽 slot插槽

默认default

🥗 ref方法

如果在安卓端nvue原生的情况下保存二维码有未知问题,请使用vue页面使用本组件。

方法名参数返回值描述
savev3.0.63+-图片路径string,h5端返回的是base64保存当前生成的二维码图片