Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DiDi
cube-ui
提交
f9eb1981
C
cube-ui
项目概览
DiDi
/
cube-ui
12 个月 前同步成功
通知
34
Star
9078
Fork
1508
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
C
cube-ui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
f9eb1981
编写于
12月 15, 2017
作者:
D
dolymood
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix issue #41 #42
上级
81f92d98
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
245 addition
and
22 deletion
+245
-22
document/components/docs/en-US/slide.md
document/components/docs/en-US/slide.md
+80
-0
document/components/docs/zh-CN/slide.md
document/components/docs/zh-CN/slide.md
+79
-4
example/pages/slide.vue
example/pages/slide.vue
+65
-7
src/components/slide/slide.vue
src/components/slide/slide.vue
+21
-11
未找到文件。
document/components/docs/en-US/slide.md
浏览文件 @
f9eb1981
...
@@ -46,6 +46,14 @@
...
@@ -46,6 +46,14 @@
}
}
```
```
-
Initial Index
Initial Index value, default 0.
```
html
<cube-slide
:initial-index=
"1"
></cube-slide>
```
-
Loop play
-
Loop play
Loop play is turned on by default. You can cnfigure that with
`loop`
attribute.
Loop play is turned on by default. You can cnfigure that with
`loop`
attribute.
...
@@ -88,16 +96,88 @@
...
@@ -88,16 +96,88 @@
<cube-slide
:speed=
"200"
></cube-slide>
<cube-slide
:speed=
"200"
></cube-slide>
```
```
-
refresh method
When Slide Items updated or Slide props updated, you can call
`refresh`
method to update Slide view.
```
html
<cube-slide
ref=
"slide"
>
<cube-slide-item
v-for=
"(item, index) in items"
:key=
"index"
>
<a
:href=
"item.url"
>
<img
:src=
"item.image"
>
</a>
</cube-slide-item>
</cube-slide>
```
```
js
const
item3
=
{
url
:
'
http://www.didichuxing.com/
'
,
image
:
'
//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png
'
}
export
default
{
data
()
{
return
{
items
:
[
{
url
:
'
http://www.didichuxing.com/
'
,
image
:
'
//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png
'
},
{
url
:
'
http://www.didichuxing.com/
'
,
image
:
'
//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png
'
}
]
}
},
mounted
()
{
setTimeout
(()
=>
{
this
.
items
.
push
(
item3
)
this
.
$refs
.
slide
.
refresh
()
},
2000
)
}
}
```
Added an new slide item 2 seconds later and called
`refresh`
.
-
Modify dots style
Default dot, you can change it by using dots slot.
```
html
<cube-slide>
<template
slot=
"dots"
slot-scope=
"props"
>
<span
class=
"my-dot"
:class=
"{active: props.current === index}"
v-for=
"(item, index) in props.dots"
>
{{index + 1}}
</span>
</template>
</cube-slide>
```
The scoped slots provide two parameters: current active index
`current`
and slide items length
`dots`
.
### Props configuration
### Props configuration
| Attribute | Description | Type | Accepted Values | Default |
| Attribute | Description | Type | Accepted Values | Default |
| - | - | - | - | - |
| - | - | - | - | - |
| initialIndex | initial index | Number | - | 0 |
| loop | whether to loop play | Boolean | true/false | true |
| loop | whether to loop play | Boolean | true/false | true |
| autoPlay | whether to play automatically | Boolean | true/false | true |
| autoPlay | whether to play automatically | Boolean | true/false | true |
| interval | interval of play | Number | - | 4000 |
| interval | interval of play | Number | - | 4000 |
| threshold | sliding threshold of switching pages | Number | (0, 1) | 0.3 |
| threshold | sliding threshold of switching pages | Number | (0, 1) | 0.3 |
| speed | speed of switching pages | Number | - | 400 |
| speed | speed of switching pages | Number | - | 400 |
### Slot
| Name | Description | Scope Parameters |
| - | - | - |
| default | Default content contains cube-slide-item components | - |
| dots | Dots content | dots: Slide items length
<br>
current: current active index |
### Events
### Events
| Event Name | Description | Parameters |
| Event Name | Description | Parameters |
...
...
document/components/docs/zh-CN/slide.md
浏览文件 @
f9eb1981
...
@@ -25,10 +25,12 @@
...
@@ -25,10 +25,12 @@
{
{
url
:
'
http://www.didichuxing.com/
'
,
url
:
'
http://www.didichuxing.com/
'
,
image
:
'
//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png
'
image
:
'
//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png
'
},
{
},
{
url
:
'
http://www.didichuxing.com/
'
,
url
:
'
http://www.didichuxing.com/
'
,
image
:
'
//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png
'
image
:
'
//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png
'
},
{
},
{
url
:
'
http://www.didichuxing.com/
'
,
url
:
'
http://www.didichuxing.com/
'
,
image
:
'
//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png
'
image
:
'
//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png
'
}
}
...
@@ -46,12 +48,19 @@
...
@@ -46,12 +48,19 @@
}
}
```
```
-
初始索引
初始化时展示的位置索引值,默认为 0。
```
html
<cube-slide
:initial-index=
"1"
></cube-slide>
```
-
循环播放
-
循环播放
默认开启循环播放,可通过 loop 属性配置。
默认开启循环播放,可通过 loop 属性配置。
```
html
```
html
<cube-slide></cube-slide>
<cube-slide
:loop=
"false"
></cube-slide>
<cube-slide
:loop=
"false"
></cube-slide>
```
```
...
@@ -60,7 +69,6 @@
...
@@ -60,7 +69,6 @@
默认开启自动播放,可通过 auto-play 属性配置。
默认开启自动播放,可通过 auto-play 属性配置。
```
html
```
html
<cube-slide></cube-slide>
<cube-slide
:auto-play=
"false"
></cube-slide>
<cube-slide
:auto-play=
"false"
></cube-slide>
```
```
...
@@ -78,6 +86,7 @@
...
@@ -78,6 +86,7 @@
```
html
```
html
<cube-slide
:threshold=
"0.4"
></cube-slide>
<cube-slide
:threshold=
"0.4"
></cube-slide>
```
-
切换页面的速度
-
切换页面的速度
...
@@ -87,16 +96,82 @@
...
@@ -87,16 +96,82 @@
<cube-slide
:speed=
"200"
></cube-slide>
<cube-slide
:speed=
"200"
></cube-slide>
```
```
-
refresh 方法
当新增或者删除 Slide Item 项或者修改 Slide 配置的时候,可以调用实例的 refresh 方法更新 Slide。
```
html
<cube-slide
ref=
"slide"
>
<cube-slide-item
v-for=
"(item, index) in items"
:key=
"index"
>
<a
:href=
"item.url"
>
<img
:src=
"item.image"
>
</a>
</cube-slide-item>
</cube-slide>
```
```
js
const
item3
=
{
url
:
'
http://www.didichuxing.com/
'
,
image
:
'
//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png
'
}
export
default
{
data
()
{
return
{
items
:
[
{
url
:
'
http://www.didichuxing.com/
'
,
image
:
'
//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png
'
},
{
url
:
'
http://www.didichuxing.com/
'
,
image
:
'
//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png
'
}
]
}
},
mounted
()
{
setTimeout
(()
=>
{
this
.
items
.
push
(
item3
)
this
.
$refs
.
slide
.
refresh
()
},
2000
)
}
}
```
延迟 2 秒钟后新增一个 Slide Item,新增完成后需要调用 refresh 方法更新。
-
修改 dots 内容
默认是点,可通过插槽修改。
```
html
<cube-slide>
<template
slot=
"dots"
slot-scope=
"props"
>
<span
class=
"my-dot"
:class=
"{active: props.current === index}"
v-for=
"(item, index) in props.dots"
>
{{index + 1}}
</span>
</template>
</cube-slide>
```
作用域插槽提供了所需的当前索引值
`current`
以及长度
`dots`
。
### Props 配置
### Props 配置
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| - | - | - | - | - |
| - | - | - | - | - |
| initialIndex | 初始索引值 | Number | - | 0 |
| loop | 是否循环播放 | Boolean | true/false | true |
| loop | 是否循环播放 | Boolean | true/false | true |
| autoPlay | 是否自动播放 | Boolean | true/false | true |
| autoPlay | 是否自动播放 | Boolean | true/false | true |
| interval | 播放间隔 | Number | - | 4000 |
| interval | 播放间隔 | Number | - | 4000 |
| threshold | 切换页面的滑动阈值 | Number | (0, 1) | 0.3 |
| threshold | 切换页面的滑动阈值 | Number | (0, 1) | 0.3 |
| speed | 切换页面的速度 | Number | - | 400 |
| speed | 切换页面的速度 | Number | - | 400 |
### 插槽
| 名字 | 说明 | 作用域参数 |
| - | - | - |
| default | 默认内容,由 cube-slide-item 构成 | - |
| dots | dots 内容 | dots: 轮播项长度
<br>
current: 当前索引 |
### 事件
### 事件
| 事件名 | 说明 | 参数 |
| 事件名 | 说明 | 参数 |
...
...
example/pages/slide.vue
浏览文件 @
f9eb1981
...
@@ -5,6 +5,7 @@
...
@@ -5,6 +5,7 @@
<cube-slide
<cube-slide
v-if=
"ifSlide"
v-if=
"ifSlide"
ref=
"slide"
ref=
"slide"
:initial-index=
"initialIndex"
:loop=
"loop"
:loop=
"loop"
:auto-play=
"autoPlay"
:auto-play=
"autoPlay"
:interval=
"interval"
:interval=
"interval"
...
@@ -16,10 +17,17 @@
...
@@ -16,10 +17,17 @@
<img
:src=
"item.image"
>
<img
:src=
"item.image"
>
</a>
</a>
</cube-slide-item>
</cube-slide-item>
<template
v-if=
"dotsSlot"
slot=
"dots"
slot-scope=
"props"
>
<span
class=
"my-dot"
:class=
"
{active: props.current === index}" v-for="(item, index) in props.dots">
{{
index
+
1
}}
</span>
</
template
>
</cube-slide>
</cube-slide>
</div>
</div>
<div
class=
"options"
>
<div
class=
"options"
>
<div
class=
"option-list"
>
<div
class=
"option-list"
>
<div
class=
"group"
>
<input-option
class=
"item"
name=
"InitialIndex"
:value=
"initialIndex"
@
update:value=
"updateInitialIndex"
></input-option>
</div>
<div
class=
"group"
>
<div
class=
"group"
>
<switch-option
class=
"item"
name=
"Loop"
:value=
"loop"
<switch-option
class=
"item"
name=
"Loop"
:value=
"loop"
@
update:value=
"updateLoop"
></switch-option>
@
update:value=
"updateLoop"
></switch-option>
...
@@ -38,6 +46,14 @@
...
@@ -38,6 +46,14 @@
<input-option
class=
"item"
name=
"Speed"
:value=
"speed"
<input-option
class=
"item"
name=
"Speed"
:value=
"speed"
@
update:value=
"updateSpeed"
></input-option>
@
update:value=
"updateSpeed"
></input-option>
</div>
</div>
<div
class=
"group"
>
<switch-option
class=
"item"
name=
"Add Slide Item3"
:value=
"addItem3"
@
update:value=
"updateItem3"
></switch-option>
</div>
<div
class=
"group"
>
<switch-option
class=
"item"
name=
"Dots Slot"
:value=
"dotsSlot"
@
update:value=
"updateDotsSlot"
></switch-option>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
...
@@ -49,6 +65,10 @@
...
@@ -49,6 +65,10 @@
import
SwitchOption
from
'
../components/switch-option
'
import
SwitchOption
from
'
../components/switch-option
'
import
InputOption
from
'
../components/input-option
'
import
InputOption
from
'
../components/input-option
'
const
item3
=
{
url
:
'
http://www.didichuxing.com/
'
,
image
:
'
//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png
'
}
export
default
{
export
default
{
data
()
{
data
()
{
return
{
return
{
...
@@ -59,9 +79,6 @@
...
@@ -59,9 +79,6 @@
},
{
},
{
url
:
'
http://www.didichuxing.com/
'
,
url
:
'
http://www.didichuxing.com/
'
,
image
:
'
//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png
'
image
:
'
//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png
'
},
{
url
:
'
http://www.didichuxing.com/
'
,
image
:
'
//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png
'
}
}
],
],
ifSlide
:
true
,
ifSlide
:
true
,
...
@@ -69,13 +86,19 @@
...
@@ -69,13 +86,19 @@
autoPlay
:
true
,
autoPlay
:
true
,
interval
:
4000
,
interval
:
4000
,
threshold
:
0.3
,
threshold
:
0.3
,
speed
:
400
speed
:
400
,
initialIndex
:
1
,
dotsSlot
:
false
,
addItem3
:
false
}
}
},
},
watch
:
{
watch
:
{
loop
()
{
loop
()
{
this
.
rebuildSlide
()
this
.
rebuildSlide
()
},
},
dotsSlot
()
{
this
.
rebuildSlide
()
},
autoPlay
()
{
autoPlay
()
{
this
.
rebuildSlide
()
this
.
rebuildSlide
()
},
},
...
@@ -87,6 +110,14 @@
...
@@ -87,6 +110,14 @@
},
},
speed
()
{
speed
()
{
this
.
rebuildSlide
()
this
.
rebuildSlide
()
},
addItem3
(
newV
)
{
if
(
newV
)
{
this
.
items
.
push
(
item3
)
}
else
{
this
.
items
.
pop
()
}
this
.
rebuildSlide
()
}
}
},
},
methods
:
{
methods
:
{
...
@@ -103,20 +134,40 @@
...
@@ -103,20 +134,40 @@
// this.ifSlide = true
// this.ifSlide = true
// })
// })
},
},
updateItem3
(
val
)
{
this
.
addItem3
=
val
},
updateLoop
(
val
)
{
updateLoop
(
val
)
{
this
.
loop
=
val
this
.
loop
=
val
},
},
updateDotsSlot
(
val
)
{
this
.
dotsSlot
=
val
},
updateAutoPlay
(
val
)
{
updateAutoPlay
(
val
)
{
this
.
autoPlay
=
val
this
.
autoPlay
=
val
},
},
updateInterval
(
val
)
{
updateInterval
(
val
)
{
this
.
interval
=
val
val
=
+
val
if
(
val
)
{
this
.
interval
=
val
}
},
},
updateThreshold
(
val
)
{
updateThreshold
(
val
)
{
this
.
threshold
=
val
val
=
+
val
if
(
val
)
{
this
.
threshold
=
val
}
},
},
updateSpeed
(
val
)
{
updateSpeed
(
val
)
{
this
.
speed
=
val
val
=
+
val
if
(
val
)
{
this
.
speed
=
val
}
},
updateInitialIndex
(
val
)
{
if
(
val
)
{
this
.
initialIndex
=
+
val
}
}
}
},
},
components
:
{
components
:
{
...
@@ -135,4 +186,11 @@
...
@@ -135,4 +186,11 @@
border-radius: 2px
border-radius: 2px
overflow: hidden
overflow: hidden
box-shadow: 0 2px 9px #ddd
box-shadow: 0 2px 9px #ddd
.cube-slide-dots
.my-dot
height: auto
font-size: 12px
background: none
&.active
color: #fc9153
</
style
>
</
style
>
src/components/slide/slide.vue
浏览文件 @
f9eb1981
...
@@ -4,7 +4,9 @@
...
@@ -4,7 +4,9 @@
<slot></slot>
<slot></slot>
</div>
</div>
<div
class=
"cube-slide-dots"
>
<div
class=
"cube-slide-dots"
>
<span
:class=
"
{active: currentPageIndex === index}" v-for="(item, index) in dots">
</span>
<slot
name=
"dots"
:current=
"currentPageIndex"
:dots=
"dots"
>
<span
:class=
"
{active: currentPageIndex === index}" v-for="(item, index) in dots">
</span>
</slot>
</div>
</div>
</div>
</div>
</
template
>
</
template
>
...
@@ -18,6 +20,10 @@
...
@@ -18,6 +20,10 @@
export
default
{
export
default
{
name
:
COMPONENT_NAME
,
name
:
COMPONENT_NAME
,
props
:
{
props
:
{
initialIndex
:
{
type
:
Number
,
default
:
0
},
loop
:
{
loop
:
{
type
:
Boolean
,
type
:
Boolean
,
default
:
true
default
:
true
...
@@ -42,7 +48,14 @@
...
@@ -42,7 +48,14 @@
data
()
{
data
()
{
return
{
return
{
dots
:
0
,
dots
:
0
,
currentPageIndex
:
0
currentPageIndex
:
this
.
initialIndex
||
0
}
},
watch
:
{
initialIndex
(
newIndex
)
{
if
(
newIndex
!==
this
.
currentPageIndex
)
{
this
.
slide
&&
this
.
slide
.
goToPage
(
newIndex
)
}
}
}
},
},
methods
:
{
methods
:
{
...
@@ -53,7 +66,9 @@
...
@@ -53,7 +66,9 @@
if
(
this
.
slide
===
null
)
{
if
(
this
.
slide
===
null
)
{
return
return
}
}
this
.
currentPageIndex
=
0
if
(
this
.
slide
!==
undefined
)
{
this
.
currentPageIndex
=
0
}
this
.
dots
=
0
this
.
dots
=
0
this
.
_setSlideWidth
()
this
.
_setSlideWidth
()
this
.
_initDots
()
this
.
_initDots
()
...
@@ -97,6 +112,8 @@
...
@@ -97,6 +112,8 @@
observeDOM
:
false
observeDOM
:
false
})
})
this
.
slide
.
goToPage
(
this
.
currentPageIndex
,
0
,
0
)
this
.
slide
.
on
(
'
scrollEnd
'
,
this
.
_onScrollEnd
)
this
.
slide
.
on
(
'
scrollEnd
'
,
this
.
_onScrollEnd
)
this
.
slide
.
on
(
'
touchend
'
,
()
=>
{
this
.
slide
.
on
(
'
touchend
'
,
()
=>
{
...
@@ -113,9 +130,6 @@
...
@@ -113,9 +130,6 @@
},
},
_onScrollEnd
()
{
_onScrollEnd
()
{
let
pageIndex
=
this
.
slide
.
getCurrentPage
().
pageX
let
pageIndex
=
this
.
slide
.
getCurrentPage
().
pageX
if
(
this
.
loop
)
{
pageIndex
-=
1
}
if
(
this
.
currentPageIndex
!==
pageIndex
)
{
if
(
this
.
currentPageIndex
!==
pageIndex
)
{
this
.
currentPageIndex
=
pageIndex
this
.
currentPageIndex
=
pageIndex
this
.
$emit
(
EVENT_CHANGE
,
this
.
currentPageIndex
)
this
.
$emit
(
EVENT_CHANGE
,
this
.
currentPageIndex
)
...
@@ -129,13 +143,9 @@
...
@@ -129,13 +143,9 @@
this
.
dots
=
new
Array
(
this
.
children
.
length
)
this
.
dots
=
new
Array
(
this
.
children
.
length
)
},
},
_play
()
{
_play
()
{
let
pageIndex
=
this
.
currentPageIndex
+
1
if
(
this
.
loop
)
{
pageIndex
+=
1
}
clearTimeout
(
this
.
_timer
)
clearTimeout
(
this
.
_timer
)
this
.
_timer
=
setTimeout
(()
=>
{
this
.
_timer
=
setTimeout
(()
=>
{
this
.
slide
.
goToPage
(
pageIndex
,
0
,
400
)
this
.
slide
.
next
(
)
},
this
.
interval
)
},
this
.
interval
)
},
},
_deactivated
()
{
_deactivated
()
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录