feat: 新增 select filter 配置项

FightingDesign · Dec 23, 2023 · 14042f9 · 14042f9
1 parent 854d2de
commit 14042f9
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 52 deletions.
diff --git a/packages/fighting-design/option/src/option.vue b/packages/fighting-design/option/src/option.vue
@@ -21,24 +21,32 @@
   /** 获取到 trigger 注入的依赖项 */
   const triggerInject: TriggerProvide | null = inject(TRIGGER_CLOSE_KEY, null)
 
+  /** 获取插槽内容 */
+  const slotLabel = computed((): string => {
+    if (!slot.default) {
+      return ''
+    }
+
+    const _slot: VNodeNormalizedChildren | string = slot.default()[0].children
+
+    return isString(_slot) ? _slot : ''
+  })
+
   /** 控制是否显示 */
-  const isVisible = computed(() => {
+  const isVisible = computed((): boolean => {
     // 父组件没有依赖则不显示
     if (!parentInject) {
       return false
     }
 
+    // 没有 filter 属性，则展示
     if (!parentInject.filter) {
       return true
     }
 
-    const slotText: VNodeNormalizedChildren | string | undefined =
-      slot.default && slot.default()[0].children
-
-    const label = isString(slotText)
-      ? slotText
-      : '' || prop.label.toString() || prop.value.toString()
-
+    /** 获取到 label */
+    const label = slotLabel.value || prop.label.toString() || prop.value.toString()
+    /** 获取到选中的项目 */
     const currentItem = parentInject.childrenLabels.find(item => {
       return item.slot === label
     })
@@ -50,17 +58,6 @@
     return true
   })
 
-  /** 获取插槽内容 */
-  const slotLabel = computed((): string => {
-    if (!slot.default) {
-      return ''
-    }
-
-    const _slot: VNodeNormalizedChildren | string = slot.default()[0].children
-
-    return isString(_slot) ? _slot : ''
-  })
-
   /** 标签选中状态 */
   const labelActive = computed((): boolean => {
     /** 获取到 value 的值 */
@@ -161,11 +158,11 @@
 <template>
   <div
     v-if="$slots.default || label || value"
+    v-show="isVisible"
     :class="[
       'f-option',
       { 'f-option__disabled': disabled, 'f-option__active': labelActive }
     ]"
-    v-show="isVisible"
     @click="handleClick"
   >
     <slot v-if="$slots.default" />

diff --git a/packages/fighting-design/select/src/select.vue b/packages/fighting-design/select/src/select.vue
@@ -2,12 +2,22 @@
   import { Props, SELECT_PROPS_TOKEN } from './props'
   import { FInput } from '../../input'
   import { useList, useRun } from '../../_hooks'
-  import { provide, computed, useSlots, ref, reactive, toRef, nextTick, watch } from 'vue'
+  import {
+    provide,
+    computed,
+    useSlots,
+    ref,
+    reactive,
+    toRef,
+    nextTick,
+    watch,
+    onBeforeUnmount
+  } from 'vue'
   import { FDropdown } from '../../dropdown'
   import { getChildren, isFunction } from '../../_utils'
   import { FSvgIcon } from '../../svg-icon'
   import { FIconChevronDown } from '../../_svg'
-  import type { VNode, Slots } from 'vue'
+  import type { VNode, Slots, WatchStopHandle } from 'vue'
   import type { SelectProvide, SelectModelValue, SelectChildren } from './interface'
 
   defineOptions({ name: 'FSelect' })
@@ -22,6 +32,15 @@
   const { run } = useRun()
   const { styles } = useList(prop, 'select')
 
+  /** 子节点的 lable 配置项参数 */
+  const childrenLabels = ref<{ slot: string; show: boolean }[]>([])
+  /** 样式列表 */
+  const styleList = styles(['width'])
+  /** 当前是否聚焦 */
+  const isFocus = ref(false)
+  /** 展开的内容元素 */
+  const secletContentRef = ref<HTMLDivElement | undefined>()
+
   /**
    * 获取子元素 option
    *
@@ -37,8 +56,6 @@
   /** 当前绑定的值 */
   const keyword = computed({
     get: (): string => {
-      // console.log(options.value)
-
       if (prop.filter) {
         return modelValue.value.toString()
       }
@@ -121,9 +138,10 @@
     modelValue.value = currentValue
   }
 
-  const childrenLabels = ref<{ slot: string; show: boolean }[]>([])
-
-  const setChildrenLabels = () => {
+  /**
+   * 设置子节点的展示状态和 label
+   */
+  const setChildrenLabels = (): void => {
     if (!options.value || !options.value.length) {
       childrenLabels.value = []
     }
@@ -133,19 +151,10 @@
       const slot: string =
         item.children && (item.children as { default: Function }).default()[0].children
 
-      return { slot, show: slot?.includes(modelValue.value.toString()) }
+      return { slot, show: !!(slot && slot.includes(modelValue.value.toString())) }
     })
   }
 
-  /** 样式列表 */
-  const styleList = styles(['width'])
-
-  /** 当前是否聚焦 */
-  const isFocus = ref(false)
-
-  /** 展开的内容元素 */
-  const secletContentRef = ref<HTMLDivElement | undefined>()
-
   /** 下拉菜单开启之后的回调 */
   const onOpen = async (): Promise<void> => {
     await nextTick()
@@ -173,7 +182,22 @@
     }
   }
 
-  watch(() => modelValue.value, setChildrenLabels, { immediate: true })
+  /** 监听器实例 */
+  const watchStopHandle = ((): WatchStopHandle | undefined => {
+    if (!prop.filter) {
+      return
+    }
+    return watch((): SelectModelValue => modelValue.value, setChildrenLabels, {
+      immediate: true
+    })
+  })()
+
+  // 页面卸载的时候，如何有监听器 则停止
+  onBeforeUnmount(() => {
+    if (watchStopHandle) {
+      watchStopHandle()
+    }
+  })
 
   // 向子组件注入依赖项
   provide<SelectProvide>(

diff --git a/start/src/App.vue b/start/src/App.vue
@@ -1,16 +1,5 @@
-<template>
-  <h1>{{ value || '1' }}</h1>
-  <f-select v-model="value" placeholder="请选择……" filter>
-    <f-option>香蕉</f-option>
-    <f-option>苹果</f-option>
-    <f-option>哈密瓜</f-option>
-    <f-option>樱桃</f-option>
-    <f-option>西瓜</f-option>
-  </f-select>
-</template>
+<script lang="ts" setup></script>
 
-<script lang="ts" setup>
-  import { ref } from 'vue'
+<template></template>
 
-  const value = ref('')
-</script>
+<style lang="scss" scoped></style>