fix: 修复 f-select 组件选中值的类型判断条件

CHANGELOG.md

@@ -6,6 +6,7 @@
 - 修复 `f-table` 组件返回类型
 - 修复 `f-aside` 组件样式被挤压的问题
 - 修复 `f-header` 组件高度无法自动撑开的问题
+- 修复 `f-select` 组件选中值的类型判断条件
 
 ## 0.65.0 (2023-12-12)
 

packages/fighting-design/option/src/option.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
   import { Props } from './props'
   import { useRun } from '../../_hooks'
-  import { isString } from '../../_utils'
+  import { isString, isArray, isObject } from '../../_utils'
   import { TRIGGER_CLOSE_KEY } from '../../trigger/src/props'
   import { inject, toRefs, useSlots, computed } from 'vue'
   import { SELECT_PROPS_TOKEN } from '../../select/src/props'
@@ -44,6 +44,49 @@
     return false
   })
 
+  /**
+   * 获取有效的值
+   *
+   * 如果三个值都为假，返回最后一个
+   *
+   * 空数组或者空对象判断为假
+   *
+   * 0 判断为真
+   *
+   * null、undefined、NaN 判断为假
+   *
+   * @param {*} values 参数集合
+   */
+  const getEffectiveValue = (...values: any[]): any => {
+    // 没有数据返回空字符串
+    if (!values || !values.length) {
+      return ''
+    }
+
+    /** 尝试查找到有效的值 */
+    const effectiveValue = values.find((value: any): boolean => {
+      //  null、undefined、NaN 判断为假
+      if (value === null || value === undefined || Number.isNaN(value)) {
+        return false
+      }
+
+      // 空数组或者空对象判断为假
+      if (isArray(value) || isObject(value)) {
+        return Object.keys(value).length > 0
+      }
+
+      // 0 判断为真
+      if (value === 0) {
+        return true
+      }
+
+      return !!value
+    })
+
+    // 如果三个值都为假，返回最后一个
+    return effectiveValue !== undefined ? effectiveValue : values[values.length - 1]
+  }
+
   /**
    * 点击传入指定的 value
    *
@@ -62,16 +105,25 @@
      *
      * 返回优先级：插槽 > label > value
      */
-    const newLabel: SelectModelValue = slotLabel.value || label.value || value.value
+    const currentLabel: SelectModelValue = getEffectiveValue(
+      slotLabel.value,
+      label.value,
+      value.value
+    )
+
     /**
      * 最新的 value
      *
      * 返回优先级：value > label > 插槽
      */
-    const newValue: SelectModelValue = value.value || label.value || slotLabel.value
+    const currentValue: SelectModelValue = getEffectiveValue(
+      value.value,
+      label.value,
+      slotLabel.value
+    )
 
     /** 执行父组件的设置方法 */
-    parentInject && run(parentInject.setValue, newValue, newLabel, evt)
+    parentInject && run(parentInject.setValue, currentValue, currentLabel, evt)
     /** 点击之后关闭 */
     triggerInject && run(triggerInject.close)
   }

packages/fighting-design/select/src/select.vue

@@ -92,24 +92,24 @@
   /**
    * 设置新的值
    *
-   * @param { string | number } newValue 新的 value 值
-   * @param { string | number } newLabel 新增 label 值
+   * @param { string | number } currentValue 新的 value 值
+   * @param { string | number } currentLabel 新增 label 值
    * @param { Object } evt 事件对象
    */
   const setValue = (
-    newValue: SelectModelValue,
-    newLabel: SelectModelValue,
+    currentValue: SelectModelValue,
+    currentLabel: SelectModelValue,
     evt: MouseEvent
   ): void => {
     /** 设置文本框展示的内容 */
-    keyword.value = newValue.toString()
+    keyword.value = currentValue.toString()
 
     /** 如果最新的 value 和绑定的 value 不一致时，才触发 change 事件 */
-    if (newLabel !== prop.modelValue) {
-      run(prop.onChange, newValue, newLabel, evt)
+    if (currentLabel !== prop.modelValue) {
+      run(prop.onChange, currentValue, currentLabel, evt)
     }
 
-    modelValue.value = newValue
+    modelValue.value = currentValue
   }
 
   /** 向自组件注入依赖项 */

start/src/App.vue

@@ -1,5 +1,15 @@
-<script lang="ts" setup></script>
+<template>
+  <h1>{{ value }}</h1>
+  <f-select v-model="value" placeholder="请选择……">
+    <f-option :value="0">香蕉</f-option>
+    <f-option :value="2">苹果</f-option>
+    <f-option :value="3">哈密瓜</f-option>
+    <f-option :value="4">樱桃</f-option>
+  </f-select>
+</template>
 
-<template></template>
+<script lang="ts" setup>
+  import { ref } from 'vue'
 
-<style lang="scss" scoped></style>
+  const value = ref('')
+</script>