feat(steps): Add wizard style step bar itemStyle differentiated configuration (#3594)
* fix: 去掉步骤条最大宽度限制 * fix: 增加向导型步骤条itemStyle差异化配置
This commit is contained in:
parent
06a3daee6c
commit
1900da82e4
|
@ -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']
|
||||||
},
|
},
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 })
|
||||||
|
|
|
@ -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="
|
||||||
|
|
Loading…
Reference in New Issue