条码 xBarcode

---

预览

介绍

用 x-skia-u 画一维码：ean13、ean8、upca、code128、code39、itf25、codabar。codebar 与 code128 共用 Code128 子集 B。 ean13/ean8/upca 请按 GS1 位数与校验规则提供内容；codabar 须以 A/B/C/D 起止（如 A12345A）。

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/uni_modules/tmx-ui/components/x-barcode/x-barcode.uvue

使用

<x-barcode></x-barcode>

Props 属性

名称	说明	类型	默认值
width	窗口宽	string	"auto"
height	容器高，影响条码高度	string	"140px"
pading	上下间隙，单位是 px	number	20
color	条码颜色	string	"black"
encode	编码：codebar/code128/ean13/ean8/upca/code39/itf25/codabar	xBarcodeEncode	"ean13"
text	条码内容	string	""

Events 事件

名称	参数	说明

Slots 插槽

名称	说明	数据

Ref 方法

名称	参数	返回值	说明

示例文件路径

/pages/qita/barcode

示例源码

uvue

<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">条码 xBarcode</x-text>
			<x-text color="#999999" >
				支持 ean13、ean8、upca、code128、code39、itf25、codabar（codebar 与 code128 同为 Code128-B）
			</x-text>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">ean13国内，国际商品码</x-text>
			<x-text color="#999999" class="mb-12">
				可使用淘宝等软件扫描识别
			</x-text>
			<x-sheet dark-color="#dcdcdc" :padding="['0']" :margin="['0']">
				<x-barcode encode="ean13" text="6970980210024"></x-barcode>
			</x-sheet>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">code128，常规条码</x-text>
			<x-text color="#999999" class="mb-12">
				需要专用的识别软件或者条码器识别，见：https://barcode.tec-it.com/en/Code128?data=ABC-abc-1234
			</x-text>
			
			<x-sheet dark-color="#dcdcdc" :padding="['0']" :margin="['0']">
				<x-barcode encode="code128" text="abc125698"></x-barcode>
			</x-sheet>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">其它一维示例</x-text>
			<x-text color="#999999" >ean8 / upca / code39 / itf25 / codabar</x-text>
		</x-sheet>
		<x-sheet dark-color="#dcdcdc" :padding="['0']" >
			<x-barcode encode="ean8" text="96385074"></x-barcode>
		</x-sheet>
		<x-sheet dark-color="#dcdcdc" :padding="['0']" >
			<x-barcode encode="upca" text="012345678905"></x-barcode>
		</x-sheet>
		<x-sheet dark-color="#dcdcdc" :padding="['0']" >
			<x-barcode encode="code39" text="CODE39"></x-barcode>
		</x-sheet>
		<x-sheet dark-color="#dcdcdc" :padding="['0']" >
			<x-barcode encode="itf25" text="12345670"></x-barcode>
		</x-sheet>
		<x-sheet dark-color="#dcdcdc" :padding="['0']" >
			<x-barcode encode="codabar" text="A123456A"></x-barcode>
		</x-sheet>

		<view style="height:50px"></view>
	
</template>

<script setup lang="ts">
	
</script>

<style lang="scss">

</style>