✨(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…
Reference in New Issue
Block a user