Skip to content

Commit aacd147

Browse files
kouchaokouchao
committed
新增 轮播组件，轮播demo
1 parent 66ed0f7 commit aacd147

File tree

3 files changed

+143
-19
lines changed

3 files changed

+143
-19
lines changed

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

Lines changed: 79 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,30 @@
11
<template>
2-
<div class="layui-carousel" lay-anim="" lay-indicator="inside" :lay-arrow="arrow"
3-
style="width: 600px;" :style="{
4-
height: height + 'px'
5-
}">
2+
<div class="layui-carousel"
3+
:lay-anim="anim"
4+
:lay-indicator="indicator"
5+
:lay-arrow="arrow"
6+
:style="{
7+
height: height + 'px',
8+
width: width + 'px'
9+
}"
10+
@mouseenter="handleEnter"
11+
@mouseleave="handleLeave">
612
<div carousel-item="">
713
<slot></slot>
814
</div>
9-
<div class="layui-carousel-ind">
15+
<div class="layui-carousel-ind" :style="anim == 'updown' ? 'margin-top: -46px;': ''">
1016
<ul>
1117
<li v-for="item in items" :class="{'layui-this': item.isActive}"></li>
1218
</ul>
1319
</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>
20+
<button class="layui-icon layui-carousel-arrow" @click="handleSub" lay-type="sub">
21+
<i v-if="anim == 'updown'" class="layui-icon layui-icon-up"></i>
22+
<i v-else class="layui-icon layui-icon-left"></i>
23+
</button>
24+
<button class="layui-icon layui-carousel-arrow" @click="handleAdd" lay-type="add">
25+
<i v-if="anim == 'updown'" class="layui-icon layui-icon-down"></i>
26+
<i v-else class="layui-icon layui-icon-right"></i>
27+
</button>
1628
</div>
1729
</template>
1830

@@ -26,23 +38,50 @@
2638
prevItem: '',
2739
items: [],
2840
righting: false,
29-
lefting: false
41+
lefting: false,
42+
timer: ''
3043
}
3144
},
3245
props: {
3346
arrow: {
3447
type: String,
35-
default: 'always'
48+
default: () => 'always'
3649
},
3750
height: {
3851
type: Number,
39-
default: 280
40-
}
41-
},
42-
mounted() {
43-
52+
default: () => 280
53+
},
54+
width: {
55+
type: Number,
56+
default: () => 600
57+
},
58+
anim: {
59+
type: String,
60+
default: () => 'default'
61+
},
62+
indicator: {
63+
type: String,
64+
default: () => 'inside'
65+
},
66+
autoplay: {
67+
type: Boolean,
68+
default: () => true
69+
},
70+
interval: {
71+
type: Number,
72+
default: () => 1500
73+
}
4474
},
75+
mounted() {
76+
this.play()
77+
},
4578
methods: {
79+
handleEnter(){
80+
this.stop()
81+
},
82+
handleLeave() {
83+
this.play()
84+
},
4685
handleSub() {
4786
if (this.lefting) {
4887
return false
@@ -99,8 +138,33 @@
99138
this.prevItem = activeIndex == 0 ? this.items[this.items.length - 1] : this.items[activeIndex - 1]
100139
101140
this.updateItem()
141+
},
142+
play() {
143+
if (this.autoplay) {
144+
if (this.timer) clearInterval(this.timer)
145+
this.timer = setInterval(() => {
146+
this.handleAdd()
147+
}, this.interval)
148+
} else {
149+
this.stop()
150+
}
151+
},
152+
stop() {
153+
if (this.autoplay) {
154+
if (this.timer) clearInterval(this.timer)
155+
}
102156
}
103-
}
157+
},
158+
watch: {
159+
autoplay() {
160+
if (this.timer) clearInterval(this.timer)
161+
this.play()
162+
},
163+
interval(){
164+
if (this.timer) clearInterval(this.timer)
165+
this.play()
166+
}
167+
}
104168
}
105169
</script>
106170

