fix: 修复 select 组件

FightingDesign · May 11, 2024 · ded219b · ded219b
1 parent 3aaf433
commit ded219b
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 87 deletions.
diff --git a/docs/components/select.md b/docs/components/select.md
@@ -172,6 +172,10 @@ type SelectChange = (
   <f-avatar round src="https://avatars.githubusercontent.com/u/73180970?v=4" />
 </a>
 
+<a href="https://github.com/jxzho" target="_blank">
+  <f-avatar round src="https://avatars.githubusercontent.com/u/37285048?v=4" />
+</a>
+
 <script lang="ts" setup>
   import { ref } from 'vue'
   import demo1Vue from './demos/select/demo1.vue'

diff --git a/packages/fighting-design/option/src/option.vue b/packages/fighting-design/option/src/option.vue
@@ -131,10 +131,6 @@
     slotLabel.value
   )
 
-  if (currentValue === parentInject?.modelValue) {
-    parentInject && run(parentInject.setValue, currentValue, currentLabel)
-  }
-
   /**
    * 点击传入指定的 value
    *
@@ -151,6 +147,17 @@
     // 点击之后关闭
     triggerInject && run(triggerInject.close)
   }
+
+  /**
+   * 初始化设置选中的值
+   */
+  const setInit = (): void => {
+    if (currentValue === parentInject?.modelValue) {
+      parentInject && run(parentInject.setValue, currentValue, currentLabel)
+    }
+  }
+
+  setInit() // 初始化设置选中的值
 </script>
 
 <template>

diff --git a/packages/fighting-design/select/src/interface.ts b/packages/fighting-design/select/src/interface.ts
@@ -1,5 +1,3 @@
-import type { VNode } from 'vue'
-
 export type { SelectProps } from './props'
 
 /** 绑定值类型 */
