feat(step): adds disabled prop

This commit is contained in:
07akioni 2022-05-30 02:59:04 +08:00
parent 35b46f17db
commit 8ffa5bb7bf
7 changed files with 21 additions and 11 deletions

View File

@ -29,6 +29,7 @@
- `n-data-table` adds `on-scroll` prop, closes [#3025](https://github.com/TuSimple/naive-ui/issues/3025).
- `n-upload` adds `is-error-state` prop, closes [#2975](https://github.com/TuSimple/naive-ui/issues/2975).
- `n-date-picker`'s `shortcuts` prop supports readonly tuple type.
- `n-step` adds `disabled` prop.
## 2.29.0

View File

@ -29,6 +29,7 @@
- `n-data-table` 新增 `on-scroll` 属性,关闭 [#3025](https://github.com/TuSimple/naive-ui/issues/3025)
- `n-upload` 新增 `is-error-state` 属性,关闭 [#2975](https://github.com/TuSimple/naive-ui/issues/2975)
- `n-date-picker``shortcuts` 属性支持 readonly tuple 类型
- `n-step` 新增 `disabled` 属性
## 2.29.0

View File

@ -19,6 +19,7 @@ If `@update:current` is set, you can switch step by click.
description="Here come old flat top He come grooving up slowly"
/>
<n-step
disabled
title="Something"
description="Something in the way she moves Attracts me like no other lover"
/>

View File

@ -29,11 +29,12 @@ click.vue
### Step Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| description | `string` | `undefined` | Step description. |
| status | `'process' \| 'finish' \| 'error' \| 'wait'` | `undefined` | Step status. |
| title | `string` | `undefined` | Step title. |
| Name | Type | Default | Description | Version |
| --- | --- | --- | --- | --- |
| description | `string` | `undefined` | Step description. | |
| disabled | `boolean` | `false` | Whether it's clickable. | NEXT_VERSION |
| status | `'process' \| 'finish' \| 'error' \| 'wait'` | `undefined` | Step status. | |
| title | `string` | `undefined` | Step title. | |
### Steps Slots

View File

@ -19,6 +19,7 @@
description="Here come old flat top He come grooving up slowly"
/>
<n-step
disabled
title="Something"
description="Something in the way she moves Attracts me like no other lover"
/>

View File

@ -30,11 +30,12 @@ vertical-debug.vue
### Step Props
| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| description | `string` | `undefined` | 节点描述 |
| status | `'process' \| 'finish' \| 'error' \| 'wait'` | `undefined` | 节点状态 |
| title | `string` | `undefined` | 节点标题 |
| 名称 | 类型 | 默认值 | 说明 | 版本 |
| --- | --- | --- | --- | --- |
| description | `string` | `undefined` | 节点描述 | |
| disabled | `boolean` | `false` | 是否可点击 | NEXT_VERSION |
| status | `'process' \| 'finish' \| 'error' \| 'wait'` | `undefined` | 节点状态 | |
| title | `string` | `undefined` | 节点标题 | |
### Steps Slots

View File

@ -26,6 +26,7 @@ const stepProps = {
status: String as PropType<'process' | 'finish' | 'error' | 'wait'>,
title: String,
description: String,
disabled: Boolean,
// index will be filled by parent steps, not user
internalIndex: {
type: Number,
@ -123,6 +124,7 @@ export default defineComponent({
: undefined
const handleStepClick = computed((): undefined | (() => void) => {
if (props.disabled) return undefined
const { onUpdateCurrent, 'onUpdate:current': _onUpdateCurrent } =
stepsProps
return onUpdateCurrent || _onUpdateCurrent
@ -168,7 +170,9 @@ export default defineComponent({
<div
class={[
`${mergedClsPrefix}-step`,
handleStepClick && `${mergedClsPrefix}-step--clickable`,
!this.disabled &&
handleStepClick &&
`${mergedClsPrefix}-step--clickable`,
this.themeClass,
descriptionNode && `${mergedClsPrefix}-step--show-description`,
`${mergedClsPrefix}-step--${this.mergedStatus}-status`