Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="aa-steplist" :class="{ 'is-horizontal': direction === 'horizontal' }">
|
||||
<div class="aa-steplist-item" v-for="(it, i) in steps" :key="i"
|
||||
:class="['is-' + it.status, { 'is-clickable': clickable }]" @click="clickable && $emit('step-click', i)">
|
||||
<span class="aa-steplist-node">{{ nodeText(it, i) }}</span>
|
||||
<span class="aa-steplist-line"></span>
|
||||
<div class="aa-steplist-body">
|
||||
<div class="aa-steplist-title">{{ it.title }}</div>
|
||||
<div class="aa-steplist-desc" v-if="it.desc">{{ it.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AaStepList',
|
||||
props: {
|
||||
steps: { type: Array, default: function () { return []; } },
|
||||
direction: { type: String, default: 'vertical' },
|
||||
clickable: { type: Boolean, default: false }
|
||||
},
|
||||
methods: {
|
||||
nodeText: function (it, i) {
|
||||
if (it.status === 'done') return '✓';
|
||||
if (it.status === 'error') return '✕';
|
||||
return String(i + 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="./StepList.css"></style>
|
||||
Reference in New Issue
Block a user