mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-17 13:20:52 +08:00
refactor(steps): clickable impl
This commit is contained in:
07akioni
parent
8fd45f06bc
commit
35b46f17db
39
src/steps/demos/enUS/click.demo.vue
Normal file
39
src/steps/demos/enUS/click.demo.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<markdown>
|
||||
# Click to switch
|
||||
|
||||
If `@update:current` is set, you can switch step by click.
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-steps v-model:current="current">
|
||||
<n-step
|
||||
title="I Me Mine"
|
||||
description="All through the day, I me mine I me mine, I me mine"
|
||||
/>
|
||||
<n-step
|
||||
title="Let It Be"
|
||||
description="When I find myself in times of trouble Mother Mary comes to me"
|
||||
/>
|
||||
<n-step
|
||||
title="Come Together"
|
||||
description="Here come old flat top He come grooving up slowly"
|
||||
/>
|
||||
<n-step
|
||||
title="Something"
|
||||
description="Something in the way she moves Attracts me like no other lover"
|
||||
/>
|
||||
</n-steps>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
const currentRef = ref<number | undefined>(1)
|
||||
return {
|
||||
current: currentRef
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -12,18 +12,20 @@ size.vue
|
||||
vertical.vue
|
||||
content.vue
|
||||
custom-icon.vue
|
||||
click.vue
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Steps Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| current | `number` | `undefined` | Currently selected in the first steps. |
|
||||
| size | `'small' \| 'medium'` | `'medium'` | Steps size. |
|
||||
| status | `'process' \| 'finish' \| 'error' \| 'wait'` | `'process'` | Steps status. |
|
||||
| vertical | `boolean` | `false` | Steps vertical. |
|
||||
| Name | Type | Default | Description | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| current | `number` | `undefined` | Currently active step index. | |
|
||||
| size | `'small' \| 'medium'` | `'medium'` | Steps size. | |
|
||||
| status | `'process' \| 'finish' \| 'error' \| 'wait'` | `'process'` | Steps status. | |
|
||||
| vertical | `boolean` | `false` | Steps vertical. | |
|
||||
| on-update:current | `(index: number) => void` | `undefined` | Callback on currently active step index changed. If it's set, step can be switched by click. | NEXT_VERSION |
|
||||
|
||||
### Step Props
|
||||
|
||||
|
||||
39
src/steps/demos/zhCN/click.demo.vue
Normal file
39
src/steps/demos/zhCN/click.demo.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<markdown>
|
||||
# 点击切换
|
||||
|
||||
当设定 `@update:current` 时，可以通过点击切换步骤。
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-steps v-model:current="current">
|
||||
<n-step
|
||||
title="I Me Mine"
|
||||
description="All through the day, I me mine I me mine, I me mine"
|
||||
/>
|
||||
<n-step
|
||||
title="Let It Be"
|
||||
description="When I find myself in times of trouble Mother Mary comes to me"
|
||||
/>
|
||||
<n-step
|
||||
title="Come Together"
|
||||
description="Here come old flat top He come grooving up slowly"
|
||||
/>
|
||||
<n-step
|
||||
title="Something"
|
||||
description="Something in the way she moves Attracts me like no other lover"
|
||||
/>
|
||||
</n-steps>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
const currentRef = ref<number | undefined>(1)
|
||||
return {
|
||||
current: currentRef
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -12,7 +12,7 @@ size.vue
|
||||
vertical.vue
|
||||
content.vue
|
||||
custom-icon.vue
|
||||
v-model.vue
|
||||
click.vue
|
||||
vertical-debug.vue
|
||||
```
|
||||
|
||||
@ -20,12 +20,13 @@ vertical-debug.vue
|
||||
|
||||
### Steps Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| current | `number` | `undefined` | 当前选中在第几步 |
|
||||
| size | `'small' \| 'medium'` | `'medium'` | 步骤条大小 |
|
||||
| status | `'process' \| 'finish' \| 'error' \| 'wait'` | `'process'` | 步骤条状态 |
|
||||
| vertical | `boolean` | `false` | 步骤条方向 |
|
||||
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| current | `number` | `undefined` | 当前选中在第几步 | |
|
||||
| size | `'small' \| 'medium'` | `'medium'` | 步骤条大小 | |
|
||||
| status | `'process' \| 'finish' \| 'error' \| 'wait'` | `'process'` | 步骤条状态 | |
|
||||
| vertical | `boolean` | `false` | 步骤条方向 | |
|
||||
| on-update:current | `(index: number) => void` | `undefined` | 更新当前第几步的回调，设定后可点击切换步骤 | NEXT_VERSION |
|
||||
|
||||
### Step Props
|
||||
|
||||
|
||||
@ -1,88 +0,0 @@
|
||||
<markdown>
|
||||
# 设置 v-model 后，Steps 变为可点击状态。
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-space vertical>
|
||||
<n-steps v-model:current="current" :status="currentStatus">
|
||||
<n-step
|
||||
title="I Me Mine"
|
||||
description="All through the day, I me mine I me mine, I me mine"
|
||||
/>
|
||||
<n-step
|
||||
title="Let It Be"
|
||||
description="When I find myself in times of trouble Mother Mary comes to me"
|
||||
/>
|
||||
<n-step
|
||||
title="Come Together"
|
||||
description="Here come old flat top He come grooving up slowly"
|
||||
/>
|
||||
<n-step
|
||||
title="Something"
|
||||
description="Something in the way she moves Attracts me like no other lover"
|
||||
/>
|
||||
</n-steps>
|
||||
<n-space>
|
||||
<n-button-group>
|
||||
<n-button @click="prev">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<md-arrow-round-back />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
<n-button @click="next">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<md-arrow-round-forward />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-button-group>
|
||||
<n-radio-group v-model:value="currentStatus" size="medium" name="basic">
|
||||
<n-radio-button value="error">
|
||||
Error
|
||||
</n-radio-button>
|
||||
<n-radio-button value="process">
|
||||
Process
|
||||
</n-radio-button>
|
||||
<n-radio-button value="wait">
|
||||
Wait
|
||||
</n-radio-button>
|
||||
<n-radio-button value="finish">
|
||||
Finish
|
||||
</n-radio-button>
|
||||
</n-radio-group>
|
||||
</n-space>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { MdArrowRoundBack, MdArrowRoundForward } from '@vicons/ionicons4'
|
||||
import { StepsProps } from 'naive-ui'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MdArrowRoundBack,
|
||||
MdArrowRoundForward
|
||||
},
|
||||
setup () {
|
||||
const currentRef = ref<number | undefined>(1)
|
||||
return {
|
||||
currentStatus: ref<StepsProps['status']>('process'),
|
||||
current: currentRef,
|
||||
next () {
|
||||
if (currentRef.value === undefined) currentRef.value = 1
|
||||
else if (currentRef.value >= 4) currentRef.value = undefined
|
||||
else currentRef.value++
|
||||
},
|
||||
prev () {
|
||||
if (currentRef.value === 0) currentRef.value = undefined
|
||||
else if (currentRef.value === undefined) currentRef.value = 4
|
||||
else currentRef.value--
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -122,25 +122,29 @@ export default defineComponent({
|
||||
)
|
||||
: undefined
|
||||
|
||||
const handleStepClick = (): void => {
|
||||
const handleStepClick = computed((): undefined | (() => void) => {
|
||||
const { onUpdateCurrent, 'onUpdate:current': _onUpdateCurrent } =
|
||||
stepsProps
|
||||
if (onUpdateCurrent) {
|
||||
call(onUpdateCurrent, props.internalIndex)
|
||||
}
|
||||
if (_onUpdateCurrent) {
|
||||
call(_onUpdateCurrent, props.internalIndex)
|
||||
}
|
||||
}
|
||||
return onUpdateCurrent || _onUpdateCurrent
|
||||
? () => {
|
||||
if (onUpdateCurrent) {
|
||||
call(onUpdateCurrent, props.internalIndex)
|
||||
}
|
||||
if (_onUpdateCurrent) {
|
||||
call(_onUpdateCurrent, props.internalIndex)
|
||||
}
|
||||
}
|
||||
: undefined
|
||||
})
|
||||
return {
|
||||
stepsSlots,
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
vertical: verticalRef,
|
||||
mergedStatus: mergedStatusRef,
|
||||
handleStepClick,
|
||||
cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
|
||||
themeClass: themeClassHandle?.themeClass,
|
||||
onRender: themeClassHandle?.onRender,
|
||||
handleStepClick
|
||||
onRender: themeClassHandle?.onRender
|
||||
}
|
||||
},
|
||||
render () {
|
||||
@ -164,6 +168,7 @@ export default defineComponent({
|
||||
<div
|
||||
class={[
|
||||
`${mergedClsPrefix}-step`,
|
||||
handleStepClick && `${mergedClsPrefix}-step--clickable`,
|
||||
this.themeClass,
|
||||
descriptionNode && `${mergedClsPrefix}-step--show-description`,
|
||||
`${mergedClsPrefix}-step--${this.mergedStatus}-status`
|
||||
|
||||
@ -11,15 +11,11 @@ import {
|
||||
} from 'vue'
|
||||
import type { MergedTheme, ThemeProps } from '../../_mixins'
|
||||
import { useConfig, useTheme } from '../../_mixins'
|
||||
import { createInjectionKey, flatten, getSlot } from '../../_utils'
|
||||
import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils'
|
||||
import type { StepsTheme } from '../styles'
|
||||
import { stepsLight } from '../styles'
|
||||
import style from './styles/index.cssr'
|
||||
import {
|
||||
createInjectionKey,
|
||||
ExtractPublicPropTypes,
|
||||
flatten,
|
||||
getSlot
|
||||
} from '../../_utils'
|
||||
import type { StepsTheme } from '../styles'
|
||||
|
||||
function stepWithIndex (step: VNodeChild, i: number): VNode | null {
|
||||
if (typeof step !== 'object' || step === null || Array.isArray(step)) {
|
||||
@ -46,8 +42,12 @@ const stepsProps = {
|
||||
default: 'medium'
|
||||
},
|
||||
vertical: Boolean,
|
||||
'onUpdate:current': Function as PropType<(current: number) => void>,
|
||||
onUpdateCurrent: Function as PropType<(current: number) => void>
|
||||
'onUpdate:current': [Function, Array] as PropType<
|
||||
MaybeArray<(current: number) => void>
|
||||
>,
|
||||
onUpdateCurrent: [Function, Array] as PropType<
|
||||
MaybeArray<(current: number) => void>
|
||||
>
|
||||
}
|
||||
|
||||
export interface StepsInjection {
|
||||
|
||||
@ -22,8 +22,10 @@ export default cB('steps', `
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
`, [
|
||||
cM('clickable', `
|
||||
cursor: pointer;
|
||||
`),
|
||||
c('&:last-child', [
|
||||
cB('step-splitor', 'display: none;')
|
||||
])
|
||||
|
||||
Loading…
Reference in New Issue
Block a user