Skip to content

Commit 66ed0f7

Browse files
kouchaokouchao
committed
新增 轮播demo
1 parent cddb12d commit 66ed0f7

File tree

8 files changed

+225
-1
lines changed

8 files changed

+225
-1
lines changed

‎src/App.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@
8585
<lay-menu-child-item title="分页" :to="{name: 'laypage'}"></lay-menu-child-item>
8686
<lay-menu-child-item title="滑块" :to="{name: 'slider'}"></lay-menu-child-item>
8787
<lay-menu-child-item title="评分" :to="{name: 'rate'}"></lay-menu-child-item>
88+
<lay-menu-child-item title="轮播" :to="{name: 'carousel'}"></lay-menu-child-item>
8889

8990
</lay-menu-item>
9091

‎src/components/carousel-item/index.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* kouchao 创建于 2018/9/7
3+
*/
4+
5+
import LayCarouselItem from '../carousel/src/carousel-item';
6+
7+
/* istanbul ignore next */
8+
LayCarouselItem.install = function(Vue) {
9+
Vue.component(LayCarouselItem.name, LayCarouselItem);
10+
};
11+
12+
export default LayCarouselItem;

‎src/components/carousel/index.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* kouchao 创建于 2018/9/7
3+
*/
4+
5+
import LayCarousel from './src/carousel';
6+
7+
/* istanbul ignore next */
8+
LayCarousel.install = function(Vue) {
9+
Vue.component(LayCarousel.name, LayCarousel);
10+
};
11+
12+
export default LayCarousel;

‎src/components/carousel/src/carousel-item.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<div :class="{
3+
'layui-this': isActive,
4+
'layui-carousel-next': isNext,
5+
'layui-carousel-prev': isPrev,
6+
'layui-carousel-left': (isActive || isNext ) && isRighting,
7+
'layui-carousel-right': (isActive || isPrev ) && isLefting
8+
}">
9+
<slot></slot>
10+
</div>
11+
</template>
12+
13+
<script>
14+
export default {
15+
name: "LayCarouselItem",
16+
data() {
17+
return {
18+
isNext: false,
19+
isActive: false,
20+
isPrev: false,
21+
isRighting: false,
22+
isLefting: false
23+
}
24+
25+
},
26+
created() {
27+
this.$parent && this.$parent.updateItems();
28+
},
29+
destroyed() {
30+
this.$parent && this.$parent.updateItems();
31+
}
32+
33+
}
34+
</script>
35+
36+
<style scoped>
37+
38+
</style>

‎src/components/carousel/src/carousel.vue‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<template>
2+
<div class="layui-carousel" lay-anim="" lay-indicator="inside" :lay-arrow="arrow"
3+
style="width: 600px;" :style="{
4+
height: height + 'px'
5+
}">
6+
<div carousel-item="">
7+
<slot></slot>
8+
</div>
9+
<div class="layui-carousel-ind">
10+
<ul>
11+
<li v-for="item in items" :class="{'layui-this': item.isActive}"></li>
12+
</ul>
13+
</div>
14+
<button class="layui-icon layui-carousel-arrow" @click="handleSub" lay-type="sub"></button>
15+
<button class="layui-icon layui-carousel-arrow" @click="handleAdd" lay-type="add"></button>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default {
21+
name: "LayCarousel",
22+
data() {
23+
return {
24+
activeItem: '',
25+
nextItem: '',
26+
prevItem: '',
27+
items: [],
28+
righting: false,
29+
lefting: false
30+
}
31+
},
32+
props: {
33+
arrow: {
34+
type: String,
35+
default: 'always'
36+
},
37+
height: {
38+
type: Number,
39+
default: 280
40+
}
41+
},
42+
mounted() {
43+
44+
},
45+
methods: {
46+
handleSub() {
47+
if (this.lefting) {
48+
return false
49+
}
50+
this.lefting = true
51+
this.updateItem()
52+
setTimeout(() => {
53+
54+
this.lefting = false
55+
const activeIndex = this.items.findIndex(o => o === this.activeItem)
56+
if (activeIndex == 0) {
57+
this.setActiveItem(this.items[this.items.length - 1])
58+
return false;
59+
}
60+
this.setActiveItem(this.items[activeIndex - 1])
61+
}, 300)
62+
},
63+
handleAdd() {
64+
if (this.righting) {
65+
return false
66+
}
67+
this.righting = true
68+
this.updateItem()
69+
setTimeout(() => {
70+
this.righting = false
71+
const activeIndex = this.items.findIndex(o => o === this.activeItem)
72+
if (activeIndex == this.items.length - 1) {
73+
this.setActiveItem(this.items[0])
74+
return false;
75+
}
76+
this.setActiveItem(this.items[activeIndex + 1])
77+
78+
}, 300)
79+
80+
},
81+
updateItems() {
82+
this.items = this.$children.filter(child => child.$options.name === 'LayCarouselItem');
83+
this.setActiveItem(this.items[0])
84+
},
85+
updateItem() {
86+
this.items.forEach(o => {
87+
o.isActive = o == this.activeItem
88+
o.isPrev = o == this.prevItem
89+
o.isNext = o == this.nextItem
90+
o.isRighting = this.righting
91+
o.isLefting = this.lefting
92+
})
93+
},
94+
setActiveItem(item) {
95+
this.activeItem = item
96+
const activeIndex = this.items.findIndex(o => o === this.activeItem)
97+
98+
this.nextItem = activeIndex == this.items.length - 1 ? this.items[0] : this.items[activeIndex + 1]
99+
this.prevItem = activeIndex == 0 ? this.items[this.items.length - 1] : this.items[activeIndex - 1]
100+
101+
this.updateItem()
102+
}
103+
}
104+
}
105+
</script>
106+
107+
<style scoped>
108+
109+
</style>

