uniappx-youhujun组件

针对业务开发的自定义全局组件全部位于 youhujun/V1/components目录下

通过pages.json中的easycom可以看出基本可以满足大部分组件定义需要,特殊情况处理可以自行调整

"easycom": {
		"autoscan": true,
		"custom": {
			// "^uni-(.*)": "@/uni_modules/uni-$1/components/uni-$1/uni-$1.vue",
			"^yh-(.*)": "@/youhujun/V1/components/yh-$1/yh-$1.uvue",
			"^yh-(.*)-(.*)": "@/youhujun/V1/components/yh-$1-$2/yh-$1-$2.uvue",
			"^yh-(.*)-(.*)-(.*)": "@/youhujun/V1/components/yh-$1-$2-$3/yh-$1-$2-$3.uvue",
			"^yh-(.*)-(.*)-(.*)-(.*)": "@/youhujun/V1/components/yh-$1-$2-$3/yh-$1-$2-$3-$4.uvue"
		}
	},

图标组件

位置:
youhujun/V1/components/yh-icon/yh-icon.uvue
使用示例:

<yh-icon name="vx" :size="64" color="#868889" class="tool-item-icon"></yh-icon>

树形数据级联选择

提示

1-为了保证和后台vue3-elementplus-admin的级联选择兼容,特意封装了yh-select-tree.特别注意,回显和选择的最终的数据格式是[[1],[1,2],[1,2,3]]这种级联数据格式
2-这是通用封装,其余商品分类,地区选择等只要是树形级联选择的数据,都可以通过这个组件来二次封装业务组件

位置:
youhujun/V1/components/yh-select-tree/yh-select-tree.uvue

使用示例:
这个是示例是基于yh-select-tree封装的业务组件,用于选择地区

<template>
	<yh-select-tree 
	v-model="regionIdTree"
	:tree-source="treeSource"
	label-key="region_name"
	id-key="id"
	/>
</template>

<script setup>
	import type { GetTreeRegionsData, GetTreeRegionsApiReponse } from '@/api/youhujun/system/region/region-type.uts'
	import { getTreeRegions } from '@/api/youhujun/system/region/region.uts'
	
	// 接收子组件抛出的标准级联ID数组 [[l1],[l1,l2],[l1,l2,l3]]
	const regionIdTree = ref([[1], [1,2], [1,2,3]])
	//const regionIdTree = ref([[1373], [1373,1420], [1373,1420,1432]])
	const treeSource = ref<GetTreeRegionsData[]>([])
	const toGetTreeRegions = async ()=>{
		const result : GetTreeRegionsApiReponse | null = await getTreeRegions()
		if(result && result.data){
			treeSource.value = result.data
		}
		
	}
	onMounted(()=>{
		toGetTreeRegions()
	})	
</script>

<style>
		
</style>

地区级联选择

位置:
youhujun/V1/components/yh-select-region/yh-select-region.uvue

示例:

<yh-select-region v-model="regionIdTree"></yh-select-region>
<script setup>
	// 接收子组件抛出的标准级联ID数组 [[l1],[l1,l2],[l1,l2,l3]]
	const regionIdTree = defineModel({
		default: () => [[1],[1,2],[1,2,3]]
	})
	
</script>