Skip to content

Commit 8149cfd

Browse files
Tyh2001Tyh2001
committed
docs: 更新文档
1 parent ad3a89e commit 8149cfd

File tree

4 files changed

+134
-23
lines changed

4 files changed

+134
-23
lines changed

Diff for: ‎docs/components/confirm-box.md

+12-10
Original file line numberDiff line numberDiff line change
@@ -105,16 +105,17 @@ import { FConfirmBox } from 'fighting-design'
105105

106106
## Attributes
107107

108-
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
109-
| -------------- | ---------------------- | ------------------------------------------------------------------ | ------ | ------ |
110-
| `title` | 标题 | string | —— | —— |
111-
| `content` | 提示内容 | string | —— | —— |
112-
| `confirm-text` | 确认按钮文字 | string / number | —— | —— |
113-
| `cancel-text` | 取消按钮文字 | string / number | —— | —— |
114-
| `on-confirm` | 点击确定执行的回调方法 | <a href="/components/interface.html#handlemouse">HandleMouse</a> | —— | —— |
115-
| `on-cancel` | 点击取消执行的回调方法 | <a href="/components/interface.html#handlemouse">HandleMouse</a> | —— | —— |
116-
| `on-open` | 开启之后执行的回调方法 | <a href="/components/interface.html#handlechange">HandleChange</a> | —— | —— |
117-
| `on-close` | 关闭之后执行的回调方法 | <a href="/components/interface.html#handlechange">HandleChange</a> | —— | —— |
108+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
109+
| -------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------ | ------ |
110+
| `title` | 标题 | string | —— | —— |
111+
| `content` | 提示内容 | string | —— | —— |
112+
| `confirm-text` | 确认按钮文字 | string / number | —— | —— |
113+
| `z-index` | 层级，原生 [z-index](https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index) 属性 | number | —— | 1000 |
114+
| `cancel-text` | 取消按钮文字 | string / number | —— | —— |
115+
| `on-confirm` | 点击确定执行的回调方法 | <a href="/components/interface.html#handlemouse">HandleMouse</a> | —— | —— |
116+
| `on-cancel` | 点击取消执行的回调方法 | <a href="/components/interface.html#handlemouse">HandleMouse</a> | —— | —— |
117+
| `on-open` | 开启之后执行的回调方法 | <a href="/components/interface.html#handlechange">HandleChange</a> | —— | —— |
118+
| `on-close` | 关闭之后执行的回调方法 | <a href="/components/interface.html#handlechange">HandleChange</a> | —— | —— |
118119

119120
## Contributors
120121

@@ -124,6 +125,7 @@ import { FConfirmBox } from 'fighting-design'
124125

125126
<script setup lang="ts">
126127
import { FConfirmBox, FMessage } from 'fighting-design'
128+
import { ref } from 'vue'
127129

