Skip to content

Commit f9eb198

Browse files
dolymooddolymood
committed
fix issue #41 #42 
1 parent 81f92d9 commit f9eb198

File tree

4 files changed

+245
-22
lines changed

4 files changed

+245
-22
lines changed

‎document/components/docs/en-US/slide.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,14 @@
4646
}
4747
```
4848

49+
- Initial Index
50+
51+
Initial Index value, default 0.
52+
53+
```html
54+
<cube-slide :initial-index="1"></cube-slide>
55+
```
56+
4957
- Loop play
5058

5159
Loop play is turned on by default. You can cnfigure that with `loop` attribute.
@@ -88,16 +96,88 @@
8896
<cube-slide :speed="200"></cube-slide>
8997
```
9098

99+
100+
- refresh method
101+
102+
When Slide Items updated or Slide props updated, you can call `refresh` method to update Slide view.
103+
104+
```html
105+
<cube-slide ref="slide">
106+
<cube-slide-item v-for="(item, index) in items" :key="index">
107+
<a :href="item.url">
108+
<img :src="item.image">
109+
</a>
110+
</cube-slide-item>
111+
</cube-slide>
112+
```
113+
```js
114+
const item3 = {
115+
url: 'http://www.didichuxing.com/',
116+
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
117+
}
118+
export default {
119+
data() {
120+
return {
121+
items: [
122+
{
123+
url: 'http://www.didichuxing.com/',
124+
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
125+
},
126+
{
127+
url: 'http://www.didichuxing.com/',
128+
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
129+
}
130+
]
131+
}
132+
},
133+
mounted() {
134+
setTimeout(() => {
135+
this.items.push(item3)
136+
this.$refs.slide.refresh()
137+
}, 2000)
138+
}
139+
}
140+
```
141+
142+
Added an new slide item 2 seconds later and called `refresh`.
143+
144+
- Modify dots style
145+
146+
Default dot, you can change it by using dots slot.
147+
148+
```html
149+
<cube-slide>
150+
<template slot="dots" slot-scope="props">
151+
<span
152+
class="my-dot"
153+
:class="{active: props.current === index}"
154+
v-for="(item, index) in props.dots">
155+
{{index + 1}}
156+
</span>
157+
</template>
158+
</cube-slide>
159+
```
160+
161+
The scoped slots provide two parameters: current active index `current` and slide items length `dots`.
162+
91163
### Props configuration
92164

93165
| Attribute | Description | Type | Accepted Values | Default |
94166
| - | - | - | - | - |
167+
| initialIndex | initial index | Number | - | 0 |
95168
| loop | whether to loop play | Boolean | true/false | true |
96169
| autoPlay | whether to play automatically | Boolean | true/false | true |
97170
| interval | interval of play | Number | - | 4000 |
98171
| threshold | sliding threshold of switching pages | Number | (0, 1) | 0.3 |
99172
| speed | speed of switching pages | Number | - | 400 |
100173

174+
### Slot
175+
176+
| Name | Description | Scope Parameters |
177+
| - | - | - |
178+
| default | Default content contains cube-slide-item components | - |
179+
| dots | Dots content | dots: Slide items length <br> current: current active index |
180+
101181
### Events
102182

103183
| Event Name | Description | Parameters |

‎document/components/docs/zh-CN/slide.md‎

