Skip to content

Commit

Permalink
docs: 更新文档
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tyh2001
Tyh2001 committed May 23, 2024
1 parent ad3a89e commit 8149cfd
Show file tree
Hide file tree
Showing 4 changed files with 134 additions and 23 deletions.
22 changes: 12 additions & 10 deletions docs/components/confirm-box.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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({
Expand Down
100 changes: 89 additions & 11 deletions docs/components/select.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -145,6 +197,7 @@ import type {
SelectProps,
SelectModelValue,
SelectChange,
SelectBeforeChange,
OptionInstance,
OptionProps
} from 'fighting-design'
Expand All @@ -166,6 +219,12 @@ type SelectChange = (
) => void
```
### SelectBeforeChange
```ts
type SelectBeforeChange = () => Promise<boolean>
```
## Contributors
<a href="https://github.com/Tyh2001" target="_blank">
Expand All @@ -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>
3 changes: 3 additions & 0 deletions packages/fighting-design/select/src/interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ export type SelectChange = (
evt: MouseEvent
) => void

/**
* 值在改变之前的回调类型
*/
export type SelectBeforeChange = () => Promise<boolean>

/**
Expand Down
32 changes: 30 additions & 2 deletions start/src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 8149cfd

Please sign in to comment.