Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DiDi
cube-ui
提交
f480c736
C
cube-ui
项目概览
DiDi
/
cube-ui
11 个月 前同步成功
通知
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,发现更多精彩内容 >>
提交
f480c736
编写于
6月 06, 2018
作者:
D
dolymood
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs(Popup): position and mask-closable doc
上级
5047372a
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
56 addition
and
8 deletion
+56
-8
document/components/docs/en-US/popup.md
document/components/docs/en-US/popup.md
+29
-0
document/components/docs/zh-CN/popup.md
document/components/docs/zh-CN/popup.md
+27
-8
未找到文件。
document/components/docs/en-US/popup.md
浏览文件 @
f480c736
...
...
@@ -65,6 +65,33 @@ __Notice:__ All the components above used create-api, so you should read [create
You only need to pass the HTML fragment on to
`content`
.
-
Control the content position & mask closable
<sup>
1.9.6
</sup>
```
html
<cube-popup
type=
"my-popup"
:position=
"position"
:mask-closable=
"true"
ref=
"myPopup4"
>
My Popup Content 4
</cube-popup>
<cube-button
@
click=
"showPopup"
>
top/right/bottom/left/center
</cube-button>
```
```
js
const
positions
=
[
'
top
'
,
'
right
'
,
'
bottom
'
,
'
left
'
,
'
center
'
]
let
cur
=
0
export
default
{
data
()
{
return
{
position
:
''
}
},
methods
:
{
showPopup
()
{
const
component
=
this
.
$refs
.
myPopup4
component
.
show
()
setTimeout
(()
=>
{
component
.
hide
()
},
2000
)
}
}
}
```
You can use
`position`
to control the content's position and use
`mask-closable`
to control mask closable.
-
Setting to bottom
```
html
...
...
@@ -133,6 +160,8 @@ __Notice:__ All the components above used create-api, so you should read [create
| mask | whether to show background layer | Boolean | true/false | true |
| content | content, HTML string, valid when there's no slot | String | - | '' |
| center | whether to be in center in horizontal and vertical direction | Boolean | true/false | true |
| position
<sup>
1.9.6
</sup>
| content position, if set position then
`center`
will be ignored | String | top/right/bottom/left/center | '' |
| mask-closable
<sup>
1.9.6
</sup>
| whether hide the component when clicked the mask layer | Boolean | true/false | false |
### Events
...
...
document/components/docs/zh-CN/popup.md
浏览文件 @
f480c736
...
...
@@ -56,16 +56,33 @@ __注:__ 以上组件都是基于 create-api 实现,所以在使用之前,
</cube-button>
```
只需要传入
`content`
,内容是一段 HTML 片段
-
置底
-
控制位置&蒙层点击隐藏
<sup>
1.9.6
</sup>
```
html
<cube-popup
type=
"my-popup"
:center=
"false"
ref=
"myPopup4"
>
My Popup Content 4
</cube-popup>
<cube-button
@
click=
"showPopup('myPopup4')"
>
Show Popup - bottom
</cube-button>
<cube-popup
type=
"my-popup"
:position=
"position"
:mask-closable=
"true"
ref=
"myPopup4"
>
My Popup Content 4
</cube-popup>
<cube-button
@
click=
"showPopup"
>
top/right/bottom/left/center
</cube-button>
```
考虑移动端场景,大部分时候弹层类都是居中或置底的(置底的时候是在水平方向铺满的),所以如果设置了
`center`
为
`false`
的话,就是置底的效果
```
js
const
positions
=
[
'
top
'
,
'
right
'
,
'
bottom
'
,
'
left
'
,
'
center
'
]
let
cur
=
0
export
default
{
data
()
{
return
{
position
:
''
}
},
methods
:
{
showPopup
()
{
const
component
=
this
.
$refs
.
myPopup4
component
.
show
()
setTimeout
(()
=>
{
component
.
hide
()
},
2000
)
}
}
}
```
可通过
`position`
控制内容出现位置,通过
`mask-closable`
控制点击蒙层是否关闭。
-
上层封装
```
html
<template>
...
...
@@ -120,6 +137,8 @@ __注:__ 以上组件都是基于 create-api 实现,所以在使用之前,
| mask | 是否显示背景层 | Boolean | true/false | true |
| content | 内容,HTML 字符串,在无插槽的时候有效 | String | - | '' |
| center | 是否水平垂直居中的 | Boolean | true/false | true |
| position
<sup>
1.9.6
</sup>
| 内容展示位置,优先级比 center 高 | String | top/right/bottom/left/center | '' |
| mask-closable
<sup>
1.9.6
</sup>
| 点击蒙层是否隐藏 | Boolean | true/false | false |
### 事件
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录