✨(component): 开放 tree-select 组件
This commit is contained in:
		
							parent
							
								
									e8f8c8c2ea
								
							
						
					
					
						commit
						af3694d38c
					
				@ -1 +1 @@
 | 
				
			|||||||
export type CascaderSize = "lg" | "md" | "sm" | "xs";
 | 
					export type CascaderSize = "lg" | "md" | "sm" | "xs";
 | 
				
			||||||
 | 
				
			|||||||
@ -1 +1 @@
 | 
				
			|||||||
export type CheckboxSize = "lg" | "md" | "sm" | "xs";
 | 
					export type CheckboxSize = "lg" | "md" | "sm" | "xs";
 | 
				
			||||||
 | 
				
			|||||||
@ -29,7 +29,7 @@ provide("checkboxGroup", {
 | 
				
			|||||||
});
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
watch(
 | 
					watch(
 | 
				
			||||||
  () => modelValue,   
 | 
					  () => modelValue,
 | 
				
			||||||
  (val) => {
 | 
					  (val) => {
 | 
				
			||||||
    emit("change", modelValue.value);
 | 
					    emit("change", modelValue.value);
 | 
				
			||||||
    emit("update:modelValue", modelValue.value);
 | 
					    emit("update:modelValue", modelValue.value);
 | 
				
			||||||
 | 
				
			|||||||
@ -41,8 +41,8 @@ const props = withDefaults(defineProps<LayCountupProps>(), {
 | 
				
			|||||||
let localStartVal: Ref<number> = ref(props.startVal);
 | 
					let localStartVal: Ref<number> = ref(props.startVal);
 | 
				
			||||||
const isNumber = (val: string) => !isNaN(parseFloat(val));
 | 
					const isNumber = (val: string) => !isNaN(parseFloat(val));
 | 
				
			||||||
 | 
					
 | 
				
			||||||
/** 
 | 
					/**
 | 
				
			||||||
 * from: https://github.com/PanJiaChen/vue-countTo/blob/master/src/vue-countTo.vue 
 | 
					 * from: https://github.com/PanJiaChen/vue-countTo/blob/master/src/vue-countTo.vue
 | 
				
			||||||
 * */
 | 
					 * */
 | 
				
			||||||
const formatNumber = (num: number | string): string => {
 | 
					const formatNumber = (num: number | string): string => {
 | 
				
			||||||
  if (typeof num != "number") return "0";
 | 
					  if (typeof num != "number") return "0";
 | 
				
			||||||
@ -66,8 +66,8 @@ const printVal = useTransition(localStartVal, {
 | 
				
			|||||||
  disabled: !props.useEasing,
 | 
					  disabled: !props.useEasing,
 | 
				
			||||||
  transition:
 | 
					  transition:
 | 
				
			||||||
    typeof props.easingFn === "string"
 | 
					    typeof props.easingFn === "string"
 | 
				
			||||||
      // @ts-ignore
 | 
					      ? // @ts-ignore
 | 
				
			||||||
      ? TransitionPresets[props.easingFn]
 | 
					        TransitionPresets[props.easingFn]
 | 
				
			||||||
      : props.easingFn,
 | 
					      : props.easingFn,
 | 
				
			||||||
});
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
@ -1 +1 @@
 | 
				
			|||||||
export type InputSize = "lg" | "md" | "sm" | "xs";
 | 
					export type InputSize = "lg" | "md" | "sm" | "xs";
 | 
				
			||||||
 | 
				
			|||||||
@ -1 +1 @@
 | 
				
			|||||||
export type InputNumberSize = "lg" | "md" | "sm" | "xs";
 | 
					export type InputNumberSize = "lg" | "md" | "sm" | "xs";
 | 
				
			||||||
 | 
				
			|||||||
@ -1 +1 @@
 | 
				
			|||||||
export type RadioSize = "lg" | "md" | "sm" | "xs";
 | 
					export type RadioSize = "lg" | "md" | "sm" | "xs";
 | 
				
			||||||
 | 
				
			|||||||
@ -1 +1 @@
 | 
				
			|||||||
export type SelectSize = "lg" | "md" | "sm" | "xs";
 | 
					export type SelectSize = "lg" | "md" | "sm" | "xs";
 | 
				
			||||||
 | 
				
			|||||||
@ -1 +1 @@
 | 
				
			|||||||
export type TagInputSize = "lg" | "md" | "sm" | "xs";
 | 
					export type TagInputSize = "lg" | "md" | "sm" | "xs";
 | 
				
			||||||
 | 
				
			|||||||
@ -57,7 +57,6 @@ const props = withDefaults(defineProps<TreeProps>(), {
 | 
				
			|||||||
  onlyIconControl: false,
 | 
					  onlyIconControl: false,
 | 
				
			||||||
  disabled: false,
 | 
					  disabled: false,
 | 
				
			||||||
  showLine: true,
 | 
					  showLine: true,
 | 
				
			||||||
  selectedKey: "",
 | 
					 | 
				
			||||||
  replaceFields: () => {
 | 
					  replaceFields: () => {
 | 
				
			||||||
    return {
 | 
					    return {
 | 
				
			||||||
      id: "id",
 | 
					      id: "id",
 | 
				
			||||||
 | 
				
			|||||||
@ -8,6 +8,7 @@ export default {
 | 
				
			|||||||
import "./index.less";
 | 
					import "./index.less";
 | 
				
			||||||
import { computed, ref, watch } from "vue";
 | 
					import { computed, ref, watch } from "vue";
 | 
				
			||||||
import { getNode } from "../../utils/treeUtil";
 | 
					import { getNode } from "../../utils/treeUtil";
 | 
				
			||||||
 | 
					import { TreeSelectSize } from "./interface";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export interface LayTreeSelect {
 | 
					export interface LayTreeSelect {
 | 
				
			||||||
  data: any;
 | 
					  data: any;
 | 
				
			||||||
@ -18,7 +19,7 @@ export interface LayTreeSelect {
 | 
				
			|||||||
  allowClear?: boolean;
 | 
					  allowClear?: boolean;
 | 
				
			||||||
  collapseTagsTooltip?: boolean;
 | 
					  collapseTagsTooltip?: boolean;
 | 
				
			||||||
  minCollapsedNum?: number;
 | 
					  minCollapsedNum?: number;
 | 
				
			||||||
  size?: string;
 | 
					  size?: TreeSelectSize;
 | 
				
			||||||
  checkStrictly?: boolean;
 | 
					  checkStrictly?: boolean;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -66,7 +67,7 @@ const checkedKeys = computed({
 | 
				
			|||||||
});
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
watch(
 | 
					watch(
 | 
				
			||||||
  [selectedValue],
 | 
					  selectedValue,
 | 
				
			||||||
  () => {
 | 
					  () => {
 | 
				
			||||||
    if (props.multiple) {
 | 
					    if (props.multiple) {
 | 
				
			||||||
      multipleValue.value = selectedValue.value.map((value: any) => {
 | 
					      multipleValue.value = selectedValue.value.map((value: any) => {
 | 
				
			||||||
 | 
				
			|||||||
							
								
								
									
										1
									
								
								package/component/src/component/treeSelect/interface.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										1
									
								
								package/component/src/component/treeSelect/interface.ts
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1 @@
 | 
				
			|||||||
 | 
					export type TreeSelectSize = "lg" | "md" | "sm" | "xs";
 | 
				
			||||||
@ -61,6 +61,7 @@ import LayDropdownSubMenu from "./component/dropdownSubMenu/index";
 | 
				
			|||||||
import LayTab from "./component/tab/index";
 | 
					import LayTab from "./component/tab/index";
 | 
				
			||||||
import LayTabItem from "./component/tabItem/index";
 | 
					import LayTabItem from "./component/tabItem/index";
 | 
				
			||||||
import LayTree from "./component/tree/index";
 | 
					import LayTree from "./component/tree/index";
 | 
				
			||||||
 | 
					import LayTreeSelect from "./component/treeSelect/index";
 | 
				
			||||||
import LayTable from "./component/table/index";
 | 
					import LayTable from "./component/table/index";
 | 
				
			||||||
import LayPage from "./component/page/index";
 | 
					import LayPage from "./component/page/index";
 | 
				
			||||||
import LayTransfer from "./component/transfer/index";
 | 
					import LayTransfer from "./component/transfer/index";
 | 
				
			||||||
@ -180,6 +181,7 @@ const components: Record<string, Plugin> = {
 | 
				
			|||||||
  LaySpace,
 | 
					  LaySpace,
 | 
				
			||||||
  LayTag,
 | 
					  LayTag,
 | 
				
			||||||
  LayTagInput,
 | 
					  LayTagInput,
 | 
				
			||||||
 | 
					  LayTreeSelect
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const install = (app: App, options?: InstallOptions): void => {
 | 
					const install = (app: App, options?: InstallOptions): void => {
 | 
				
			||||||
@ -276,6 +278,7 @@ export {
 | 
				
			|||||||
  LaySpace,
 | 
					  LaySpace,
 | 
				
			||||||
  LayTag,
 | 
					  LayTag,
 | 
				
			||||||
  LayTagInput,
 | 
					  LayTagInput,
 | 
				
			||||||
 | 
					  LayTreeSelect,
 | 
				
			||||||
  install,
 | 
					  install,
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
@ -13,20 +13,18 @@
 | 
				
			|||||||
::: demo 使用 `lay-tree` 标签, 创建树形组件, @node-click 监听节点点击。
 | 
					::: demo 使用 `lay-tree` 标签, 创建树形组件, @node-click 监听节点点击。
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
  <lay-tree-select v-model="value" :data="data"></lay-tree-select>
 | 
					  <lay-tree-select v-model="value1" :data="data1"></lay-tree-select>
 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<script setup>
 | 
					<script setup>
 | 
				
			||||||
import { ref } from 'vue';
 | 
					import { ref } from 'vue';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const value = ref();
 | 
					const value1 = ref(1);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const data = ref([{
 | 
					const data1 = ref([{
 | 
				
			||||||
	title: '一级1',
 | 
						title: '一级1',
 | 
				
			||||||
	id: 1,
 | 
						id: 1,
 | 
				
			||||||
	field: 'name1',
 | 
						field: 'name1',
 | 
				
			||||||
	checked: true,
 | 
					 | 
				
			||||||
	spread: true,
 | 
					 | 
				
			||||||
	children: [{
 | 
						children: [{
 | 
				
			||||||
		title: '二级1-1 可允许跳转',
 | 
							title: '二级1-1 可允许跳转',
 | 
				
			||||||
		id: 3,
 | 
							id: 3,
 | 
				
			||||||
@ -43,12 +41,10 @@ const data = ref([{
 | 
				
			|||||||
				children: [{
 | 
									children: [{
 | 
				
			||||||
					title: '五级1-1-3-1-1',
 | 
										title: '五级1-1-3-1-1',
 | 
				
			||||||
					id: 30,
 | 
										id: 30,
 | 
				
			||||||
					field: ''
 | 
					 | 
				
			||||||
				},
 | 
									},
 | 
				
			||||||
				{
 | 
									{
 | 
				
			||||||
					title: '五级1-1-3-1-2',
 | 
										title: '五级1-1-3-1-2',
 | 
				
			||||||
					id: 31,
 | 
										id: 31,
 | 
				
			||||||
					field: ''
 | 
					 | 
				
			||||||
				}]
 | 
									}]
 | 
				
			||||||
			}]
 | 
								}]
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
@ -59,7 +55,6 @@ const data = ref([{
 | 
				
			|||||||
			children: [{
 | 
								children: [{
 | 
				
			||||||
				title: '四级1-1-1-1 可允许跳转',
 | 
									title: '四级1-1-1-1 可允许跳转',
 | 
				
			||||||
				id: 15,
 | 
									id: 15,
 | 
				
			||||||
				field: '',
 | 
					 | 
				
			||||||
				href: 'https://www.layui.com/doc/'
 | 
									href: 'https://www.layui.com/doc/'
 | 
				
			||||||
			}]
 | 
								}]
 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
@ -70,7 +65,6 @@ const data = ref([{
 | 
				
			|||||||
			children: [{
 | 
								children: [{
 | 
				
			||||||
				title: '四级1-1-2-1',
 | 
									title: '四级1-1-2-1',
 | 
				
			||||||
				id: 32,
 | 
									id: 32,
 | 
				
			||||||
				field: ''
 | 
					 | 
				
			||||||
			}]
 | 
								}]
 | 
				
			||||||
		}]
 | 
							}]
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
@ -81,13 +75,10 @@ const data = ref([{
 | 
				
			|||||||
		children: [{
 | 
							children: [{
 | 
				
			||||||
			title: '三级1-2-1',
 | 
								title: '三级1-2-1',
 | 
				
			||||||
			id: 9,
 | 
								id: 9,
 | 
				
			||||||
			field: '',
 | 
					 | 
				
			||||||
			disabled: true
 | 
					 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
		{
 | 
							{
 | 
				
			||||||
			title: '三级1-2-2',
 | 
								title: '三级1-2-2',
 | 
				
			||||||
			id: 10,
 | 
								id: 10,
 | 
				
			||||||
			field: ''
 | 
					 | 
				
			||||||
		}]
 | 
							}]
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
	{
 | 
						{
 | 
				
			||||||
@ -109,38 +100,29 @@ const data = ref([{
 | 
				
			|||||||
{
 | 
					{
 | 
				
			||||||
	title: '一级2',
 | 
						title: '一级2',
 | 
				
			||||||
	id: 2,
 | 
						id: 2,
 | 
				
			||||||
	field: '',
 | 
					 | 
				
			||||||
	spread: true,
 | 
					 | 
				
			||||||
	children: [{
 | 
						children: [{
 | 
				
			||||||
		title: '二级2-1',
 | 
							title: '二级2-1',
 | 
				
			||||||
		id: 5,
 | 
							id: 5,
 | 
				
			||||||
		field: '',
 | 
					 | 
				
			||||||
		spread: true,
 | 
							spread: true,
 | 
				
			||||||
		children: [{
 | 
							children: [{
 | 
				
			||||||
			title: '三级2-1-1',
 | 
								title: '三级2-1-1',
 | 
				
			||||||
			id: 11,
 | 
								id: 11,
 | 
				
			||||||
			field: ''
 | 
					 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
		{
 | 
							{
 | 
				
			||||||
			title: '三级2-1-2',
 | 
								title: '三级2-1-2',
 | 
				
			||||||
			id: 12,
 | 
								id: 12,
 | 
				
			||||||
			field: ''
 | 
					 | 
				
			||||||
		}]
 | 
							}]
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
	{
 | 
						{
 | 
				
			||||||
		title: '二级2-2',
 | 
							title: '二级2-2',
 | 
				
			||||||
		id: 6,
 | 
							id: 6,
 | 
				
			||||||
		field: '',
 | 
					 | 
				
			||||||
		children: [{
 | 
							children: [{
 | 
				
			||||||
			title: '三级2-2-1',
 | 
								title: '三级2-2-1',
 | 
				
			||||||
			id: 13,
 | 
								id: 13,
 | 
				
			||||||
			field: ''
 | 
					 | 
				
			||||||
		},
 | 
							},
 | 
				
			||||||
		{
 | 
							{
 | 
				
			||||||
			title: '三级2-2-2',
 | 
								title: '三级2-2-2',
 | 
				
			||||||
			id: 14,
 | 
								id: 14,
 | 
				
			||||||
			field: '',
 | 
					 | 
				
			||||||
			disabled: true
 | 
					 | 
				
			||||||
		}]
 | 
							}]
 | 
				
			||||||
	}]
 | 
						}]
 | 
				
			||||||
},
 | 
					},
 | 
				
			||||||
@ -194,15 +176,15 @@ function handleClick(node) {
 | 
				
			|||||||
::: demo 使用 `lay-tree` 标签, 创建树形组件, @node-click 监听节点点击。
 | 
					::: demo 使用 `lay-tree` 标签, 创建树形组件, @node-click 监听节点点击。
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
  <lay-tree-select v-model="value" :data="data" :disabled="true"></lay-tree-select>
 | 
					  <lay-tree-select v-model="value2" :data="data2" :disabled="true"></lay-tree-select>
 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<script setup>
 | 
					<script setup>
 | 
				
			||||||
import { ref } from 'vue';
 | 
					import { ref } from 'vue';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const value = ref();
 | 
					const value2 = ref();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const data = ref([{
 | 
					const data2 = ref([{
 | 
				
			||||||
	title: '一级1',
 | 
						title: '一级1',
 | 
				
			||||||
	id: 1,
 | 
						id: 1,
 | 
				
			||||||
	field: 'name1',
 | 
						field: 'name1',
 | 
				
			||||||
 | 
				
			|||||||
@ -191,6 +191,12 @@ const menus = [
 | 
				
			|||||||
        subTitle: "tagInput",
 | 
					        subTitle: "tagInput",
 | 
				
			||||||
        path: "/zh-CN/components/tagInput",
 | 
					        path: "/zh-CN/components/tagInput",
 | 
				
			||||||
      },
 | 
					      },
 | 
				
			||||||
 | 
					      {
 | 
				
			||||||
 | 
					        id: 39,
 | 
				
			||||||
 | 
					        title: "树选择",
 | 
				
			||||||
 | 
					        subTitle: "treeSelect",
 | 
				
			||||||
 | 
					        path: "/zh-CN/components/treeSelect",
 | 
				
			||||||
 | 
					      },
 | 
				
			||||||
      {
 | 
					      {
 | 
				
			||||||
        id: 40,
 | 
					        id: 40,
 | 
				
			||||||
        title: "颜色选择器",
 | 
					        title: "颜色选择器",
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user