forked from opentiny/tiny-vue
feat(steps): 增加dot属性设置纵向点状式的新规范步骤条 (#2042)
This commit is contained in:
chenxi-20
GitHub
parent
5b0176ee9a
commit
a62b3fa6a4
|
|
@ -62,6 +62,20 @@ export default {
|
|||
},
|
||||
mode: ['mobile-first']
|
||||
},
|
||||
{
|
||||
name: 'dot',
|
||||
type: 'Boolean',
|
||||
defaultValue: 'false',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '点状形步骤条，当值只支持垂直样式',
|
||||
'en-US': 'Dot shaped step bar, values only support vertical style'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'line-dot'
|
||||
},
|
||||
{
|
||||
name: 'duration',
|
||||
type: 'number',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<tiny-steps dot vertical :data="data" :active="active" @click="advancedClick"></tiny-steps>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { Steps as TinySteps, Modal } from '@opentiny/vue'
|
||||
|
||||
const active = ref(1)
|
||||
const data = reactive([
|
||||
{
|
||||
name: '已完成',
|
||||
status: 'done',
|
||||
description: '已完成的描述'
|
||||
},
|
||||
{ name: '当前', status: 'doing', description: '当前步骤的描述' },
|
||||
{ name: '错误/失败', status: 'error', description: '错误或失败步骤的描述' },
|
||||
{ name: '未进行', description: '未进行步骤的描述' },
|
||||
{ name: '未进行' },
|
||||
{
|
||||
name: '禁用',
|
||||
status: 'disabled',
|
||||
description: '禁用的描述'
|
||||
}
|
||||
])
|
||||
|
||||
const advancedClick = (index, node) => {
|
||||
active.value = index
|
||||
|
||||
Modal.message({ message: `节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`, status: 'info' })
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<tiny-steps dot vertical :data="data" :active="active" @click="advancedClick"></tiny-steps>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Steps, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinySteps: Steps
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 1,
|
||||
data: [
|
||||
{
|
||||
name: '已完成',
|
||||
status: 'done',
|
||||
description: '已完成的描述'
|
||||
},
|
||||
{ name: '当前', status: 'doing', description: '当前步骤的描述' },
|
||||
{ name: '错误/失败', status: 'error', description: '错误或失败步骤的描述' },
|
||||
{ name: '未进行', description: '未进行步骤的描述' },
|
||||
{ name: '未进行' },
|
||||
{
|
||||
name: '禁用',
|
||||
status: 'disabled',
|
||||
description: '禁用的描述'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
advancedClick(index, node) {
|
||||
this.active = index
|
||||
|
||||
Modal.message({ message: `节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`, status: 'info' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -14,17 +14,18 @@ export default {
|
|||
active: 1,
|
||||
data: [
|
||||
{
|
||||
name: '默认 Basic Info',
|
||||
status: '',
|
||||
description: '默认无状态'
|
||||
name: '已完成',
|
||||
status: 'done',
|
||||
description: '已完成的描述'
|
||||
},
|
||||
{ name: '已完成 BOQ Info', status: 'done', description: 'done 已完成' },
|
||||
{ name: '进行中 BOQ Info', status: 'doing', description: 'doing 进行中' },
|
||||
{ name: '错误 BBQ Info', status: 'error', description: 'error 错误' },
|
||||
{ name: '当前', status: 'doing', description: '当前步骤的描述' },
|
||||
{ name: '错误/失败', status: 'error', description: '错误或失败步骤的描述' },
|
||||
{ name: '未进行', description: '未进行步骤的描述' },
|
||||
{ name: '未进行' },
|
||||
{
|
||||
name: '已禁用 Involved Parties',
|
||||
name: '禁用',
|
||||
status: 'disabled',
|
||||
description: 'disabled 已禁用'
|
||||
description: '禁用的描述'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export default {
|
|||
'en-US': 'Horizontal Chain Steps'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过添加 <code>line</code> 属性用作横向单链型步骤条。</p>',
|
||||
'zh-CN': '<p>通过添加 <code>line</code> 用作横向单链型步骤条。</p>',
|
||||
'en-US': '<p>Use the <code>line</code> property to create a horizontal chain steps.</p>'
|
||||
},
|
||||
codeFiles: ['line-horizontal.vue']
|
||||
|
|
@ -21,11 +21,23 @@ export default {
|
|||
'en-US': 'Vertical Line Steps'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>使用 <code>line</code> 与 <code>vertical</code> 属性设置为条形步骤条。</p>\n',
|
||||
'zh-CN': '<p>使用 <code>line</code> 与 <code>vertical</code> 设置为条形步骤条。</p>\n',
|
||||
'en-US': 'Use <code>line</code> and <code>vertical<</code> attribute to set vertical steps.'
|
||||
},
|
||||
codeFiles: ['line-vertical.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'line-dot',
|
||||
name: {
|
||||
'zh-CN': '垂直点状型',
|
||||
'en-US': 'Vertical dot Steps'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>使用 <code>dot</code> 与 <code>vertical</code> 设置为垂直点状形。</p>\n',
|
||||
'en-US': 'Use<code>dot</code>and<code>vertical</code>to set it as a vertical dot shape.'
|
||||
},
|
||||
codeFiles: ['line-dot.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'advanced-steps',
|
||||
name: {
|
||||
|
|
@ -46,7 +58,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>步骤条两种模式支持 <code>size</code> 属性设置尺寸：</p>\n <p>1. <code>line</code> 单链型模式支持 <code>mini</code>、<code>small</code>、<code>medium</code>、<code>large</code> 4 种尺寸，默认值为 <code>medium</code>。</p>\n <p>2. <code>advanced</code> 高级向导模式支持 <code>medium</code>、<code>large</code> 2 种尺寸，默认值为 <code>medium</code>。</p>',
|
||||
'<p>步骤条两种模式支持 <code>size</code> 设置尺寸：</p>\n <p>1. <code>line</code> 单链型模式支持 <code>mini</code>、<code>small</code>、<code>medium</code>、<code>large</code> 4 种尺寸，默认值为 <code>medium</code>。</p>\n <p>2. <code>advanced</code> 高级向导模式支持 <code>medium</code>、<code>large</code> 2 种尺寸，默认值为 <code>medium</code>。</p>',
|
||||
'en-US':
|
||||
'<p>Two modes of the steps support the <code>size</code> setting:</p>\n <p>1. The <code>line</code> mode supports 4 sizes: <code>mini</code>, <code>small</code>, <code>medium</code>, and <code>large</code>, with a default value of <code>medium</code>.</p>\n <p>2. The <code>advanced</code> mode support 2 sizes: <code>medium</code>, and <code>large</code>, with a default value of <code>medium</code>.</p>'
|
||||
},
|
||||
|
|
@ -60,7 +72,7 @@ export default {
|
|||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>使用 <code>space</code> 属性配置步骤条节点的宽度。</p><p>通过 <code>flex</code> 属性开启总宽度自适应，节点等宽，撑满父容器，节点名称超出省略。</p>',
|
||||
'<p>使用 <code>space</code> 配置步骤条节点的宽度。</p><p>通过 <code>flex</code> 开启总宽度自适应，节点等宽，撑满父容器，节点名称超出省略。</p>',
|
||||
'en-US':
|
||||
'<p>Using <code>space</code> attribute to set node width. </p><p>Enable responsive total width using the <code>flex</code> property, with equal width for nodes that fill the parent container, and node names that exceed the container width are truncated.</p>'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
@steps-senior-prefix-cls: ~'@{css-prefix}steps-senior';
|
||||
@steps-line-prefix-cls: ~'@{css-prefix}steps-line';
|
||||
@steps-standard-prefix-cls: ~'@{css-prefix}steps-standard';
|
||||
@steps-dot-prefix-cls: ~'@{css-prefix}steps-dot';
|
||||
|
||||
.@{steps-prefix-cls},
|
||||
.@{timeline-prefix-cls} {
|
||||
|
|
@ -1078,6 +1079,102 @@
|
|||
}
|
||||
}
|
||||
|
||||
.@{steps-dot-prefix-cls} {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.@{steps-prefix-cls} {
|
||||
&-block.fault {
|
||||
& > .block-left .left-dot {
|
||||
border-color: #f23030;
|
||||
}
|
||||
|
||||
& > .block-right .title-vertical {
|
||||
color: #f23030;
|
||||
}
|
||||
}
|
||||
|
||||
&-block.disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
& > .block-right .title-vertical {
|
||||
color: #c2c2c2;
|
||||
}
|
||||
}
|
||||
|
||||
&-block {
|
||||
display: flex;
|
||||
|
||||
&.done,
|
||||
&.doing,
|
||||
&.active:not(.fault, .disabled) {
|
||||
& > .block-left .left-dot {
|
||||
border-color: #191919;
|
||||
}
|
||||
}
|
||||
|
||||
&.done,
|
||||
&.doing {
|
||||
& > .block-left > .left-line {
|
||||
background-color: #191919;
|
||||
}
|
||||
|
||||
& > .block-right .title-vertical {
|
||||
color: #191919;
|
||||
}
|
||||
}
|
||||
|
||||
&.active:not(.fault, .disabled) {
|
||||
& > .block-left > .left-dot {
|
||||
background-color: #191919;
|
||||
}
|
||||
}
|
||||
|
||||
& > .block-left {
|
||||
margin-top: 6.5px;
|
||||
margin-right: 12px;
|
||||
|
||||
& .left-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 2px solid #c2c2c2;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
& .left-line {
|
||||
margin: 4px auto 0px;
|
||||
height: calc(100% - 11.5px);
|
||||
width: 1px;
|
||||
background-color: #dbdbdb;
|
||||
}
|
||||
}
|
||||
|
||||
& > .block-right {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding-bottom: 12px;
|
||||
|
||||
.title-vertical {
|
||||
color: #595959;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 12px;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
& > .block-left .left-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{timeline-prefix-cls} {
|
||||
position: relative;
|
||||
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ export const stepsProps = {
|
|||
default: false
|
||||
},
|
||||
line: Boolean,
|
||||
dot: Boolean, // tiny新增
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 300
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
|
|||
import PcStandardTemplate from './pc/pc-standard.vue'
|
||||
import PcAdvancedTemplate from './pc/pc-advanced.vue'
|
||||
import PcLineTemplate from './pc/pc-line.vue'
|
||||
import PcDotTemplate from './pc/pc-dot.vue'
|
||||
import '@opentiny/vue-theme/steps/index.less'
|
||||
|
||||
const template = (mode, props) => {
|
||||
|
|
@ -10,6 +11,8 @@ const template = (mode, props) => {
|
|||
return PcAdvancedTemplate
|
||||
} else if (props.line) {
|
||||
return PcLineTemplate
|
||||
} else if (props.dot) {
|
||||
return PcDotTemplate
|
||||
} else {
|
||||
return PcStandardTemplate
|
||||
}
|
||||
|
|
@ -48,6 +51,7 @@ export default defineComponent({
|
|||
vertical: Boolean,
|
||||
advanced: Boolean,
|
||||
line: Boolean,
|
||||
dot: Boolean,
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 300
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<div data-tag="tiny-steps" :class="['tiny-steps tiny-steps-dot', size, { vertical }]">
|
||||
<div
|
||||
v-for="(node, index) in data"
|
||||
:key="index"
|
||||
:class="[
|
||||
'tiny-steps-block',
|
||||
size,
|
||||
node[statusField] === 'error' ? 'fault' : node[statusField],
|
||||
{ 'active': index === active },
|
||||
{ 'not-vertical': !vertical },
|
||||
{ 'flex-non': index === data.length - 1 && !vertical }
|
||||
]"
|
||||
@click="$emit('click', index, node, $event)"
|
||||
>
|
||||
<div :class="['block-left', { 'active': index === active }]">
|
||||
<div :class="['left-dot', { 'not-vertical': !vertical }]"></div>
|
||||
|
||||
<div
|
||||
:class="[
|
||||
'left-line',
|
||||
{ 'hide': !vertical && index === data.length - 1 },
|
||||
{ 'acetate': index === data.length - 1 },
|
||||
{ 'not-vertical': !vertical }
|
||||
]"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<slot name="item" :slot-scope="node" :index="index">
|
||||
<div class="block-right">
|
||||
<!-- title -->
|
||||
<div :title="node[nameField]" :class="['title-vertical', { 'not-vertical': !vertical }]">
|
||||
{{ node[nameField] }}
|
||||
</div>
|
||||
<!-- description -->
|
||||
<div v-if="node[descriptionField]" :class="['description', { 'not-vertical': !vertical }]">
|
||||
{{ node[descriptionField] }}
|
||||
</div>
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { renderless, api } from '@opentiny/vue-renderless/steps/vue'
|
||||
import { props, setup, defineComponent } from '@opentiny/vue-common'
|
||||
|
||||
export default defineComponent({
|
||||
emits: ['click'],
|
||||
props: [...props, 'vertical', 'nameField', 'statusField', 'data', 'active', 'descriptionField', 'size'],
|
||||
setup(props: any, context: any) {
|
||||
return setup({ props, context, renderless, api })
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in New Issue