128130
const open1 = (): void => {
129131
FConfirmBox({

Diff for: ‎docs/components/select.md

+89-11
Original file line numberDiff line numberDiff line change
@@ -101,19 +101,71 @@
101101

102102
:::
103103

104+
## 在改变之前调用
105+
106+
`on-before-change` 可以在选择前改变之前调用，它需要返回一个 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)，Promise 需要返回一个布尔值，返回 true 将需要改变，返回 false 则终止改变
107+
108+
::: demo
109+
110+
<template #source>
111+
<f-select v-model="value4" placeholder="请选择……" :on-before-change="onBeforeChange">
112+
<f-option :value="1">香蕉</f-option>
113+
<f-option :value="2">苹果</f-option>
114+
<f-option :value="3">哈密瓜</f-option>
115+
<f-option :value="4">樱桃</f-option>
116+
</f-select>
117+
</template>
118+
119+
```html
120+
<template>
121+
<f-select v-model="value4" placeholder="请选择……" :on-before-change="onBeforeChange">
122+
<f-option :value="1">香蕉</f-option>
123+
<f-option :value="2">苹果</f-option>
124+
<f-option :value="3">哈密瓜</f-option>
125+
<f-option :value="4">樱桃</f-option>
126+
</f-select>
127+
</template>
128+
129+
<script lang="ts" setup>
130+
import { ref } from 'vue'
131+
import { FConfirmBox } from 'fighting-design'
132+
133+
const value4 = ref('')
134+
135+
const onBeforeChange = (): Promise<boolean> => {
136+
return new Promise(resolve => {
137+
FConfirmBox({
138+
title: '标题',
139+
content: '这是内容',
140+
zIndex: 2000,
141+
onConfirm: () => {
142+
resolve(true)
143+
},
144+
onCancel: () => {
145+
resolve(false)
146+
}
147+
})
148+
})
149+
}
150+
</script>
151+
```
152+
153+
:::
154+
104155
## Select Attributes
105156

106-
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
107-
| -------------------- | -------------------------- | ------------------------------------------------------------------ | ------------------------------- | ------ |
108-
| `v-model:modelValue` | 绑定值 | <a href="#selectmodelvalue">SelectModelValue</a> | —— | —— |
109-
| `width` | 自定义宽度 | string / number | —— | 190 |
110-
| `name` | 原生 name 属性 | string | —— | —— |
111-
| `placeholder` | 占位符 | string | —— | —— |
112-
| `clear` | 是否可清除 | boolean | —— | false |
113-
| `disabled` | 是否禁用 | boolean | —— | false |
114-
| `filter` | 是否可过滤 | boolean | —— | false |
115-
| `size` | 尺寸 | <a href="/components/interface.html#fightingsize">FightingSize</a> | `large` `middle` `small` `mini` | middle |
116-
| `on-change` | 绑定值发生改变时触发的回调 | <a href="#selectchange">SelectChange</a> | —— | —— |
157+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
158+
| -------------------- | ------------------------------ | ------------------------------------------------------------------ | ------------------------------- | ------ |
159+
| `v-model:modelValue` | 绑定值 | <a href="#selectmodelvalue">SelectModelValue</a> | —— | —— |
160+
| `width` | 自定义宽度 | string / number | —— | 190 |
161+
| `name` | 原生 name 属性 | string | —— | —— |
162+
| `placeholder` | 占位符 | string | —— | —— |
163+
| `clear` | 是否可清除 | boolean | —— | false |
164+
| `disabled` | 是否禁用 | boolean | —— | false |
165+
| `filter` | 是否可过滤 | boolean | —— | false |
166+
| `size` | 尺寸 | <a href="/components/interface.html#fightingsize">FightingSize</a> | `large` `middle` `small` `mini` | middle |
167+
| `on-change` | 绑定值发生改变时触发的回调 | <a href="#selectchange">SelectChange</a> | —— | —— |
168+
| `on-before-change` | 绑定值发生改变时之前触发的回调 | <a href="#selectbeforechange">SelectBeforeChange</a> | —— | —— |
117169

118170
## Select Slots
119171

@@ -145,6 +197,7 @@ import type {
145197
SelectProps,
146198
SelectModelValue,
147199
SelectChange,
200+
SelectBeforeChange,
148201
OptionInstance,
149202
OptionProps
150203
} from 'fighting-design'
@@ -166,6 +219,12 @@ type SelectChange = (
166219
) => void
167220
```
168221
222+
### SelectBeforeChange
223+
224+
```ts
225+
type SelectBeforeChange = () => Promise<boolean>
226+
```
227+
169228
## Contributors
170229
171230
<a href="https://github.com/Tyh2001" target="_blank">
@@ -178,7 +237,26 @@ type SelectChange = (
178237
179238
<script lang="ts" setup>
180239
import { ref } from 'vue'
240+
import { FConfirmBox } from 'fighting-design'
181241
import demo1Vue from './demos/select/demo1.vue'
182242
import demo2Vue from './demos/select/demo2.vue'
183243
import demo3Vue from './demos/select/demo3.vue'
244+
245+
const value4 = ref('')
246+
247+
const onBeforeChange = (): Promise<boolean> => {
248+
return new Promise(resolve => {
249+
FConfirmBox({
250+
title: '标题',
251+
content: '这是内容',
252+
zIndex: 2000,
253+
onConfirm: () => {
254+
resolve(true)
255+
},
256+
onCancel: () => {
257+
resolve(false)
258+
}
259+
})
260+
})
261+
}
184262
</script>

Diff for: ‎packages/fighting-design/select/src/interface.ts

+3
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ export type SelectChange = (
1616
evt: MouseEvent
1717
) => void
1818

19+
/**
20+
* 值在改变之前的回调类型
21+
*/
1922
export type SelectBeforeChange = () => Promise<boolean>
2023

2124
/**

Diff for: ‎start/src/App.vue

+30-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,31 @@
1-
<script lang="ts" setup></script>
1+
<template>
2+
<f-select v-model="value3" placeholder="请选择……" :on-before-change="onBeforeChange">
3+
<f-option :value="1">香蕉</f-option>
4+
<f-option :value="2">苹果</f-option>
5+
<f-option :value="3">哈密瓜</f-option>
6+
<f-option :value="4">樱桃</f-option>
7+
</f-select>
8+
</template>
29

3-
<template></template>
10+
<script lang="ts" setup>
11+
import { ref } from 'vue'
12+
import { FConfirmBox } from 'fighting-design'
13+
14+
const value3 = ref('')
15+
16+
const onBeforeChange = (): Promise<boolean> => {
17+
return new Promise(resolve => {
18+
FConfirmBox({
19+
title: '标题',
20+
content: '这是内容',
21+
zIndex: 2000,
22+
onConfirm: () => {
23+
resolve(true)
24+
},
25+
onCancel: () => {
26+
resolve(false)
27+
}
28+
})
29+
})
30+
}
31+
</script>

0 commit comments

Comments
 (0)