From 8149cfde91b8c99f3e7f52e8e5f32b1b30777b6c Mon Sep 17 00:00:00 2001
From: Tyh2001 <1469442737@qq.com>
Date: Thu, 23 May 2024 22:29:01 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/confirm-box.md                |  22 ++--
 docs/components/select.md                     | 100 ++++++++++++++++--
 .../fighting-design/select/src/interface.ts   |   3 +
 start/src/App.vue                             |  32 +++++-
 4 files changed, 134 insertions(+), 23 deletions(-)

diff --git a/docs/components/confirm-box.md b/docs/components/confirm-box.md
index 54bbcd1fb2..2410e248f0 100644
--- a/docs/components/confirm-box.md
+++ b/docs/components/confirm-box.md
@@ -105,16 +105,17 @@ import { FConfirmBox } from 'fighting-design'
 
 ## Attributes
 
-| 参数           | 说明                   | 类型                                                               | 可选值 | 默认值 |
-| -------------- | ---------------------- | ------------------------------------------------------------------ | ------ | ------ |
-| `title`        | 标题                   | string                                                             | ——     | ——     |
-| `content`      | 提示内容               | string                                                             | ——     | ——     |
-| `confirm-text` | 确认按钮文字           | string / number                                                    | ——     | ——     |
-| `cancel-text`  | 取消按钮文字           | string / number                                                    | ——     | ——     |
-| `on-confirm`   | 点击确定执行的回调方法 | <a href="/components/interface.html#handlemouse">HandleMouse</a>   | ——     | ——     |
-| `on-cancel`    | 点击取消执行的回调方法 | <a href="/components/interface.html#handlemouse">HandleMouse</a>   | ——     | ——     |
-| `on-open`      | 开启之后执行的回调方法 | <a href="/components/interface.html#handlechange">HandleChange</a> | ——     | ——     |
-| `on-close`     | 关闭之后执行的回调方法 | <a href="/components/interface.html#handlechange">HandleChange</a> | ——     | ——     |
+| 参数           | 说明                                                                                | 类型                                                               | 可选值 | 默认值 |
+| -------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------ | ------ |
+| `title`        | 标题                                                                                | string                                                             | ——     | ——     |
+| `content`      | 提示内容                                                                            | string                                                             | ——     | ——     |
+| `confirm-text` | 确认按钮文字                                                                        | string / number                                                    | ——     | ——     |
+| `z-index`      | 层级，原生 [z-index](https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index) 属性 | number                                                             | ——     | 1000   |
+| `cancel-text`  | 取消按钮文字                                                                        | string / number                                                    | ——     | ——     |
+| `on-confirm`   | 点击确定执行的回调方法                                                              | <a href="/components/interface.html#handlemouse">HandleMouse</a>   | ——     | ——     |
+| `on-cancel`    | 点击取消执行的回调方法                                                              | <a href="/components/interface.html#handlemouse">HandleMouse</a>   | ——     | ——     |
+| `on-open`      | 开启之后执行的回调方法                                                              | <a href="/components/interface.html#handlechange">HandleChange</a> | ——     | ——     |
+| `on-close`     | 关闭之后执行的回调方法                                                              | <a href="/components/interface.html#handlechange">HandleChange</a> | ——     | ——     |
 
 ## Contributors
 
@@ -124,6 +125,7 @@ import { FConfirmBox } from 'fighting-design'
 
 <script setup lang="ts">
   import { FConfirmBox, FMessage } from 'fighting-design'
