feat(steps): Add wizard style step bar itemStyle differentiated configuration (#3594)

* fix: 去掉步骤条最大宽度限制

* fix: 增加向导型步骤条itemStyle差异化配置
This commit is contained in:
chenxi-20 2025-07-18 14:29:29 +08:00 committed by GitHub
parent 06a3daee6c
commit 1900da82e4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 15 additions and 6 deletions

View File

@ -120,13 +120,13 @@ export default {
type: 'Object', type: 'Object',
defaultValue: '{}', defaultValue: '{}',
meta: { meta: {
stable: '3.24.0' stable: '3.26.0'
}, },
desc: { desc: {
'zh-CN': 'zh-CN':
'自定义单链型步骤条块的内联样式,数据类型为{ [statusName: string]: styleObject },不同状态可根据key值差异化配置 key值为status字段的值value值为对应节点的样式对象', '步骤条块的内联样式,数据类型为{ [statusName: string]: styleObject },不同状态可根据key值差异化配置 key值为status字段的值value值为对应节点的样式对象',
'en-US': 'en-US':
'Customize the inline style of single chain step blocks, with data type {[statusName: string]: styleObject}. Different states can be configured differently based on key values, where the key value is the value of the status field and the value value is the style object of the corresponding node' 'Customize the inline style of step blocks, with data type {[statusName: string]: styleObject}. Different states can be configured differently based on key values, where the key value is the value of the status field and the value value is the style object of the corresponding node'
}, },
mode: ['mobile-first'] mode: ['mobile-first']
}, },

View File

@ -1,5 +1,12 @@
<template> <template>
<tiny-steps ref="steps" advanced :data="data" :active="advancedActive" @click="advancedClick"></tiny-steps> <tiny-steps
ref="steps"
advanced
:item-style="{ disabled: { background: 'yellow', maxWidth: '360px' } }"
:data="data"
:active="advancedActive"
@click="advancedClick"
></tiny-steps>
</template> </template>
<script> <script>

View File

@ -31,6 +31,7 @@
<template #block="{ slotScoped: { node, index } }"> <template #block="{ slotScoped: { node, index } }">
<div <div
data-tag="tiny-steps-block" data-tag="tiny-steps-block"
:style="itemStyle[node.status]"
:class=" :class="
m( m(
gcls('steps-block'), gcls('steps-block'),
@ -201,7 +202,8 @@ export default defineComponent({
'noArrow', 'noArrow',
'flex', 'flex',
'size', 'size',
'contentCenter' 'contentCenter',
'itemStyle'
], ],
setup(props: any, context: any) { setup(props: any, context: any) {
return setup({ props, context, renderless, api, classes }) return setup({ props, context, renderless, api, classes })

View File

@ -45,7 +45,7 @@
<div <div
data-tag="tiny-steps-block" data-tag="tiny-steps-block"
v-for="(node, index) in data" v-for="(node, index) in data"
:style="itemStyle[node.status || 'none']" :style="itemStyle[node.status]"
v-show="isVisibleHandler(index) === 'visible'" v-show="isVisibleHandler(index) === 'visible'"
:key="index" :key="index"
:class=" :class="