alipay-emulator/uni_modules/lime-barcode/components/l-barcode/l-barcode.vue

<template>
	<view class="l-barcode" :style="[styles, lStyle]">
		<canvas class="l-barcode__canvas" type="2d" :canvas-id="canvasId" :id="canvasId"></canvas>
	</view>
</template>
<script lang="ts">
	// @ts-nocheck
	/**
	 * BarCode 条形码组件
	 * @description 用于生成各类条形码的显示组件，支持多种编码格式和样式配置
	 * @tutorial https://ext.dcloud.net.cn/plugin?name=lime-barcode
	 * 
	 * @property {string} format 条形码格式（必填）'CODE128' | 'EAN-13' | 'UPC' | 'CODE39' | 'ITF-14' 等标准格式
	 * @value 'CODE128'
	 * @value 'EAN-13'
	 * @value 'UPC'
	 * @value 'CODE39'
	 * @value 'ITF-14'
	 * @property {string | number} lineWidth 条线宽度（单位px）
	 * @property {string | number} lineLength 条线长度（单位px）
	 * @property {boolean} displayValue 是否显示条码下方文本
	 * @property {string} text 自定义显示文本（覆盖默认编码值）
	 * @property {string} fontOptions 字体样式扩展（预留字段）
	 * @property {string} [font] 字体名称（例：'bold 16px Arial'）
	 * @property {'left' | 'center' | 'right'} textAlign 文本水平对齐
	 * @property {'top' | 'bottom'} textPosition 文本相对位置
	 * @property {string | number} textMargin 文本与条码间距（单位px）
	 * @property {string | number} fontSize 文本字号（单位px）
	 * @property {string} background 背景颜色（支持CSS颜色值）
	 * @property {string} lineColor 条线颜色（支持CSS颜色值）
	 * @property {string | number} margin 整体外边距（单位px）
	 * @property {string | number} marginTop 上边距（优先级高于margin）
	 * @property {string | number} marginBottom 下边距（优先级高于margin）
	 * @property {string | number} marginLeft 左边距（优先级高于margin）
	 * @property {string | number} marginRight 右边距（优先级高于margin）
	 * @property {boolean} flat 是否启用扁平样式（去除空白区域）
	 * @property {boolean} ean128 是否启用EAN-128扩展格式
	 * @property {boolean} useCanvasToTempFilePath 是否启用canvas生成临时路径
	 * @property {string} lStyle 预留样式扩展字段
	 * @event {Function} success 条码生成成功时触发
	 */
	import { defineComponent, getCurrentInstance, watch, computed, onUnmounted, watchEffect  } from '@/uni_modules/lime-shared/vue';
	import { useCanvas } from './useCanvas'
	import { addUnit } from '@/uni_modules/lime-shared/addUnit'
	import { unitConvert } from '@/uni_modules/lime-shared/unitConvert'
	import { CanvasRenderer } from './barcode.ts'
	import { LBarcodeOptions } from './type'
	import BarcodeProps from './props'
	const name = 'l-barcode'
	export default defineComponent({
		name,
		props: BarcodeProps,
		emits: ['success'],
		setup(props, {emit,expose}){
			const instance = getCurrentInstance();
			const canvasId = `${name}${instance?.uid}`
			const canvas = useCanvas(`#${canvasId}`, instance!.proxy!)
			let stopWatch = null
			
			const styles = computed(() => {
				return {
					width:  addUnit(canvas.width),
					height: addUnit(canvas.height),
				}
			})
			const callback = ()=>{
				if(props.useCanvasToTempFilePath){
					canvasToTempFilePath({
						success(res){
							emit('success', res.tempFilePath)
						}
					} as UniNamespace.CanvasToTempFilePathOptions)
				}
			}
			// stopWatch = watch([()=>canvas.node , props], ([node, opt]) => {
			// 	if(node && opt){
			// 		const options = Object.assign({...opt}, {
			// 			width: unitConvert(opt.lineWidth),
			// 			height: unitConvert(opt.lineLength),
			// 			textMargin: unitConvert(opt.textMargin),
			// 			fontSize: unitConvert(opt.fontSize),
			// 			margin: unitConvert(opt.margin),
			// 			marginTop: unitConvert(opt.marginTop),
			// 			marginBottom: unitConvert(opt.marginBottom),
			// 			marginLeft: unitConvert(opt.marginLeft),
			// 			marginRight: unitConvert(opt.marginRight),
			// 		}) as LBarcodeOptions;
			// 		CanvasRenderer(canvas.node, `${props.text}`, options, callback)
			// 	}
			// })
			
			watchEffect(()=>{
				if(canvas.node) {
					const options = Object.assign({...props}, {
						width: unitConvert(props.lineWidth),
						height: unitConvert(props.lineLength),
						textMargin: unitConvert(props.textMargin),
						fontSize: unitConvert(props.fontSize),
						margin: unitConvert(props.margin),
						marginTop: unitConvert(props.marginTop),
						marginBottom: unitConvert(props.marginBottom),
						marginLeft: unitConvert(props.marginLeft),
						marginRight: unitConvert(props.marginRight),
					}) as LBarcodeOptions;
					CanvasRenderer(canvas.node, `${props.text}`, options, callback)
				}
			})
			
			const canvasToTempFilePath = (options: UniNamespace.CanvasToTempFilePathOptions) =>{
				if(canvas.node){
					if(canvas._node){
						const result = {
							errMsg: "canvasToTempFilePath:ok",
							tempFilePath: canvas.node.toDataURL() } as UniNamespace.CanvasToTempFilePathRes
						if(options.success){
							options.success(result)
						}
					} else {
						uni.canvasToTempFilePath({
							canvasId,
							...options,
						}, instance!.proxy!)
					}
				}
			}
			
			
			// #ifdef VUE3
			expose({canvasToTempFilePath})
			// #endif
			
			// onUnmounted(() => {
			// 	if(stopWatch) {
			// 		stopWatch()
			// 	}
			// })
			
			return {
				styles,
				canvasId,
				// #ifndef VUE3
				canvasToTempFilePath
				// #endif
			}
		}
	})
</script>
<style lang="scss">
	:host {
		display: inline-block;
	}
	.l-barcode {
		width: 100%;
		height: 100%;
		&__canvas {
			width: 100%;
			height: 100%;
		}
	}
</style>