Lines changed: 79 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,12 @@
2525
{
2626
url: 'http://www.didichuxing.com/',
2727
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
28-
}, {
28+
},
29+
{
2930
url: 'http://www.didichuxing.com/',
3031
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
31-
}, {
32+
},
33+
{
3234
url: 'http://www.didichuxing.com/',
3335
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
3436
}
@@ -46,12 +48,19 @@
4648
}
4749
```
4850

51+
- 初始索引
52+
53+
初始化时展示的位置索引值，默认为 0。
54+
55+
```html
56+
<cube-slide :initial-index="1"></cube-slide>
57+
```
58+
4959
- 循环播放
5060

5161
默认开启循环播放，可通过 loop 属性配置。
5262

5363
```html
54-
<cube-slide></cube-slide>
5564
<cube-slide :loop="false"></cube-slide>
5665
```
5766

@@ -60,7 +69,6 @@
6069
默认开启自动播放，可通过 auto-play 属性配置。
6170

6271
```html
63-
<cube-slide></cube-slide>
6472
<cube-slide :auto-play="false"></cube-slide>
6573
```
6674

@@ -78,6 +86,7 @@
7886

7987
```html
8088
<cube-slide :threshold="0.4"></cube-slide>
89+
```
8190

8291
- 切换页面的速度
8392

@@ -87,16 +96,82 @@
8796
<cube-slide :speed="200"></cube-slide>
8897
```
8998

99+
- refresh 方法
100+
101+
当新增或者删除 Slide Item 项或者修改 Slide 配置的时候，可以调用实例的 refresh 方法更新 Slide。
102+
103+
```html
104+
<cube-slide ref="slide">
105+
<cube-slide-item v-for="(item, index) in items" :key="index">
106+
<a :href="item.url">
107+
<img :src="item.image">
108+
</a>
109+
</cube-slide-item>
110+
</cube-slide>
111+
```
112+
```js
113+
const item3 = {
114+
url: 'http://www.didichuxing.com/',
115+
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
116+
}
117+
export default {
118+
data() {
119+
return {
120+
items: [
121+
{
122+
url: 'http://www.didichuxing.com/',
123+
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
124+
},
125+
{
126+
url: 'http://www.didichuxing.com/',
127+
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
128+
}
129+
]
130+
}
131+
},
132+
mounted() {
133+
setTimeout(() => {
134+
this.items.push(item3)
135+
this.$refs.slide.refresh()
136+
}, 2000)
137+
}
138+
}
139+
```
140+
141+
延迟 2 秒钟后新增一个 Slide Item，新增完成后需要调用 refresh 方法更新。
142+
143+
- 修改 dots 内容
144+
145+
默认是点，可通过插槽修改。
146+
147+
```html
148+
<cube-slide>
149+
<template slot="dots" slot-scope="props">
150+
<span class="my-dot" :class="{active: props.current === index}" v-for="(item, index) in props.dots">{{index + 1}}</span>
151+
</template>
152+
</cube-slide>
153+
```
154+
155+
作用域插槽提供了所需的当前索引值 `current` 以及长度 `dots`。
156+
90157
### Props 配置
91158

92159
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
93160
| - | - | - | - | - |
161+
| initialIndex | 初始索引值 | Number | - | 0 |
94162
| loop | 是否循环播放 | Boolean | true/false | true |
95163
| autoPlay | 是否自动播放 | Boolean | true/false | true |
96164
| interval | 播放间隔 | Number | - | 4000 |
97165
| threshold | 切换页面的滑动阈值 | Number | (0, 1) | 0.3 |
98166
| speed | 切换页面的速度 | Number | - | 400 |
99167

168+
### 插槽
169+
170+
| 名字 | 说明 | 作用域参数 |
171+
| - | - | - |
172+
| default | 默认内容，由 cube-slide-item 构成 | - |
173+
| dots | dots 内容 | dots: 轮播项长度 <br> current: 当前索引 |
174+
100175
### 事件
101176

102177
| 事件名 | 说明 | 参数 |

‎example/pages/slide.vue‎

