🐛(select): 修复 typescript 警告
This commit is contained in:
parent
a8237710e2
commit
db21a23bda
@ -17,21 +17,21 @@ import {
|
|||||||
toRefs,
|
toRefs,
|
||||||
Ref,
|
Ref,
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import LayScroll from "../scroll";
|
|
||||||
import LayBadge from "../badge/index.vue";
|
import LayBadge from "../badge/index.vue";
|
||||||
|
import LayScroll from "../scroll/index.vue";
|
||||||
import { onClickOutside } from "@vueuse/core";
|
import { onClickOutside } from "@vueuse/core";
|
||||||
import { SelectItem } from "../../types";
|
import { SelectItem } from "../../types";
|
||||||
|
|
||||||
export interface LaySelectProps {
|
export interface LaySelectProps {
|
||||||
modelValue?: string | number | [] | null;
|
|
||||||
name?: string;
|
name?: string;
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
showEmpty?: boolean;
|
showEmpty?: boolean;
|
||||||
emptyMessage?: string;
|
emptyMessage?: string;
|
||||||
|
modelValue?: any;
|
||||||
multiple?: boolean;
|
multiple?: boolean;
|
||||||
create?: boolean;
|
create?: boolean;
|
||||||
items?: { label: string; value: string | number | [] | null; key: string }[];
|
items?: { label: string; value: any; key: string, disabled: boolean; keyword: string }[];
|
||||||
}
|
}
|
||||||
|
|
||||||
const selectRef = ref<null | HTMLElement>();
|
const selectRef = ref<null | HTMLElement>();
|
||||||
@ -57,10 +57,10 @@ const open = function () {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
openState.value = !openState.value;
|
openState.value = !openState.value;
|
||||||
console.log(props.create);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const emit = defineEmits(["update:modelValue", "change", "search", "create"]);
|
const emit = defineEmits(["update:modelValue", "change", "search", "create"]);
|
||||||
|
|
||||||
const selectItem = ref<SelectItem>({
|
const selectItem = ref<SelectItem>({
|
||||||
value: !props.multiple
|
value: !props.multiple
|
||||||
? props.modelValue
|
? props.modelValue
|
||||||
@ -77,9 +77,7 @@ watch(
|
|||||||
emit("update:modelValue", val);
|
emit("update:modelValue", val);
|
||||||
emit("change", val);
|
emit("change", val);
|
||||||
},
|
},
|
||||||
{
|
{ deep: true }
|
||||||
deep: true,
|
|
||||||
}
|
|
||||||
);
|
);
|
||||||
|
|
||||||
watch(props, () => {
|
watch(props, () => {
|
||||||
@ -93,7 +91,7 @@ watch(props, () => {
|
|||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
selectItem.value.value = value;
|
selectItem.value.value = value;
|
||||||
//@ts-ignore
|
//
|
||||||
selectItem.value.label = ItemsMap.value[value] || "";
|
selectItem.value.label = ItemsMap.value[value] || "";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -111,12 +109,12 @@ const value = computed({
|
|||||||
if (input.value) {
|
if (input.value) {
|
||||||
return txt.value;
|
return txt.value;
|
||||||
}
|
}
|
||||||
// return txt.value;
|
|
||||||
return !selectItem.value.multiple && selectItem.value.value !== null
|
return !selectItem.value.multiple && selectItem.value.value !== null
|
||||||
? selectItem.value.label
|
? selectItem.value.label
|
||||||
: null;
|
: null;
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const selectItemHandle = async function (
|
const selectItemHandle = async function (
|
||||||
_selectItem: SelectItem,
|
_selectItem: SelectItem,
|
||||||
isChecked?: boolean
|
isChecked?: boolean
|
||||||
@ -163,6 +161,7 @@ const selectItemPush = function (p: SelectItem) {
|
|||||||
ItemsMap.value[p.value] = p.label;
|
ItemsMap.value[p.value] = p.label;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
provide("selectItemHandle", selectItemHandle);
|
provide("selectItemHandle", selectItemHandle);
|
||||||
provide("selectItemPush", selectItemPush);
|
provide("selectItemPush", selectItemPush);
|
||||||
provide("selectItem", selectItem);
|
provide("selectItem", selectItem);
|
||||||
@ -227,6 +226,7 @@ provide("keyword", txt);
|
|||||||
></i>
|
></i>
|
||||||
</lay-badge>
|
</lay-badge>
|
||||||
</template>
|
</template>
|
||||||
|
<input>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -133,7 +133,7 @@ function handleTitleClick(node: TreeData) {
|
|||||||
>
|
>
|
||||||
<template v-if="slots.title">
|
<template v-if="slots.title">
|
||||||
<slot name="title" :data="node"></slot>
|
<slot name="title" :data="node"></slot>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
{{ node.title }}
|
{{ node.title }}
|
||||||
</template>
|
</template>
|
||||||
|
@ -89,7 +89,7 @@ function handleClick(node: TreeData) {
|
|||||||
@node-click="handleClick"
|
@node-click="handleClick"
|
||||||
>
|
>
|
||||||
<template v-if="slots.title" v-slot:title="{ data }">
|
<template v-if="slots.title" v-slot:title="{ data }">
|
||||||
<slot name="title" :data="data"></slot>
|
<slot name="title" :data="data"></slot>
|
||||||
</template>
|
</template>
|
||||||
</tree-node>
|
</tree-node>
|
||||||
</div>
|
</div>
|
||||||
|
@ -18,6 +18,7 @@
|
|||||||
<ul>
|
<ul>
|
||||||
<li>[新增] table 组件 expand 插槽, 内容较多不能一次性完全展示时使用, 参数 data 为当前行数据</li>
|
<li>[新增] table 组件 expand 插槽, 内容较多不能一次性完全展示时使用, 参数 data 为当前行数据</li>
|
||||||
<li>[新增] table 组件 children 字段解析, 当字段中存在 children 时会自动转化为树表, 通过设置 indentSize 以控制每一层的缩进宽度</li>
|
<li>[新增] table 组件 children 字段解析, 当字段中存在 children 时会自动转化为树表, 通过设置 indentSize 以控制每一层的缩进宽度</li>
|
||||||
|
<li>[新增] tree 组件 title 插槽, 参数 data 为当前行数据, 用于自定义节点标题</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -32,7 +32,7 @@
|
|||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
>{{ t("home.download") }}:<em class="site-showdowns"
|
>{{ t("home.download") }}:<em class="site-showdowns"
|
||||||
>7,668</em
|
>11,504</em
|
||||||
></span
|
></span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user