chenhaodong / mew-iview

Commit d4cd421cc273080bf4accad71dd23dd804e74579

Authored by 梁灏
1 parent 0460a1e8

update Steps

Showing 3 changed files with 157 additions and 82 deletions   Show diff stats
Inline Side-by-side
examples/routers/steps.vue
  Show/Hide comments   View file @d4cd421
1 1 <template>
2 2 <div>
3   - <Steps :current="1" size="small">
4   - <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
5   - <Step title="进行中" content="这里是该步骤的描述信息"></Step>
6   - <Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
7   - <Step title="待进行" content="这里是该步骤的描述信息"></Step>
8   - </Steps>
9   - <br>
10   - <Steps :current="2">
11   - <Step title="已完成"></Step>
12   - <Step title="进行中"></Step>
13   - <Step title="待进行"></Step>
14   - <Step title="待进行"></Step>
15   - </Steps>
16   - <br>
17   - <Steps :current="1" size="small">
18   - <Step title="已完成"></Step>
19   - <Step title="进行中"></Step>
20   - <Step title="待进行"></Step>
21   - <Step title="待进行"></Step>
22   - </Steps>
23   - <br>
24   - <Steps :current="1" direction="vertical" size="small">
25   - <Step title="注册" icon="person-add"></Step>
26   - <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
27   - <Step title="验证邮箱" icon="email"></Step>
28   - </Steps>
29   - <Steps :current="1" direction="vertical">
30   - <Step title="注册" icon="person-add"></Step>
31   - <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
32   - <Step title="验证邮箱" icon="email"></Step>
33   - </Steps>
34   - <Steps :current="-1" direction="vertical">
35   - <Step title="注册" icon="person-add"></Step>
36   - <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
37   - <Step title="验证邮箱" status="finish" icon="email"></Step>
38   - </Steps>
39   - <br>
40   - <p>当前正在进行第 {{ current + 1 }} 步</p>
41   - <Steps :current="current">
42   - <Step title="步骤1"></Step>
43   - <Step title="步骤2"></Step>
44   - <Step title="步骤3"></Step>
45   - <Step title="步骤4"></Step>
46   - </Steps>
47   - <br>
48   - <i-button type="primary" @click.native="next">下一步</i-button>
49   - <br><br><br>
50   - <Steps :current="1" direction="vertical" size="small">
51   - <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
52   - <Step title="进行中" content="这里是该步骤的描述信息"></Step>
53   - <Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
54   - <Step title="待进行" content="这里是该步骤的描述信息"></Step>
55   - </Steps>
56   - <br><br>
57   - <Steps :current="1" status="error">
58   - <Step title="已完成" content="这里是该步骤的描述信息"></Step>
59   - <Step title="进行中" content="这里是该步骤的描述信息"></Step>
60   - <Step title="待进行" content="这里是该步骤的描述信息"></Step>
61   - <Step title="待进行" content="这里是该步骤的描述信息"></Step>
62   - </Steps>
63   - <Steps direction="vertical" :current="3">
64   - <Step title="已完成" content="这里是该步骤的描述信息">
65   - <div style="font-size: 16px; color: green">这里是该步骤的描述信息1</div>
66   - </Step>
67   - <Step title="进行中" content="这里是该步骤的描述信息">
68   - <div style="font-size: 24px; color: red">这里是该步骤的描述信息2</div>
69   - </Step>
70   - <Step title="待进行" content="这里是该步骤的描述信息">
71   - <div style="font-size: 46px; color: blue">这里是该步骤的描述信息3</div>
72   - </Step>
73   - <Step title="待进行" content="这里是该步骤的描述信息">
74   - <div style="font-size: 24px; color: green">这里是该步骤的描述信息4</div>
75   - </Step>
  3 + <Steps :current="index">
  4 + <!--<Step title="开始"></Step>-->
  5 + <Step v-for="(item, index) in activitiList" :title="item.approveUserName" :key="index" :content="item.startTime"></Step>
  6 + <!--<Step title="结束"></Step>-->
