feat: select 组件 on-before-change 配置项增家回调参数

FightingDesign · May 24, 2024 · 2d75837 · 2d75837
1 parent a152fde
commit 2d75837
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 34 deletions.
diff --git a/docs/components/select.md b/docs/components/select.md
@@ -129,10 +129,11 @@
 <script lang="ts" setup>
   import { ref } from 'vue'
   import { FConfirmBox } from 'fighting-design'
+  import type { SelectBeforeChange } from 'fighting-design'
 
   const value4 = ref('')
 
-  const onBeforeChange = (): Promise<boolean> => {
+  const onBeforeChange: SelectBeforeChange = (value, label): Promise<boolean> => {
     return new Promise(resolve => {
       FConfirmBox({
         title: '标题',
@@ -222,7 +223,10 @@ type SelectChange = (
 ### SelectBeforeChange
 
 ```ts
-type SelectBeforeChange = () => Promise<boolean>
+type SelectBeforeChange = (
+  value: SelectModelValue,
+  label: SelectModelValue
+) => Promise<boolean>
 ```
 
 ## Contributors

diff --git a/packages/fighting-design/option/src/option.vue b/packages/fighting-design/option/src/option.vue
@@ -140,7 +140,7 @@
      * promise 返回一个布尔类型，为 true 代表值需要改变，为 false 代表取消改变
      */
     if (parentInject.onBeforeChange) {
-      const changeRes = await parentInject.onBeforeChange()
+      const changeRes = await parentInject.onBeforeChange(currentValue, currentLabel)
 
       if (!changeRes) {
         // 点击之后关闭

diff --git a/packages/fighting-design/select/src/interface.ts b/packages/fighting-design/select/src/interface.ts
@@ -18,8 +18,11 @@ export type SelectChange = (
 
 /**
  * 值在改变之前的回调类型
+ * 
+ * @param { string | number } value 需要改变的值
+ * @param { string | number } label 需要改变的标签
  */
-export type SelectBeforeChange = () => Promise<boolean>
+export type SelectBeforeChange = (value: SelectModelValue, label: SelectModelValue) => Promise<boolean>
 
 /**
  * 提供给子组件注入的依赖项类型接口

diff --git a/start/src/App.vue b/start/src/App.vue
@@ -1,31 +1,3 @@
-<template>
-  <f-select v-model="value3" placeholder="请选择……" :on-before-change="onBeforeChange">
-    <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-select>
-</template>
+<script lang="ts" setup></script>
 
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  import { FConfirmBox } from 'fighting-design'
-
-  const value3 = ref('')
-
-  const onBeforeChange = (): Promise<boolean> => {
-    return new Promise(resolve => {
-      FConfirmBox({
-        title: '标题',
-        content: '这是内容',
-        zIndex: 2000,
-        onConfirm: () => {
-          resolve(true)
-        },
-        onCancel: () => {
-          resolve(false)
-        }
-      })
-    })
-  }
-</script>
+<template></template>