+  import { ref } from 'vue'
 
   const open1 = (): void => {
     FConfirmBox({
diff --git a/docs/components/select.md b/docs/components/select.md
index 69ee6ead8d..38fb7cb030 100644
--- a/docs/components/select.md
+++ b/docs/components/select.md
@@ -101,19 +101,71 @@
 
 :::
 
+## 在改变之前调用
+
+`on-before-change` 可以在选择前改变之前调用，它需要返回一个 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)，Promise 需要返回一个布尔值，返回 true 将需要改变，返回 false 则终止改变
+
+::: demo
+
+<template #source>
+<f-select v-model="value4" 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>
+
+```html
+<template>
+  <f-select v-model="value4" 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>
+  import { ref } from 'vue'
+  import { FConfirmBox } from 'fighting-design'
+
+  const value4 = ref('')
+
+  const onBeforeChange = (): Promise<boolean> => {
+    return new Promise(resolve => {
+      FConfirmBox({
+        title: '标题',
+        content: '这是内容',
+        zIndex: 2000,
+        onConfirm: () => {
+          resolve(true)
+        },
+        onCancel: () => {
+          resolve(false)
+        }
+      })
+    })
+  }
+</script>
+```
+
+:::
+
 ## Select Attributes
 
-| 参数                 | 说明                       | 类型                                                               | 可选值                          | 默认值 |
-| -------------------- | -------------------------- | ------------------------------------------------------------------ | ------------------------------- | ------ |
-| `v-model:modelValue` | 绑定值                     | <a href="#selectmodelvalue">SelectModelValue</a>                   | ——                              | ——     |
-| `width`              | 自定义宽度                 | string / number                                                    | ——                              | 190    |
-| `name`               | 原生 name 属性             | string                                                             | ——                              | ——     |
-| `placeholder`        | 占位符                     | string                                                             | ——                              | ——     |
-| `clear`              | 是否可清除                 | boolean                                                            | ——                              | false  |
-| `disabled`           | 是否禁用                   | boolean                                                            | ——                              | false  |
-| `filter`             | 是否可过滤                 | boolean                                                            | ——                              | false  |
-| `size`               | 尺寸                       | <a href="/components/interface.html#fightingsize">FightingSize</a> | `large` `middle` `small` `mini` | middle |
-| `on-change`          | 绑定值发生改变时触发的回调 | <a href="#selectchange">SelectChange</a>                           | ——                              | ——     |
+| 参数                 | 说明                           | 类型                                                               | 可选值                          | 默认值 |
+| -------------------- | ------------------------------ | ------------------------------------------------------------------ | ------------------------------- | ------ |
+| `v-model:modelValue` | 绑定值                         | <a href="#selectmodelvalue">SelectModelValue</a>                   | ——                              | ——     |
+| `width`              | 自定义宽度                     | string / number                                                    | ——                              | 190    |
+| `name`               | 原生 name 属性                 | string                                                             | ——                              | ——     |
+| `placeholder`        | 占位符                         | string                                                             | ——                              | ——     |
+| `clear`              | 是否可清除                     | boolean                                                            | ——                              | false  |
+| `disabled`           | 是否禁用                       | boolean                                                            | ——                              | false  |
+| `filter`             | 是否可过滤                     | boolean                                                            | ——                              | false  |
+| `size`               | 尺寸                           | <a href="/components/interface.html#fightingsize">FightingSize</a> | `large` `middle` `small` `mini` | middle |
+| `on-change`          | 绑定值发生改变时触发的回调     | <a href="#selectchange">SelectChange</a>                           | ——                              | ——     |
+| `on-before-change`   | 绑定值发生改变时之前触发的回调 | <a href="#selectbeforechange">SelectBeforeChange</a>               | ——                              | ——     |
 
 ## Select Slots
 
@@ -145,6 +197,7 @@ import type {
   SelectProps,
   SelectModelValue,
   SelectChange,
+  SelectBeforeChange,
   OptionInstance,
   OptionProps
 } from 'fighting-design'
@@ -166,6 +219,12 @@ type SelectChange = (
 ) => void
 ```
 
+### SelectBeforeChange
+
+```ts
+type SelectBeforeChange = () => Promise<boolean>
+```
+
 ## Contributors
 
 <a href="https://github.com/Tyh2001" target="_blank">
@@ -178,7 +237,26 @@ type SelectChange = (
 
 <script lang="ts" setup>
   import { ref } from 'vue'
+  import { FConfirmBox } from 'fighting-design'
   import demo1Vue from './demos/select/demo1.vue'
   import demo2Vue from './demos/select/demo2.vue'
   import demo3Vue from './demos/select/demo3.vue'
+
+  const value4 = ref('')
+
+  const onBeforeChange = (): Promise<boolean> => {
+    return new Promise(resolve => {
+      FConfirmBox({
+        title: '标题',
+        content: '这是内容',
+        zIndex: 2000,
+        onConfirm: () => {
+          resolve(true)
+        },
+        onCancel: () => {
+          resolve(false)
+        }
+      })
+    })
+  }
 </script>
diff --git a/packages/fighting-design/select/src/interface.ts b/packages/fighting-design/select/src/interface.ts
index 7d2707356f..a1e5d7a9a7 100644
--- a/packages/fighting-design/select/src/interface.ts
+++ b/packages/fighting-design/select/src/interface.ts
@@ -16,6 +16,9 @@ export type SelectChange = (
   evt: MouseEvent
 ) => void
 
+/**
+ * 值在改变之前的回调类型
+ */
 export type SelectBeforeChange = () => Promise<boolean>
 
 /**
diff --git a/start/src/App.vue b/start/src/App.vue
index 1c772edac4..afc0fc85ba 100644
--- a/start/src/App.vue
+++ b/start/src/App.vue
@@ -1,3 +1,31 @@
-<script lang="ts" setup></script>
+<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>
 
-<template></template>
+<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>