‎src/index.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ import LaySwitch from '@/components/switch'
4444
import LayPagination from '@/components/pagination'
4545
import LayRate from '@/components/rate'
4646
import LaySlider from '@/components/slider'
47+
import LayCarousel from '@/components/carousel'
48+
import LayCarouselItem from '@/components/carousel-item'
4749

4850
const layui = {
4951
config: {},
@@ -93,7 +95,9 @@ const layui = {
9395
LaySwitch,
9496
LayPagination,
9597
LayRate,
96-
LaySlider
98+
LaySlider,
99+
LayCarousel,
100+
LayCarouselItem,
97101
]
98102
components.forEach(function (component) {
99103
Vue.component(component.name, component)

‎src/router.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import Layer from './views/Layer.vue'
1919
import Laypage from './views/Laypage.vue'
2020
import Rate from './views/Rate.vue'
2121
import Slider from './views/Slider.vue'
22+
import Carousel from './views/Carousel.vue'
2223

2324
Vue.use(Router)
2425

@@ -118,6 +119,12 @@ export default new Router({
118119
path: '/slider',
119120
name: 'slider',
120121
component: Slider
122+
},
123+
{
124+
path: '/carousel',
125+
name: 'carousel',
126+
component: Carousel
121127
}
128+
122129
]
123130
})

‎src/views/Carousel.vue‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<div>
3+
<lay-block color="#f00">该模块正在开发中</lay-block>
4+
<lay-carousel>
5+
<lay-carousel-item>1</lay-carousel-item>
6+
<lay-carousel-item>2</lay-carousel-item>
7+
<lay-carousel-item>3</lay-carousel-item>
8+
<lay-carousel-item>4</lay-carousel-item>
9+
</lay-carousel>
10+
<br>
11+
<lay-carousel arrow="hover" :height="100">
12+
<lay-carousel-item>1</lay-carousel-item>
13+
<lay-carousel-item>2</lay-carousel-item>
14+
<lay-carousel-item>3</lay-carousel-item>
15+
<lay-carousel-item>4</lay-carousel-item>
16+
</lay-carousel>
17+
18+
19+
</div>
20+
</template>
21+
22+
<script>
23+
export default {
24+
name: "Carousel"
25+
}
26+
</script>
27+
28+
<style>
29+
div[carousel-item] > * {
30+
text-align: center;
31+
color: #fff;
32+
}
33+
34+
div[carousel-item] > *:nth-child(2n) {
35+
background-color: #009688;
36+
}
37+
38+
div[carousel-item] > *:nth-child(2n+1) {
39+
background-color: #5FB878;
40+
}
41+
</style>

0 commit comments

Comments
 (0)