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