chenhaodong / mew-iview

Commit bb71140e7ba5139c5391222940fcb381ca33bf18

Authored by 梁灏
1 parent a190ce84

support Carousel 

support Carousel @rijn you can review when you are free
Showing 8 changed files with 57 additions and 203 deletions   Show diff stats
Inline Side-by-side
@@ -19,4 +19,6 @@ class 改为了 className @@ -19,4 +19,6 @@ class 改为了 className
19 ### Upload 19 ### Upload
20 父级不能 computed Upload 的 fileList 了 20 父级不能 computed Upload 的 fileList 了
21 ### Collapse 21 ### Collapse
22 -废弃 activeKey，使用 v-model，key 是保留的，更名为 name  
23 \ No newline at end of file 22 \ No newline at end of file
  23 +废弃 activeKey，使用 v-model，key 是保留的，更名为 name
  24 +### Carousel
  25 +废弃 activeIndex，使用 v-model，v-for="n in slides.length",Vue2的数字循环，是从1开始的
24 \ No newline at end of file 26 \ No newline at end of file
@@ -42,12 +42,12 @@ @@ -42,12 +42,12 @@
42 - [ ] Modal 42 - [ ] Modal
43 - [x] Progress 43 - [x] Progress
44 - [x] Badge 44 - [x] Badge
45 -- [ ] Collapse 45 +- [x] Collapse
46 - [x] Timeline 46 - [x] Timeline
47 - [x] Tag 47 - [x] Tag
48 - [ ] Tooltip 48 - [ ] Tooltip
49 - [ ] Poptip 49 - [ ] Poptip
50 -- [ ] Carousel 50 +- [x] Carousel
51 - [ ] Tree 51 - [ ] Tree
52 - [ ] Menu 52 - [ ] Menu
53 - [ ] Tabs 53 - [ ] Tabs
src/components/carousel/carousel-item.vue
  Show/Hide comments   View file @bb71140
1 <template> 1 <template>
2 - <div :class="prefixCls" v-bind:style="styles"><slot></slot></div> 2 + <div :class="prefixCls" :style="styles"><slot></slot></div>
3 </template> 3 </template>
4 <script> 4 <script>
5 const prefixCls = 'ivu-carousel-item'; 5 const prefixCls = 'ivu-carousel-item';
6 6
7 export default { 7 export default {
8 componentName: 'carousel-item', 8 componentName: 'carousel-item',
9 - 9 + name: 'CarouselItem',
10 data () { 10 data () {
11 return { 11 return {
12 prefixCls: prefixCls, 12 prefixCls: prefixCls,
@@ -24,10 +24,12 @@ @@ -24,10 +24,12 @@
24 }; 24 };
25 } 25 }
26 }, 26 },
27 - compiled () { 27 + mounted () {
  28 + // todo while
28 this.$parent.slotChange(); 29 this.$parent.slotChange();
29 }, 30 },
30 beforeDestroy () { 31 beforeDestroy () {
  32 + // todo while
31 this.$parent.slotChange(); 33 this.$parent.slotChange();
32 } 34 }
33 }; 35 };
src/components/carousel/carousel.vue
  Show/Hide comments   View file @bb71140
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 <Icon type="chevron-left"></Icon> 4 <Icon type="chevron-left"></Icon>
5 </button> 5 </button>
6 <div :class="[prefixCls + '-list']"> 6 <div :class="[prefixCls + '-list']">
7 - <div :class="[prefixCls + '-track']" :style="trackStyles" v-el:slides> 7 + <div :class="[prefixCls + '-track']" :style="trackStyles">
8 <slot></slot> 8 <slot></slot>
9 </div> 9 </div>
10 </div> 10 </div>
@@ -13,9 +13,9 @@ @@ -13,9 +13,9 @@
13 </button> 13 </button>
14 <ul :class="dotsClasses"> 14 <ul :class="dotsClasses">
15 <template v-for="n in slides.length"> 15 <template v-for="n in slides.length">
16 - <li :class="[n === currentIndex ? prefixCls + '-active' : '']"  
17 - @click="dotsEvent('click', n)"  
18 - @mouseover="dotsEvent('hover', n)"> 16 + <li :class="[n - 1 === currentIndex ? prefixCls + '-active' : '']"
  17 + @click="dotsEvent('click', n - 1)"
  18 + @mouseover="dotsEvent('hover', n - 1)">
19 <button></button> 19 <button></button>
20 </li> 20 </li>
21 </template> 21 </template>
@@ -65,7 +65,7 @@ @@ -65,7 +65,7 @@
65 return oneOf(value, ['click', 'hover']); 65 return oneOf(value, ['click', 'hover']);
66 } 66 }
67 }, 67 },
68 - currentIndex: { 68 + value: {
69 type: Number, 69 type: Number,
70 default: 0 70 default: 0
71 }, 71 },
@@ -86,7 +86,8 @@ @@ -86,7 +86,8 @@
86 slides: [], 86 slides: [],
87 slideInstances: [], 87 slideInstances: [],
88 timer: null, 88 timer: null,
89 - ready: false 89 + ready: false,
  90 + currentIndex: this.value