76 7 </Steps>
  8 + <Button @click="change">change</Button>
  9 + <br><br><br><br>
  10 + <hr>
  11 + <!--<Steps :current="1" size="small">-->
  12 + <!--<Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
  13 + <!--<Step title="进行中" content="这里是该步骤的描述信息"></Step>-->
  14 + <!--<Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
  15 + <!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
  16 + <!--</Steps>-->
  17 + <!--<br>-->
  18 + <!--<Steps :current="2">-->
  19 + <!--<Step title="已完成"></Step>-->
  20 + <!--<Step title="进行中"></Step>-->
  21 + <!--<Step title="待进行"></Step>-->
  22 + <!--<Step title="待进行"></Step>-->
  23 + <!--</Steps>-->
  24 + <!--<br>-->
  25 + <!--<Steps :current="1" size="small">-->
  26 + <!--<Step title="已完成"></Step>-->
  27 + <!--<Step title="进行中"></Step>-->
  28 + <!--<Step title="待进行"></Step>-->
  29 + <!--<Step title="待进行"></Step>-->
  30 + <!--</Steps>-->
  31 + <!--<br>-->
  32 + <!--<Steps :current="1" direction="vertical" size="small">-->
  33 + <!--<Step title="注册" icon="person-add"></Step>-->
  34 + <!--<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
  35 + <!--<Step title="验证邮箱" icon="email"></Step>-->
  36 + <!--</Steps>-->
  37 + <!--<Steps :current="1" direction="vertical">-->
  38 + <!--<Step title="注册" icon="person-add"></Step>-->
  39 + <!--<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
  40 + <!--<Step title="验证邮箱" icon="email"></Step>-->
  41 + <!--</Steps>-->
  42 + <!--<Steps :current="-1" direction="vertical">-->
  43 + <!--<Step title="注册" icon="person-add"></Step>-->
  44 + <!--<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
  45 + <!--<Step title="验证邮箱" status="finish" icon="email"></Step>-->
  46 + <!--</Steps>-->
  47 + <!--<br>-->
  48 + <!--<p>当前正在进行第 {{ current + 1 }} 步</p>-->
  49 + <!--<Steps :current="current">-->
  50 + <!--<Step title="步骤1"></Step>-->
  51 + <!--<Step title="步骤2"></Step>-->
  52 + <!--<Step title="步骤3"></Step>-->
  53 + <!--<Step title="步骤4"></Step>-->
  54 + <!--</Steps>-->
  55 + <!--<br>-->
  56 + <!--<i-button type="primary" @click.native="next">下一步</i-button>-->
  57 + <!--<br><br><br>-->
  58 + <!--<Steps :current="1" direction="vertical" size="small">-->
  59 + <!--<Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
  60 + <!--<Step title="进行中" content="这里是该步骤的描述信息"></Step>-->
  61 + <!--<Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
  62 + <!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
  63 + <!--</Steps>-->
  64 + <!--<br><br>-->
  65 + <!--<Steps :current="1" status="error">-->
  66 + <!--<Step title="已完成" content="这里是该步骤的描述信息"></Step>-->
  67 + <!--<Step title="进行中" content="这里是该步骤的描述信息"></Step>-->
  68 + <!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
  69 + <!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
  70 + <!--</Steps>-->
  71 + <!--<Steps direction="vertical" :current="3">-->
  72 + <!--<Step title="已完成" content="这里是该步骤的描述信息">-->
  73 + <!--<div style="font-size: 16px; color: green">这里是该步骤的描述信息1</div>-->
  74 + <!--</Step>-->
  75 + <!--<Step title="进行中" content="这里是该步骤的描述信息">-->
  76 + <!--<div style="font-size: 24px; color: red">这里是该步骤的描述信息2</div>-->
  77 + <!--</Step>-->
  78 + <!--<Step title="待进行" content="这里是该步骤的描述信息">-->
  79 + <!--<div style="font-size: 46px; color: blue">这里是该步骤的描述信息3</div>-->
  80 + <!--</Step>-->
  81 + <!--<Step title="待进行" content="这里是该步骤的描述信息">-->
  82 + <!--<div style="font-size: 24px; color: green">这里是该步骤的描述信息4</div>-->
  83 + <!--</Step>-->
  84 + <!--</Steps>-->