‎src/components/input/src/input.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,15 @@
2626
},
2727
name: String,
2828
required: Boolean,
29-
width: Number
29+
width: Number,
30+
number: Boolean
3031
},
3132
methods: {
3233
handleChange: function () {
3334
if (!this.disabled) {
34-
this.$emit('input', event.target.value)
35+
const value = event.target.value
36+
37+
this.$emit('input', this.number ? (parseInt(value) || 0) : value)
3538
}
3639
}
3740
}

‎src/views/Carousel.vue

Lines changed: 59 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<lay-block color="#f00">该模块正在开发中</lay-block>
3+
<lay-block title="常规轮播"></lay-block>
44
<lay-carousel>
55
<lay-carousel-item>1</lay-carousel-item>
66
<lay-carousel-item>2</lay-carousel-item>
@@ -14,14 +14,71 @@
1414
<lay-carousel-item>3</lay-carousel-item>
1515
<lay-carousel-item>4</lay-carousel-item>
1616
</lay-carousel>
17+
<lay-block title="各种参数设定"></lay-block>
18+
<lay-form>
19+
<lay-form-item label="宽">
20+
<lay-input v-model="width" placeholder="请输入宽" number></lay-input>
21+
</lay-form-item>
22+
<lay-form-item label="高">
23+
<lay-input v-model="height" placeholder="请输入高" number></lay-input>
24+
</lay-form-item>
25+
<lay-form-item label="箭头状态">
26+
<lay-radio v-model="anim" label="default">左右切换</lay-radio>
27+
<lay-radio v-model="anim" label="updown">上下切换</lay-radio>
28+
<lay-radio v-model="anim" label="fade">渐隐渐现</lay-radio>
29+
</lay-form-item>
30+
<lay-form-item label="动画类型">
31+
<lay-radio v-model="arrow" label="hover">悬停显示</lay-radio>
32+
<lay-radio v-model="arrow" label="always">始终显示</lay-radio>
33+
<lay-radio v-model="arrow" label="none">不显示</lay-radio>
34+
</lay-form-item>
35+
<lay-form-item label="指示器位置">
36+
<lay-radio v-model="indicator" label="inside">容器内部</lay-radio>
37+
<lay-radio v-model="indicator" label="outside">容器外部</lay-radio>
38+
<lay-radio v-model="indicator" label="none">不显示</lay-radio>
39+
</lay-form-item>
40+
<lay-form-item label="自动切换">
41+
<lay-switch v-model="autoplay">
42+
</lay-switch>
43+
</lay-form-item>
44+
<lay-form-item label="时间间隔">
45+
<lay-input v-model="interval" placeholder="请输入时间间隔" number></lay-input>
46+
</lay-form-item>
47+
48+
</lay-form>
49+
50+
<lay-carousel :arrow="arrow"
51+
:anim="anim"
52+
:indicator="indicator"
53+
:width="width"
54+
:height="height"
55+
:autoplay="autoplay"
56+
:interval="interval"
57+
style="margin-bottom: 50px;">
58+
<lay-carousel-item>1</lay-carousel-item>
59+
<lay-carousel-item>2</lay-carousel-item>
60+
<lay-carousel-item>3</lay-carousel-item>
61+
<lay-carousel-item>4</lay-carousel-item>
62+
</lay-carousel>
1763

1864

1965
</div>
2066
</template>
2167

2268
<script>
2369
export default {
24-
name: "Carousel"
70+
name: "Carousel",
71+
data(){
72+
return {
73+
anim: 'default',
74+
arrow: 'hover',
75+
indicator: 'inside',
76+
width: 600,
77+
height: 280,
78+
autoplay: true,
79+
interval: 1500
80+
}
81+
}
2582
}
2683
</script>
2784

0 commit comments

Comments
 (0)