90 }; 91 };
91 }, 92 },
92 computed: { 93 computed: {
@@ -140,7 +141,7 @@ @@ -140,7 +141,7 @@
140 }); 141 });
141 } 142 }
142 }, 143 },
143 - updateSlides (init ) { 144 + updateSlides (init) {
144 let slides = []; 145 let slides = [];
145 let index = 1; 146 let index = 1;
146 147
@@ -189,6 +190,7 @@ @@ -189,6 +190,7 @@
189 while (index < 0) index += this.slides.length; 190 while (index < 0) index += this.slides.length;
190 index = index % this.slides.length; 191 index = index % this.slides.length;
191 this.currentIndex = index; 192 this.currentIndex = index;
  193 + this.$emit('input', index);
192 }, 194 },
193 arrowEvent (offset) { 195 arrowEvent (offset) {
194 this.setAutoplay(); 196 this.setAutoplay();
@@ -197,6 +199,7 @@ @@ -197,6 +199,7 @@
197 dotsEvent (event, n) { 199 dotsEvent (event, n) {
198 if (event === this.trigger && this.currentIndex !== n) { 200 if (event === this.trigger && this.currentIndex !== n) {
199 this.currentIndex = n; 201 this.currentIndex = n;
  202 + this.$emit('input', n);
200 // Reset autoplay timer when trigger be activated 203 // Reset autoplay timer when trigger be activated
201 this.setAutoplay(); 204 this.setAutoplay();
202 } 205 }
@@ -215,9 +218,6 @@ @@ -215,9 +218,6 @@
215 }); 218 });
216 } 219 }
217 }, 220 },
218 - compiled () {  
219 - this.updateSlides(true);  
220 - },  
221 watch: { 221 watch: {
222 autoplay () { 222 autoplay () {
223 this.setAutoplay(); 223 this.setAutoplay();
@@ -231,9 +231,13 @@ @@ -231,9 +231,13 @@
231 }, 231 },
232 height () { 232 height () {
233 this.updatePos(); 233 this.updatePos();
  234 + },
  235 + value (val) {
  236 + this.currentIndex = val;
234 } 237 }
235 }, 238 },
236 - ready () { 239 + mounted () {
  240 + this.updateSlides(true);
237 this.handleResize(); 241 this.handleResize();
238 this.setAutoplay(); 242 this.setAutoplay();
239 window.addEventListener('resize', this.handleResize, false); 243 window.addEventListener('resize', this.handleResize, false);
@@ -8,7 +8,7 @@ import Badge from &#39;./components/badge&#39;; @@ -8,7 +8,7 @@ import Badge from &#39;./components/badge&#39;;
8 // import Breadcrumb from './components/breadcrumb'; 8 // import Breadcrumb from './components/breadcrumb';
9 import Button from './components/button'; 9 import Button from './components/button';
10 // import Card from './components/card'; 10 // import Card from './components/card';
11 -// import Carousel from './components/carousel'; 11 +import Carousel from './components/carousel';
12 // import Cascader from './components/cascader'; 12 // import Cascader from './components/cascader';
13 import Checkbox from './components/checkbox'; 13 import Checkbox from './components/checkbox';
14 // import Circle from './components/circle'; 14 // import Circle from './components/circle';
@@ -57,8 +57,8 @@ const iview = { @@ -57,8 +57,8 @@ const iview = {
57 Button, 57 Button,
58 ButtonGroup: Button.Group, 58 ButtonGroup: Button.Group,
59 // Card, 59 // Card,
60 - // Carousel,  
61 - // CarouselItem: Carousel.Item, 60 + Carousel,
  61 + CarouselItem: Carousel.Item,
62 // Cascader, 62 // Cascader,
63 Checkbox, 63 Checkbox,
64 CheckboxGroup: Checkbox.Group, 64 CheckboxGroup: Checkbox.Group,
@@ -29,6 +29,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; } @@ -29,6 +29,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
29 <li><router-link to="/progress">Progress</router-link></li> 29 <li><router-link to="/progress">Progress</router-link></li>
30 <li><router-link to="/upload">Upload</router-link></li> 30 <li><router-link to="/upload">Upload</router-link></li>
31 <li><router-link to="/collapse">Collapse</router-link></li> 31 <li><router-link to="/collapse">Collapse</router-link></li>
  32 + <li><router-link to="/carousel">Carousel</router-link></li>
32 </ul> 33 </ul>
33 </nav> 34 </nav>
34 <router-view></router-view> 35 <router-view></router-view>
@@ -80,6 +80,10 @@ const router = new VueRouter({ @@ -80,6 +80,10 @@ const router = new VueRouter({
80 { 80 {
81 path: '/collapse', 81 path: '/collapse',
82 component: require('./routers/collapse.vue') 82 component: require('./routers/collapse.vue')
  83 + },
  84 + {
  85 + path: '/carousel',
  86 + component: require('./routers/carousel.vue')
83 } 87 }
84 ] 88 ]
85 }); 89 });
test/routers/carousel.vue
  Show/Hide comments   View file @bb71140
1 <template> 1 <template>
2 - <Row>  
3 - <i-col span="2">  
4 - Current Index  
5 - <p>{{ currentIndex }}</p>  
6 - </i-col>  
7 - <i-col span="2">  
8 - <p>Autoplay</p>  
9 - <Switch :checked.sync="autoplay" size="small"></Switch>  
10 - </i-col>  
11 - <i-col span="4">  
12 - Speed <Slider :value.sync="autoplaySpeed" :min="300" :max="5000"></Slider>  
13 - </i-col>  
14 - <i-col span="4">  
15 - Switch To  
16 - <Button-group>  
17 - <i-button @click="currentIndex = 0">0</i-button>  
18 - <i-button @click="currentIndex = 1">1</i-button>  
19 - <i-button @click="currentIndex = 2">2</i-button>  
20 - </Button-group>  
21 - </i-col>  
22 - <i-col span="4">  
23 - <i-button @click="push">Push</i-button>  
24 - <i-button @click="remove = true">Remove Front</i-button>  
25 - </i-col>  
26 - </Row>  
27 - <Row>  
28 - <i-col span="4">  
29 - <p>Dots</p>  
30 - <Button-group>  
31 - <i-button @click="dots = 'inside'">Inside</i-button>  
32 - <i-button @click="dots = 'outside'">Outside</i-button>  
33 - <i-button @click="dots = 'none'">None</i-button>  
34 - </Button-group>  
35 - </i-col>  
36 - <i-col span="4">  
37 - <p>Trigger</p>  
38 - <Button-group>  
39 - <i-button @click="trigger = 'click'">Click</i-button>  
40 - <i-button @click="trigger = 'hover'">Hover</i-button>  
41 - </Button-group>  
42 - </i-col>  
43 - <i-col span="4">  
44 - Arrow  
45 - <Button-group>  
46 - <i-button @click="arrow = 'hover'">Hover</i-button>  
47 - <i-button @click="arrow = 'always'">Always</i-button>  
48 - <i-button @click="arrow = 'never'">Never</i-button>  
49 - </Button-group>  
50 - </i-col>  
51 - <i-col span="4">  
52 - Height  
53 - <i-button @click="height = 'auto'">Auto</i-button>  
54 - <i-button @click="height = 80">Manual</i-button>  
55 - <Slider v-if="height !== 'auto'" :value.sync="height" :min="50" :max="200"></Slider>  
56 - </i-col>  
57 - </Row>  
58 - <Carousel style="width: 50%; border: solid 1px #000; margin-top: 20px;"  
59 - :current-index.sync="currentIndex"  
60 - :autoplay="autoplay"  
61 - :autoplay-speed="autoplaySpeed"  
62 - :dots="dots"  
63 - :trigger="trigger"  
64 - :arrow="arrow"  
65 - :height="height"  
66 - @on-change="slideChange"  
67 - easing="linear">  
68 - <Carousel-item v-if="!remove">  
69 - <Alert type="warning" show-icon>  
70 - 警告提示文案  
71 - <template slot="desc">  
72 - 警告的提示描述文案警告的提示描述文案警告的提示描述文案  
73 - </template>  
74 - </Alert>  
75 - </Carousel-item>  
76 - <Carousel-item>  
77 - <div style="height: 150px; background: #f50; position: relative">  
78 - <p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>  
79 - </div>  
80 - </Carousel-item>  
81 - <Carousel-item>  
82 - <div style="height: 100%; min-height: 20px; background: #f50; position: relative;">  
83 - <p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 居中测试</p>  
84 - </div>  
85 - </Carousel-item>  
86 - <Carousel-item>  
87 - <Card style="width:350px">  
88 - <p slot="title">  
89 - <Icon type="ios-film-outline"></Icon>  
90 - 经典电影  
91 - </p>  
92 - <a href="#" slot="extra">  
93 - <Icon type="ios-loop-strong"></Icon>  
94 - 换一换  
95 - </a>  
96 - <ul>  
97 -  
98 - </ul>  
99 - </Card>  
100 - </Carousel-item>  
101 - <Carousel-item style="text-align: center">  
102 - <Icon type="checkmark" style="font-size: 5em"></Icon>  
103 - </Carousel-item>  
104 - <Carousel-item>test3</Carousel-item>  
105 - <Carousel-item v-for="item in pushItem" track-by="$index">  
106 - <Icon type="checkmark" style="font-size: 5em"></Icon>{{item}}  
107 - </Carousel-item>  
108 - </Carousel>  
109 - <div style="max-height: 200px; overflow: scroll">  
110 - <p v-for="item in log" track-by="$index">{{item}}</p>  
111 - </div>  
112 -  
113 - <Card style="width:350px">  
114 - <p slot="title">  
115 - <Icon type="ios-film-outline"></Icon>  
116 - 经典电影  
117 - </p>  
118 - <Carousel>  
119 - <Carousel-item v-if="!remove">  
120 - <Alert type="warning" show-icon>  
121 - 警告提示文案  
122 - <template slot="desc">  
123 - 警告的提示描述文案警告的提示描述文案警告的提示描述文案  
124 - </template>  
125 - </Alert> 2 + <div>
  3 + <Carousel v-model="v1" dots="inside" trigger="hover">
  4 + <Carousel-item>
  5 + <div class="demo-carousel">1</div>
126 </Carousel-item> 6 </Carousel-item>
127 <Carousel-item> 7 <Carousel-item>
128 - <div style="height: 100%; min-height: 20px; background: #f50; position: relative;">  
129 - <p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>  
130 - </div> 8 + <div class="demo-carousel">2</div>
131 </Carousel-item> 9 </Carousel-item>
132 - <Carousel-item style="text-align: center">  
133 - <Icon type="checkmark" style="font-size: 5em"></Icon> 10 + <Carousel-item>
  11 + <div class="demo-carousel">3</div>
  12 + </Carousel-item>
  13 + <Carousel-item>
  14 + <div class="demo-carousel">4</div>
134 </Carousel-item> 15 </Carousel-item>
135 </Carousel> 16 </Carousel>
136 - </Card>  
137 - <Tabs>  
138 - <Tab-pane label="标签一">  
139 - <Carousel>  
140 - <Carousel-item v-if="!remove">  
141 - <Alert type="warning" show-icon>  
142 - 警告提示文案  
143 - <template slot="desc">  
144 - 警告的提示描述文案警告的提示描述文案警告的提示描述文案  
145 - </template>  
146 - </Alert>  
147 - </Carousel-item>  
148 - <Carousel-item>  
149 - <div style="height: 100%; min-height: 20px; background: #f50; position: relative;">  
150 - <p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>  
151 - </div>  
152 - </Carousel-item>  
153 - <Carousel-item style="text-align: center">  
154 - <Icon type="checkmark" style="font-size: 5em"></Icon>  
155 - </Carousel-item>  
156 - </Carousel>  
157 - </Tab-pane>  
158 - <Tab-pane label="标签二" disabled>标签二的内容</Tab-pane>  
159 - <Tab-pane label="标签三">  
160 - <Carousel>  
161 - <Carousel-item v-if="!remove">  
162 - <Alert type="warning" show-icon>  
163 - 警告提示文案  
164 - <template slot="desc">  
165 - 警告的提示描述文案警告的提示描述文案警告的提示描述文案  
166 - </template>  
167 - </Alert>  
168 - </Carousel-item>  
169 - <Carousel-item>  
170 - <div style="height: 100%; min-height: 20px; background: #f50; position: relative;">  
171 - <p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>  
172 - </div>  
173 - </Carousel-item>  
174 - <Carousel-item style="text-align: center">  
175 - <Icon type="checkmark" style="font-size: 5em"></Icon>  
176 - </Carousel-item>  
177 - </Carousel>  
178 - </Tab-pane>  
179 - </Tabs> 17 + {{ v1 }}
  18 + <div @click="v1 = 0">change v1</div>
  19 + </div>
180 </template> 20 </template>
181 <script> 21 <script>
182 export default { 22 export default {
183 data () { 23 data () {
184 return { 24 return {
185 - currentIndex: 0,  
186 - autoplay: true,  
187 - autoplaySpeed: 2000,  
188 - remove: false,  
189 - pushItem: [],  
190 - arrow: 'hover',  
191 - trigger: 'click',  
192 - dots: 'inside',  
193 - height: 'auto',  
194 - log: [] 25 + v1: 1
195 } 26 }
196 }, 27 },
197 methods: { 28 methods: {
@@ -204,3 +35,13 @@ @@ -204,3 +35,13 @@
204 } 35 }
205 } 36 }
206 </script> 37 </script>
  38 +<style>
  39 + .demo-carousel{
  40 + height: 200px;
  41 + line-height: 200px;
  42 + text-align: center;
  43 + color: #fff;
  44 + font-size: 20px;
  45 + background: #506b9e;
  46 + }
  47 +</style>
207 \ No newline at end of file 48 \ No newline at end of file