Lines changed: 65 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<cube-slide
66
v-if="ifSlide"
77
ref="slide"
8+
:initial-index="initialIndex"
89
:loop="loop"
910
:auto-play="autoPlay"
1011
:interval="interval"
@@ -16,10 +17,17 @@
1617
<img :src="item.image">
1718
</a>
1819
</cube-slide-item>
20+
<template v-if="dotsSlot" slot="dots" slot-scope="props">
21+
<span class="my-dot" :class="{active: props.current === index}" v-for="(item, index) in props.dots">{{index + 1}}</span>
22+
</template>
1923
</cube-slide>
2024
</div>
2125
<div class="options">
2226
<div class="option-list">
27+
<div class="group">
28+
<input-option class="item" name="InitialIndex" :value="initialIndex"
29+
@update:value="updateInitialIndex"></input-option>
30+
</div>
2331
<div class="group">
2432
<switch-option class="item" name="Loop" :value="loop"
2533
@update:value="updateLoop"></switch-option>
@@ -38,6 +46,14 @@
3846
<input-option class="item" name="Speed" :value="speed"
3947
@update:value="updateSpeed"></input-option>
4048
</div>
49+
<div class="group">
50+
<switch-option class="item" name="Add Slide Item3" :value="addItem3"
51+
@update:value="updateItem3"></switch-option>
52+
</div>
53+
<div class="group">
54+
<switch-option class="item" name="Dots Slot" :value="dotsSlot"
55+
@update:value="updateDotsSlot"></switch-option>
56+
</div>
4157
</div>
4258
</div>
4359
</div>
@@ -49,6 +65,10 @@
4965
import SwitchOption from '../components/switch-option'
5066
import InputOption from '../components/input-option'
5167
68+
const item3 = {
69+
url: 'http://www.didichuxing.com/',
70+
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
71+
}
5272
export default{
5373
data() {
5474
return {
@@ -59,23 +79,26 @@
5979
}, {
6080
url: 'http://www.didichuxing.com/',
6181
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
62-
}, {
63-
url: 'http://www.didichuxing.com/',
64-
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
6582
}
6683
],
6784
ifSlide: true,
6885
loop: true,
6986
autoPlay: true,
7087
interval: 4000,
7188
threshold: 0.3,
72-
speed: 400
89+
speed: 400,
90+
initialIndex: 1,
91+
dotsSlot: false,
92+
addItem3: false
7393
}
7494
},
7595
watch: {
7696
loop() {
7797
this.rebuildSlide()
7898
},
99+
dotsSlot() {
100+
this.rebuildSlide()
101+
},
79102
autoPlay() {
80103
this.rebuildSlide()
81104
},
@@ -87,6 +110,14 @@
87110
},
88111
speed() {
89112
this.rebuildSlide()
113+
},
114+
addItem3(newV) {
115+
if (newV) {
116+
this.items.push(item3)
117+
} else {
118+
this.items.pop()
119+
}
120+
this.rebuildSlide()
90121
}
91122
},
92123
methods: {
@@ -103,20 +134,40 @@
103134
// this.ifSlide = true
104135
// })
105136
},
137+
updateItem3(val) {
138+
this.addItem3 = val
139+
},
106140
updateLoop(val) {
107141
this.loop = val
108142
},
143+
updateDotsSlot(val) {
144+
this.dotsSlot = val
145+
},
109146
updateAutoPlay(val) {
110147
this.autoPlay = val
111148
},
112149
updateInterval(val) {
113-
this.interval = val
150+
val = +val
151+
if (val) {
152+
this.interval = val
153+
}
114154
},
115155
updateThreshold(val) {
116-
this.threshold = val
156+
val = +val
157+
if (val) {
158+
this.threshold = val
159+
}
117160
},
118161
updateSpeed(val) {
119-
this.speed = val
162+
val = +val
163+
if (val) {
164+
this.speed = val
165+
}
166+
},
167+
updateInitialIndex(val) {
168+
if (val) {
169+
this.initialIndex = +val
170+
}
120171
}
121172
},
122173
components: {
@@ -135,4 +186,11 @@
135186
border-radius: 2px
136187
overflow: hidden
137188
box-shadow: 0 2px 9px #ddd
189+
.cube-slide-dots
190+
.my-dot
191+
height: auto
192+
font-size: 12px
193+
background: none
194+
&.active
195+
color: #fc9153
138196
</style>

0 commit comments

Comments
 (0)