diff --git a/packages/fighting-design/_hooks/use-input/index.ts b/packages/fighting-design/_hooks/use-input/index.ts index 138cea7b9b..8f5dc7f208 100644 --- a/packages/fighting-design/_hooks/use-input/index.ts +++ b/packages/fighting-design/_hooks/use-input/index.ts @@ -52,6 +52,7 @@ export const useInput = ( * @param { Object } evt 事件对象 */ const handleInput = (evt: Event): void => { + console.log(modelValue.value) run(prop.onInput, modelValue.value, evt) } diff --git a/packages/fighting-design/select/src/props.ts b/packages/fighting-design/select/src/props.ts index 4aa2e51c82..dde234e11c 100644 --- a/packages/fighting-design/select/src/props.ts +++ b/packages/fighting-design/select/src/props.ts @@ -39,6 +39,8 @@ export const Props = { placeholder: setStringProp(), /** 是否可清除 */ clear: setBooleanProp(), + /** 是否可模糊搜索过滤 */ + filter: setBooleanProp(), /** * 是否禁用 * diff --git a/packages/fighting-design/select/src/select.vue b/packages/fighting-design/select/src/select.vue index 2f1248877e..9202f3bb0e 100644 --- a/packages/fighting-design/select/src/select.vue +++ b/packages/fighting-design/select/src/select.vue @@ -9,6 +9,7 @@ import { FIconChevronDown } from '../../_svg' import type { VNode, Slots } from 'vue' import type { SelectProvide, SelectModelValue, SelectChildren } from './interface' + import type { InputUpdate } from '../../input' defineOptions({ name: 'FSelect' }) @@ -22,10 +23,40 @@ const { run } = useRun() const { styles } = useList(prop, 'select') + /** + * 获取子元素 option + * + * 通过插槽插入的内容,过滤出有效的子元素返回 + */ + const options = computed((): VNode[] => { + // 如果没有插槽内容,返回空数组 + if (!slot.default) return [] + + const childrens = getChildren(slot.default(), 'FOption') + + if (prop.filter && modelValue.value.toString()) { + childrens.map((item: VNode) => { + /** 获取到当前子元素的插槽内容 */ + const slot: string | undefined = + item.children && (item.children as { default: Function }).default()[0].children + + console.log(slot) + }) + } + + console.log(childrens) + + return childrens + }) + /** 当前绑定的值 */ const keyword = computed({ get: (): string => { - /** 如果插槽没内容,则返回空字符串 */ + if (prop.filter) { + return modelValue.value.toString() + } + + // 如果插槽没内容,则返回空字符串 if (!options.value.length) return '' /** @@ -71,22 +102,14 @@ /** 获取到当前子元素的 value 参数 */ const value: string | undefined = firstChildren.props?.value - /** 返回优先级:插槽 > label > value */ + // 返回优先级:插槽 > label > value return slot || label || (value && value.toString()) || '' }, - set: (val: string): string => val - }) - - /** - * 获取子元素 option - * - * 通过插槽插入的内容,过滤出有效的子元素返回 - */ - const options = computed((): VNode[] => { - /** 如果没有插槽内容,返回空数组 */ - if (!slot.default) return [] - - return getChildren(slot.default(), 'FOption') + set: (val: string): string => { + console.log('set') + modelValue.value = val + return val + } }) /** @@ -145,6 +168,10 @@ active.scrollIntoView({ block: 'end' }) } } + + const inputInput: InputUpdate = (value: string): void => { + console.log(value) + }