1 | <template>
|
2 | <div
|
3 | :class="carouselClasses"
|
4 | @mouseenter.stop="handleMouseEnter"
|
5 | @mouseleave.stop="handleMouseLeave">
|
6 | <div
|
7 | class="el-carousel__container"
|
8 | :style="{ height: height }">
|
9 | <transition
|
10 | v-if="arrowDisplay"
|
11 | name="carousel-arrow-left">
|
12 | <button
|
13 | type="button"
|
14 | v-show="(arrow === 'always' || hover) && (loop || activeIndex > 0)"
|
15 | @mouseenter="handleButtonEnter('left')"
|
16 | @mouseleave="handleButtonLeave"
|
17 | @click.stop="throttledArrowClick(activeIndex - 1)"
|
18 | class="el-carousel__arrow el-carousel__arrow--left">
|
19 | <i class="el-icon-arrow-left"></i>
|
20 | </button>
|
21 | </transition>
|
22 | <transition
|
23 | v-if="arrowDisplay"
|
24 | name="carousel-arrow-right">
|
25 | <button
|
26 | type="button"
|
27 | v-show="(arrow === 'always' || hover) && (loop || activeIndex < items.length - 1)"
|
28 | @mouseenter="handleButtonEnter('right')"
|
29 | @mouseleave="handleButtonLeave"
|
30 | @click.stop="throttledArrowClick(activeIndex + 1)"
|
31 | class="el-carousel__arrow el-carousel__arrow--right">
|
32 | <i class="el-icon-arrow-right"></i>
|
33 | </button>
|
34 | </transition>
|
35 | <slot></slot>
|
36 | </div>
|
37 | <ul
|
38 | v-if="indicatorPosition !== 'none'"
|
39 | :class="indicatorsClasses">
|
40 | <li
|
41 | v-for="(item, index) in items"
|
42 | :key="index"
|
43 | :class="[
|
44 | 'el-carousel__indicator',
|
45 | 'el-carousel__indicator--' + direction,
|
46 | { 'is-active': index === activeIndex }]"
|
47 | @mouseenter="throttledIndicatorHover(index)"
|
48 | @click.stop="handleIndicatorClick(index)">
|
49 | <button class="el-carousel__button">
|
50 | <span v-if="hasLabel">{{ item.label }}</span>
|
51 | </button>
|
52 | </li>
|
53 | </ul>
|
54 | </div>
|
55 | </template>
|
56 |
|
57 | <script>
|
58 | import throttle from 'throttle-debounce/throttle';
|
59 | import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
|
60 |
|
61 | export default {
|
62 | name: 'ElCarousel',
|
63 |
|
64 | props: {
|
65 | initialIndex: {
|
66 | type: Number,
|
67 | default: 0
|
68 | },
|
69 | height: String,
|
70 | trigger: {
|
71 | type: String,
|
72 | default: 'hover'
|
73 | },
|
74 | autoplay: {
|
75 | type: Boolean,
|
76 | default: true
|
77 | },
|
78 | interval: {
|
79 | type: Number,
|
80 | default: 3000
|
81 | },
|
82 | indicatorPosition: String,
|
83 | indicator: {
|
84 | type: Boolean,
|
85 | default: true
|
86 | },
|
87 | arrow: {
|
88 | type: String,
|
89 | default: 'hover'
|
90 | },
|
91 | type: String,
|
92 | loop: {
|
93 | type: Boolean,
|
94 | default: true
|
95 | },
|
96 | direction: {
|
97 | type: String,
|
98 | default: 'horizontal',
|
99 | validator(val) {
|
100 | return ['horizontal', 'vertical'].indexOf(val) !== -1;
|
101 | }
|
102 | }
|
103 | },
|
104 |
|
105 | data() {
|
106 | return {
|
107 | items: [],
|
108 | activeIndex: -1,
|
109 | containerWidth: 0,
|
110 | timer: null,
|
111 | hover: false
|
112 | };
|
113 | },
|
114 |
|
115 | computed: {
|
116 | arrowDisplay() {
|
117 | return this.arrow !== 'never' && this.direction !== 'vertical';
|
118 | },
|
119 |
|
120 | hasLabel() {
|
121 | return this.items.some(item => item.label.toString().length > 0);
|
122 | },
|
123 |
|
124 | carouselClasses() {
|
125 | const classes = ['el-carousel', 'el-carousel--' + this.direction];
|
126 | if (this.type === 'card') {
|
127 | classes.push('el-carousel--card');
|
128 | }
|
129 | return classes;
|
130 | },
|
131 |
|
132 | indicatorsClasses() {
|
133 | const classes = ['el-carousel__indicators', 'el-carousel__indicators--' + this.direction];
|
134 | if (this.hasLabel) {
|
135 | classes.push('el-carousel__indicators--labels');
|
136 | }
|
137 | if (this.indicatorPosition === 'outside' || this.type === 'card') {
|
138 | classes.push('el-carousel__indicators--outside');
|
139 | }
|
140 | return classes;
|
141 | }
|
142 | },
|
143 |
|
144 | watch: {
|
145 | items(val) {
|
146 | if (val.length > 0) this.setActiveItem(this.initialIndex);
|
147 | },
|
148 |
|
149 | activeIndex(val, oldVal) {
|
150 | this.resetItemPosition(oldVal);
|
151 | if (oldVal > -1) {
|
152 | this.$emit('change', val, oldVal);
|
153 | }
|
154 | },
|
155 |
|
156 | autoplay(val) {
|
157 | val ? this.startTimer() : this.pauseTimer();
|
158 | },
|
159 |
|
160 | loop() {
|
161 | this.setActiveItem(this.activeIndex);
|
162 | },
|
163 |
|
164 | interval() {
|
165 | this.pauseTimer();
|
166 | this.startTimer();
|
167 | }
|
168 | },
|
169 |
|
170 | methods: {
|
171 | handleMouseEnter() {
|
172 | this.hover = true;
|
173 | this.pauseTimer();
|
174 | },
|
175 |
|
176 | handleMouseLeave() {
|
177 | this.hover = false;
|
178 | this.startTimer();
|
179 | },
|
180 |
|
181 | itemInStage(item, index) {
|
182 | const length = this.items.length;
|
183 | if (index === length - 1 && item.inStage && this.items[0].active ||
|
184 | (item.inStage && this.items[index + 1] && this.items[index + 1].active)) {
|
185 | return 'left';
|
186 | } else if (index === 0 && item.inStage && this.items[length - 1].active ||
|
187 | (item.inStage && this.items[index - 1] && this.items[index - 1].active)) {
|
188 | return 'right';
|
189 | }
|
190 | return false;
|
191 | },
|
192 |
|
193 | handleButtonEnter(arrow) {
|
194 | if (this.direction === 'vertical') return;
|
195 | this.items.forEach((item, index) => {
|
196 | if (arrow === this.itemInStage(item, index)) {
|
197 | item.hover = true;
|
198 | }
|
199 | });
|
200 | },
|
201 |
|
202 | handleButtonLeave() {
|
203 | if (this.direction === 'vertical') return;
|
204 | this.items.forEach(item => {
|
205 | item.hover = false;
|
206 | });
|
207 | },
|
208 |
|
209 | updateItems() {
|
210 | this.items = this.$children.filter(child => child.$options.name === 'ElCarouselItem');
|
211 | },
|
212 |
|
213 | resetItemPosition(oldIndex) {
|
214 | this.items.forEach((item, index) => {
|
215 | item.translateItem(index, this.activeIndex, oldIndex);
|
216 | });
|
217 | },
|
218 |
|
219 | playSlides() {
|
220 | if (this.activeIndex < this.items.length - 1) {
|
221 | this.activeIndex++;
|
222 | } else if (this.loop) {
|
223 | this.activeIndex = 0;
|
224 | }
|
225 | },
|
226 |
|
227 | pauseTimer() {
|
228 | if (this.timer) {
|
229 | clearInterval(this.timer);
|
230 | this.timer = null;
|
231 | }
|
232 | },
|
233 |
|
234 | startTimer() {
|
235 | if (this.interval <= 0 || !this.autoplay || this.timer) return;
|
236 | this.timer = setInterval(this.playSlides, this.interval);
|
237 | },
|
238 |
|
239 | resetTimer() {
|
240 | this.pauseTimer();
|
241 | this.startTimer();
|
242 | },
|
243 |
|
244 | setActiveItem(index) {
|
245 | if (typeof index === 'string') {
|
246 | const filteredItems = this.items.filter(item => item.name === index);
|
247 | if (filteredItems.length > 0) {
|
248 | index = this.items.indexOf(filteredItems[0]);
|
249 | }
|
250 | }
|
251 | index = Number(index);
|
252 | if (isNaN(index) || index !== Math.floor(index)) {
|
253 | console.warn('[Element Warn][Carousel]index must be an integer.');
|
254 | return;
|
255 | }
|
256 | let length = this.items.length;
|
257 | const oldIndex = this.activeIndex;
|
258 | if (index < 0) {
|
259 | this.activeIndex = this.loop ? length - 1 : 0;
|
260 | } else if (index >= length) {
|
261 | this.activeIndex = this.loop ? 0 : length - 1;
|
262 | } else {
|
263 | this.activeIndex = index;
|
264 | }
|
265 | if (oldIndex === this.activeIndex) {
|
266 | this.resetItemPosition(oldIndex);
|
267 | }
|
268 | this.resetTimer();
|
269 | },
|
270 |
|
271 | prev() {
|
272 | this.setActiveItem(this.activeIndex - 1);
|
273 | },
|
274 |
|
275 | next() {
|
276 | this.setActiveItem(this.activeIndex + 1);
|
277 | },
|
278 |
|
279 | handleIndicatorClick(index) {
|
280 | this.activeIndex = index;
|
281 | },
|
282 |
|
283 | handleIndicatorHover(index) {
|
284 | if (this.trigger === 'hover' && index !== this.activeIndex) {
|
285 | this.activeIndex = index;
|
286 | }
|
287 | }
|
288 | },
|
289 |
|
290 | created() {
|
291 | this.throttledArrowClick = throttle(300, true, index => {
|
292 | this.setActiveItem(index);
|
293 | });
|
294 | this.throttledIndicatorHover = throttle(300, index => {
|
295 | this.handleIndicatorHover(index);
|
296 | });
|
297 | },
|
298 |
|
299 | mounted() {
|
300 | this.updateItems();
|
301 | this.$nextTick(() => {
|
302 | addResizeListener(this.$el, this.resetItemPosition);
|
303 | if (this.initialIndex < this.items.length && this.initialIndex >= 0) {
|
304 | this.activeIndex = this.initialIndex;
|
305 | }
|
306 | this.startTimer();
|
307 | });
|
308 | },
|
309 |
|
310 | beforeDestroy() {
|
311 | if (this.$el) removeResizeListener(this.$el, this.resetItemPosition);
|
312 | this.pauseTimer();
|
313 | }
|
314 | };
|
315 | </script>
|