1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
| <template>
| <div
| :class="['step-item', link ? 'linkable' : null]"
| @click="go"
| >
| <span :style="titleStyle">{{title}}</span>
| <a-icon v-if="icon" :style="iconStyle" :type="icon" />
| <slot></slot>
| </div>
| </template>
|
| <script>
| const Group = {
| name: 'AStepItemGroup',
| props: {
| align: {
| type: String,
| default: 'center',
| validator(value) {
| return ['left', 'center', 'right'].indexOf(value) != -1
| }
| }
| },
| render (h) {
| return h(
| 'div',
| {attrs: {style: `text-align: ${this.align}; margin-top: 8px`}},
| [h('div', {attrs: {style: 'text-align: left; display: inline-block;'}}, [this.$slots.default])]
| )
| }
| }
|
| export default {
| name: 'AStepItem',
| Group: Group,
| props: ['title', 'icon', 'link', 'titleStyle', 'iconStyle'],
| methods: {
| go () {
| const link = this.link
| if (link) {
| this.$router.push(link)
| }
| }
| }
| }
| </script>
|
| <style lang="less" scoped>
| .step-item{
| cursor: pointer;
| }
| :global{
| .ant-steps-item-process{
| .linkable{
| color: @primary-color;
| }
| }
| }
| </style>
|
|
