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
CHANGE.md
  Show/Hide comments   View file @bb71140
... ... @@ -19,4 +19,6 @@ class 改为了 className
19 19 ### Upload
20 20 父级不能 computed Upload 的 fileList 了
21 21 ### Collapse
22   -废弃 activeKey，使用 v-model，key 是保留的，更名为 name
23 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 26 \ No newline at end of file
... ...
README.md
  Show/Hide comments   View file @bb71140
... ... @@ -42,12 +42,12 @@
42 42 - [ ] Modal
43 43 - [x] Progress
44 44 - [x] Badge
45   -- [ ] Collapse
  45 +- [x] Collapse
46 46 - [x] Timeline
47 47 - [x] Tag
48 48 - [ ] Tooltip
49 49 - [ ] Poptip
50   -- [ ] Carousel
  50 +- [x] Carousel
51 51 - [ ] Tree
52 52 - [ ] Menu
53 53 - [ ] Tabs
... ...
src/components/carousel/carousel-item.vue
  Show/Hide comments   View file @bb71140
1 1 <template>
2   - <div :class="prefixCls" v-bind:style="styles"><slot></slot></div>
  2 + <div :class="prefixCls" :style="styles"><slot></slot></div>
3 3 </template>
4 4 <script>
5 5 const prefixCls = 'ivu-carousel-item';
6 6  
7 7 export default {
8 8 componentName: 'carousel-item',
9   -
  9 + name: 'CarouselItem',
10 10 data () {
11 11 return {
12 12 prefixCls: prefixCls,
... ... @@ -24,10 +24,12 @@
24 24 };
25 25 }
26 26 },
27   - compiled () {
  27 + mounted () {
  28 + // todo while
28 29 this.$parent.slotChange();
29 30 },
30 31 beforeDestroy () {
  32 + // todo while
31 33 this.$parent.slotChange();
32 34 }
33 35 };
... ...
src/components/carousel/carousel.vue
  Show/Hide comments   View file @bb71140
... ... @@ -4,7 +4,7 @@
4 4 <Icon type="chevron-left"></Icon>
5 5 </button>
6 6 <div :class="[prefixCls + '-list']">
7   - <div :class="[prefixCls + '-track']" :style="trackStyles" v-el:slides>
  7 + <div :class="[prefixCls + '-track']" :style="trackStyles">
8 8 <slot></slot>
9 9 </div>
10 10 </div>
... ... @@ -13,9 +13,9 @@
13 13 </button>
14 14 <ul :class="dotsClasses">
15 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 19 <button></button>
20 20 </li>
21 21 </template>
... ... @@ -65,7 +65,7 @@
65 65 return oneOf(value, ['click', 'hover']);
66 66 }
67 67 },
68   - currentIndex: {
  68 + value: {
69 69 type: Number,
70 70 default: 0
71 71 },
... ... @@ -86,7 +86,8 @@
86 86 slides: [],
87 87 slideInstances: [],
88 88 timer: null,
89   - ready: false
  89 + ready: false,
  90 + currentIndex: this.value
90 91 };
91 92 },
92 93 computed: {
... ... @@ -140,7 +141,7 @@
140 141 });
141 142 }
142 143 },
143   - updateSlides (init ) {
  144 + updateSlides (init) {
144 145 let slides = [];
145 146 let index = 1;
146 147  
... ... @@ -189,6 +190,7 @@
189 190 while (index < 0) index += this.slides.length;
190 191 index = index % this.slides.length;
191 192 this.currentIndex = index;
  193 + this.$emit('input', index);
192 194 },
193 195 arrowEvent (offset) {
194 196 this.setAutoplay();
... ... @@ -197,6 +199,7 @@
197 199 dotsEvent (event, n) {
198 200 if (event === this.trigger && this.currentIndex !== n) {
199 201 this.currentIndex = n;
  202 + this.$emit('input', n);
200 203 // Reset autoplay timer when trigger be activated
201 204 this.setAutoplay();
202 205 }
... ... @@ -215,9 +218,6 @@
215 218 });
216 219 }
217 220 },
218   - compiled () {
219   - this.updateSlides(true);
220   - },
221 221 watch: {
222 222 autoplay () {
223 223 this.setAutoplay();
... ... @@ -231,9 +231,13 @@
231 231 },
232 232 height () {
233 233 this.updatePos();
  234 + },
  235 + value (val) {
  236 + this.currentIndex = val;
234 237 }
235 238 },
236   - ready () {
  239 + mounted () {
  240 + this.updateSlides(true);
237 241 this.handleResize();
238 242 this.setAutoplay();
239 243 window.addEventListener('resize', this.handleResize, false);
... ...
src/index.js
  Show/Hide comments   View file @bb71140
... ... @@ -8,7 +8,7 @@ import Badge from &#39;./components/badge&#39;;
8 8 // import Breadcrumb from './components/breadcrumb';
9 9 import Button from './components/button';
10 10 // import Card from './components/card';
11   -// import Carousel from './components/carousel';
  11 +import Carousel from './components/carousel';
12 12 // import Cascader from './components/cascader';
13 13 import Checkbox from './components/checkbox';
14 14 // import Circle from './components/circle';
... ... @@ -57,8 +57,8 @@ const iview = {
57 57 Button,
58 58 ButtonGroup: Button.Group,
59 59 // Card,
60   - // Carousel,
61   - // CarouselItem: Carousel.Item,
  60 + Carousel,
  61 + CarouselItem: Carousel.Item,
62 62 // Cascader,
63 63 Checkbox,
64 64 CheckboxGroup: Checkbox.Group,
... ...
test/app.vue
  Show/Hide comments   View file @bb71140
... ... @@ -29,6 +29,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
29 29 <li><router-link to="/progress">Progress</router-link></li>
30 30 <li><router-link to="/upload">Upload</router-link></li>
31 31 <li><router-link to="/collapse">Collapse</router-link></li>
  32 + <li><router-link to="/carousel">Carousel</router-link></li>
32 33 </ul>
33 34 </nav>
34 35 <router-view></router-view>
... ...
test/main.js
  Show/Hide comments   View file @bb71140
... ... @@ -80,6 +80,10 @@ const router = new VueRouter({
80 80 {
81 81 path: '/collapse',
82 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 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 6 </Carousel-item>
127 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 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 15 </Carousel-item>
135 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 20 </template>
181 21 <script>
182 22 export default {
183 23 data () {
184 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 28 methods: {
... ... @@ -204,3 +35,13 @@
204 35 }
205 36 }
206 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 48 \ No newline at end of file
... ...