77 85 </div>
78 86 </template>
79 87 <script>
... ... @@ -84,7 +92,35 @@
84 92 data () {
85 93 return {
86 94 total: 512,
87   - current: 0
  95 + current: 0,
  96 + index:0,
  97 + activitiList:[
  98 + {
  99 + approveUserName:'123',
  100 + startTime:'1'
  101 + },{
  102 + approveUserName:'123',
  103 + startTime:'2'
  104 + }
  105 + ],
  106 + changeList:[
  107 + {
  108 + approveUserName:'456',
  109 + startTime:'1'
  110 + },{
  111 + approveUserName:'456',
  112 + startTime:'2'
  113 + },{
  114 + approveUserName:'456',
  115 + startTime:'3'
  116 + },{
  117 + approveUserName:'456',
  118 + startTime:'4'
  119 + },{
  120 + approveUserName:'456',
  121 + startTime:'5'
  122 + }
  123 + ]
88 124 }
89 125 },
90 126 computed: {
... ... @@ -97,7 +133,13 @@
97 133 } else {
98 134 this.current += 1;
99 135 }
  136 + },
  137 + change () {
  138 + this.activitiList = this.activitiList.concat(this.changeList);
100 139 }
  140 + },
  141 + mounted () {
  142 +// this.change();
101 143 }
102 144 }
103 145 </script>
... ...
src/components/steps/step.vue
  Show/Hide comments   View file @d4cd421
... ... @@ -16,6 +16,7 @@
16 16 </div>
17 17 </template>
18 18 <script>
  19 + import Emitter from '../../mixins/emitter';
19 20 import { oneOf } from '../../utils/assist';
20 21  
21 22 const prefixCls = 'ivu-steps';
... ... @@ -23,6 +24,7 @@
23 24  
24 25 export default {
25 26 name: 'Step',
  27 + mixins: [ Emitter ],
26 28 props: {
27 29 status: {
28 30 validator (value) {
... ... @@ -49,9 +51,6 @@
49 51 currentStatus: ''
50 52 };
51 53 },
52   - created () {
53   - this.currentStatus = this.status;
54   - },
55 54 computed: {
56 55 wrapClasses () {
57 56 return [
... ... @@ -97,6 +96,15 @@
97 96 this.$parent.setNextError();
98 97 }
99 98 }
  99 + },
  100 + created () {
  101 + this.currentStatus = this.status;
  102 + },
  103 + mounted () {
  104 + this.dispatch('Steps', 'append');
  105 + },
  106 + beforeDestroy () {
  107 + this.dispatch('Steps', 'remove');
100 108 }
101 109 };
102 110 </script>
... ...
src/components/steps/steps.vue
  Show/Hide comments   View file @d4cd421
... ... @@ -8,6 +8,21 @@
8 8  
9 9 const prefixCls = 'ivu-steps';
10 10  
  11 + function debounce(fn) {
  12 + let waiting;
  13 + return function() {
  14 + if (waiting) return;
  15 + waiting = true;
  16 + const context = this,
  17 + args = arguments;
  18 + const later = function() {
  19 + waiting = false;
  20 + fn.apply(context, args);
  21 + };
  22 + this.$nextTick(later);
  23 + };
  24 + }
  25 +
11 26 export default {
12 27 name: 'Steps',
13 28 props: {
... ... @@ -44,11 +59,6 @@
44 59 ];
45 60 }
46 61 },
47   - mounted () {
48   - this.updateChildProps(true);
49   - this.setNextError();
50   - this.updateCurrent(true);
51   - },
52 62 methods: {
53 63 updateChildProps (isInit) {
54 64 const total = this.$children.length;
... ... @@ -98,8 +108,23 @@
98 108 } else {
99 109 this.$children[this.current].currentStatus = this.status;
100 110 }
  111 + },
  112 + debouncedAppendRemove () {
  113 + return debounce(function () {
  114 + this.updateSteps();
  115 + });
  116 + },
  117 + updateSteps () {
  118 + this.updateChildProps(true);
  119 + this.setNextError();
  120 + this.updateCurrent(true);
101 121 }
102 122 },
  123 + mounted () {
  124 + this.updateSteps();
  125 + this.$on('append', this.debouncedAppendRemove());
  126 + this.$on('remove', this.debouncedAppendRemove());
  127 + },
103 128 watch: {
104 129 current () {
105 130 this.updateChildProps();
... ...