@@ -23,19 +21,14 @@ export type SelectChange = (
  *
  * @param { Function } setValue 设置新的选中值
  * @param { Object } modelValue 绑定的值
- * @param { Object } childrenLabels 绑定的值
- * @param { Object } filter 绑定的值
+ * @param { boolean } filter 绑定的值
+ * @param { boolean } isFiltering 是否正在搜索
+ * @param { string } inputValue 文本框绑定的值
  */
 export interface SelectProvide {
   setValue: SelectChange
   modelValue: SelectModelValue
-  childrenLabels: { slot: string; show: boolean }[]
   filter: boolean
-}
-
-/** 获取子元素插槽类型接口 */
-export interface SelectChildren extends VNode {
-  children: {
-    default(): VNode[]
-  }
+  isFiltering: boolean
+  inputValue: string
 }
diff --git a/packages/fighting-design/select/src/select.vue b/packages/fighting-design/select/src/select.vue
@@ -2,19 +2,16 @@
   import { Props, SELECT_PROPS_TOKEN } from './props'
   import { FInput } from '../../input'
   import { useList, useRun } from '../../_hooks'
-  import { provide, computed, useSlots, ref, reactive, toRef, nextTick } from 'vue'
+  import { provide, ref, reactive, toRef, nextTick } from 'vue'
   import { FDropdown } from '../../dropdown'
-  import { getChildren, isFunction } from '../../_utils'
   import { FSvgIcon } from '../../svg-icon'
   import { FEmpty } from '../../empty'
   import { FIconChevronDown } from '../../_svg'
-  import type { VNode, Slots } from 'vue'
   import type { SelectProvide, SelectModelValue } from './interface'
 
   defineOptions({ name: 'FSelect' })
 
   const prop = defineProps(Props)
-  const slot: Slots = useSlots()
   const modelValue = defineModel<SelectModelValue>({
     default: '',
     type: [String, Number]
@@ -23,8 +20,6 @@
   const { run } = useRun()
   const { styles } = useList(prop, 'select')
 
-  /** 子节点的 label 配置项参数 */
-  const childrenLabels = ref<{ slot: string; show: boolean }[]>([])
   /** 样式列表 */
   const style = styles(['width'])
   /** 当前是否聚焦 */
@@ -38,18 +33,6 @@
   /** 是否正在输入过滤搜索中 */
   const isFiltering = ref(false)
 
-  /**
-   * 获取子元素 option
-   *
-   * 通过插槽插入的内容，过滤出有效的子元素返回
-   */
-  const options = computed((): VNode[] => {
-    // 如果没有插槽内容，返回空数组
-    if (!slot.default) return []
-
-    return getChildren(slot.default(), 'FOption')
-  })
-
   /**
    * 设置新的值
    *
@@ -78,45 +61,28 @@
   }
 
   /** 下拉菜单开启之后的回调 */
-  const onOpen = async (): Promise<void> => {
+  const dropdownOpen = async (): Promise<void> => {
     await nextTick()
 
-    childrenLabels.value = options.value.map((item: VNode) => {
-      /** 获取到当前子元素的插槽内容 */
-      const slot: string =
-        item.children && (item.children as { default: Function }).default()[0].children
-
-      return { slot, show: true }
-    })
-
     /** 获取到当前选中的元素 */
-    const active =
-      selectContentRef.value &&
-      selectContentRef.value.querySelector('.f-option.f-option__active')
+    const activeNode = selectContentRef.value?.querySelector('.f-option.f-option__active')
 
-    if (active && isFunction(active.scrollIntoView)) {
+    /**
+     * 需要有值，并且是元素节点
+     *
+     * @see Node https://developer.mozilla.org/zh-CN/docs/Web/API/Node
+     * @see instanceof https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof
+     */
+    if (activeNode && activeNode instanceof Node) {
       /**
        * 将元素滚动到可是区域
        *
        * @see Element.scrollIntoView() https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
        */
-      active.scrollIntoView({ block: 'end' })
+      activeNode.scrollIntoView({ block: 'end' })
     }
   }
 
-  // 向子组件注入依赖项
-  provide<SelectProvide>(
-    SELECT_PROPS_TOKEN,
-    reactive({
-      setValue,
-      childrenLabels,
-      modelValue: toRef(prop, 'modelValue'),
-      filter: toRef(prop, 'filter'),
-      inputValue,
-      isFiltering
-    })
-  )
-
   /**
    * 文本框失去焦点
    */
@@ -133,23 +99,36 @@
     }
   }
 
+  /**
+   * 文本框获取焦点
+   */
   const inputFocus = (): void => {
     isFocus.value = true
-
-    // if (prop.filter) {
-    //   isFiltering.value = true
-    // }
   }
 
+  /**
+   * 文本框输入
+   */
   const inputInput = (): void => {
-    console.log('change')
     isFiltering.value = true
   }
+
+  // 向子组件注入依赖项
+  provide<SelectProvide>(
+    SELECT_PROPS_TOKEN,
+    reactive({
+      setValue,
+      inputValue,
+      isFiltering,
+      modelValue: toRef(prop, 'modelValue'),
+      filter: toRef(prop, 'filter')
+    })
+  )
 </script>
 
 <template>
   <div class="f-select" :style="style">
-    <f-dropdown trigger="click" :disabled :width :on-open="onOpen">
+    <f-dropdown trigger="click" :disabled :width :on-open="dropdownOpen">
       <f-input
         v-model="inputValue"
         :readonly="!filter"

diff --git a/start/src/App.vue b/start/src/App.vue
@@ -1,21 +1,3 @@
-<template>
-  {{ value }}
-  <f-select v-model="value" placeholder="请选择……"  :width="300">
-    <f-option :value="1">香蕉</f-option>
-    <f-option :value="2">苹果</f-option>
-    <f-option :value="3">哈密瓜</f-option>
-    <f-option :value="4">樱桃</f-option>
-    <f-option :value="5">樱桃2</f-option>
-    <f-option :value="6">樱桃3</f-option>
-    <f-option :value="7">樱桃4</f-option>
-    <f-option :value="8">黄瓜</f-option>
-  </f-select>
-</template>
+<script lang="ts" setup></script>
 
-<script lang="ts" setup>
-  import { ref } from 'vue'
-
-  // const a = 1
-
-  const value = ref(5)
-</script>
+<template></template>