Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
5feeb33f
U
uni-app
项目概览
DCloud
/
uni-app
29 天 前同步成功
通知
702
Star
38704
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
7
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
7
Issue
7
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
5feeb33f
编写于
11月 14, 2018
作者:
郭
郭胜强
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'master' of github.com:dcloudio/uni-app
上级
8af25105
6340c16e
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
139 addition
and
172 deletion
+139
-172
examples/hello-uniapp/components/uni-popup.vue
examples/hello-uniapp/components/uni-popup.vue
+83
-0
examples/hello-uniapp/pages/index/index.vue
examples/hello-uniapp/pages/index/index.vue
+0
-33
examples/hello-uniapp/pages/template/popup/popup.vue
examples/hello-uniapp/pages/template/popup/popup.vue
+56
-139
未找到文件。
examples/hello-uniapp/components/uni-popup.vue
0 → 100644
浏览文件 @
5feeb33f
<
template
>
<view>
<view
class=
"uni-mask"
v-show=
"show"
:style=
"
{top:titleHeight}" @click="hide">
</view>
<view
:class=
"['uni-popup','uni-popup-'+type]"
v-show=
"show"
>
{{
msg
}}
<slot></slot>
</view>
</view>
</
template
>
<
script
>
export
default
{
props
:
{
show
:
{
type
:
Boolean
,
default
:
false
},
type
:
{
type
:
String
,
//top - 顶部, middle - 居中, bottom - 底部
default
:
'
middle
'
},
msg
:{
type
:
String
,
default
:
""
}
},
methods
:{
hide
:
function
(){
this
.
$emit
(
'
hidePopup
'
);
}
}
}
</
script
>
<
style
>
.uni-mask
{
position
:
fixed
;
z-index
:
998
;
top
:
0
;
right
:
0
;
bottom
:
0
;
left
:
0
;
background-color
:
rgba
(
0
,
0
,
0
,
.3
);
}
.uni-popup
{
position
:
absolute
;
z-index
:
999
;
background-color
:
#ffffff
;
box-shadow
:
0
0
30
upx
rgba
(
0
,
0
,
0
,
.1
);
}
.uni-popup-middle
{
display
:
flex
;
flex-direction
:
column
;
align-items
:
center
;
width
:
380
upx
;
height
:
380
upx
;
border-radius
:
10
upx
;
top
:
50%
;
left
:
50%
;
transform
:
translate
(
-50%
,
-50%
);
justify-content
:
center
;
padding
:
30
upx
;
}
.uni-popup-top
{
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100
upx
;
line-height
:
100
upx
;
text-align
:
center
;
}
.uni-popup-bottom
{
left
:
0
;
bottom
:
0
;
width
:
100%
;
height
:
100
upx
;
line-height
:
100
upx
;
text-align
:
center
;
}
</
style
>
examples/hello-uniapp/pages/index/index.vue
已删除
100644 → 0
浏览文件 @
8af25105
<
template
>
<view
class=
"content"
>
<view
class=
"uni-h1"
>
HI...
</view>
<view
class=
"uni-h2"
>
HI...
</view>
<view
class=
"uni-h3"
>
HI...
</view>
<view
class=
"uni-h4"
>
HI...
</view>
<view
class=
"uni-h5"
>
HI...
</view>
<view
class=
"uni-h6"
>
HI...
</view>
</view>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
title
:
'
Hello
'
};
}
}
</
script
>
<
style
>
.content
{
flex
:
1
;
justify-content
:
center
;
align-items
:
center
;
}
.title
{
font-size
:
36
upx
;
color
:
#8f8f94
;
}
</
style
>
examples/hello-uniapp/pages/template/popup/popup.vue
浏览文件 @
5feeb33f
<
template
>
<view
class=
"page"
>
<page-head
:title=
"title"
></page-head>
<view
class=
"mask"
v-show=
"showMask"
:style=
"
{top:titleHeight}" @click="hide">
</view>
<view
class=
"popup popup-middle"
v-show=
"showState.middle"
>
<view
class=
"desc"
>
<text>
Hello
</text>
</view>
</view>
<view
class=
"popup popup-top"
v-show=
"showState.top"
>
<text>
顶部 popup
</text>
</view>
<view
class=
"popup popup-bottom"
v-show=
"showState.bottom"
>
<text>
底部 popup
</text>
</view>
<view
class=
"uni-padding-wrap"
>
<view
class=
"uni-btn-v"
>
<button
type=
"button"
@
click=
"show"
>
弹出 popup
</button>
<button
type=
"button"
@
click=
"show"
data-position=
"top"
>
顶部弹出 popup
</button>
<button
type=
"button"
@
click=
"show"
data-position=
"bottom"
>
底部弹出 popup
</button>
<view
class=
"uni-helllo-text uni-common-mt uni-center"
>
请点击下面的按钮进行体验
</view>
<!-- 居中 -->
<uni-popup
:show=
"showPopupMiddle"
:type=
"popType"
v-on:hidePopup=
"hidePopup"
>
<view
class=
"uni-center"
style=
"font-size:0;"
>
<image
class=
"image"
style=
"width:150upx;"
mode=
"widthFix"
src=
"../../../static/uni@2x.png"
/>
</view>
<view
class=
"uni-common-mt uni-helllo-text uni-center"
>
消息内容使用 slot 形式定义
</view>
</uni-popup>
<!-- 顶部 -->
<uni-popup
:show=
"showPopupTop"
:type=
"popType"
:msg=
"msg"
v-on:hidePopup=
"hidePopup"
></uni-popup>
<!-- 底部 -->
<uni-popup
:show=
"showPopupBottom"
:type=
"popType"
:msg=
"msg"
v-on:hidePopup=
"hidePopup"
></uni-popup>
<view
class=
"uni-btn-v uni-common-mt"
>
<button
type=
"button"
@
click=
"showMiddlePopup"
>
居中弹出 popup
</button>
<button
type=
"button"
@
click=
"showTopPopup"
data-position=
"top"
>
顶部弹出 popup
</button>
<button
type=
"button"
@
click=
"showBottomPopup"
data-position=
"bottom"
>
底部弹出 popup
</button>
</view>
</view>
</view>
</
template
>
<
script
>
import
uniPopup
from
"
../../../components/uni-popup.vue
"
;
export
default
{
data
()
{
return
{
title
:
'
popup
'
,
showState
:
{
top
:
false
,
middle
:
false
,
bottom
:
false
},
showMask
:
false
,
activePop
:
'
middle
'
,
titleHeight
:
0
popType
:
'
middle
'
,
title
:
"
popup
"
,
showPopupMiddle
:
false
,
showPopupTop
:
false
,
showPopupBottom
:
false
,
msg
:
""
}
},
onBackPress
()
{
if
(
this
.
showMask
)
{
this
.
showMask
=
false
;
this
.
hide
();
return
true
;
}
},
created
()
{
//#ifdef H5
this
.
titleHeight
=
'
44px
'
//#endif
},
methods
:
{
show
(
evt
)
{
var
pos
=
evt
.
target
.
dataset
.
position
switch
(
pos
)
{
case
'
top
'
:
this
.
activePop
=
'
top
'
break
case
'
bottom
'
:
this
.
activePop
=
'
bottom
'
break
default
:
this
.
activePop
=
'
middle
'
}
this
.
showMask
=
true
this
.
showState
[
this
.
activePop
]
=
true
//统一的关闭popup方法
hidePopup
:
function
(){
this
.
showPopupMiddle
=
false
;
this
.
showPopupTop
=
false
;
this
.
showPopupBottom
=
false
;
},
//展示居中 popup
showMiddlePopup
:
function
(){
this
.
hidePopup
();
this
.
popType
=
"
middle
"
;
this
.
showPopupMiddle
=
true
;
},
hide
()
{
this
.
showMask
=
false
this
.
showState
[
this
.
activePop
]
=
false
//展示顶部 popup
showTopPopup
:
function
(){
this
.
hidePopup
();
this
.
popType
=
'
top
'
;
this
.
msg
=
"
顶部 popup 信息内容
"
;
this
.
showPopupTop
=
true
;
},
//展示底部 popup
showBottomPopup
:
function
(){
this
.
hidePopup
();
this
.
popType
=
'
top
'
;
this
.
msg
=
"
底部 popup 信息内容
"
;
this
.
showPopupBottom
=
true
;
}
},
components
:{
uniPopup
}
}
</
script
>
<
style
>
.mask
{
position
:
fixed
;
z-index
:
998
;
top
:
0
;
right
:
0
;
bottom
:
0
;
left
:
0
;
background-color
:
rgba
(
0
,
0
,
0
,
.3
);
}
.popup
{
position
:
absolute
;
z-index
:
999
;
background-color
:
#ffffff
;
-webkit-box-shadow
:
0
0
30
upx
rgba
(
0
,
0
,
0
,
.1
);
box-shadow
:
0
0
30
upx
rgba
(
0
,
0
,
0
,
.1
);
}
.popup-middle
{
width
:
400
upx
;
height
:
400
upx
;
border-radius
:
10
upx
;
top
:
0
;
right
:
0
;
bottom
:
0
;
left
:
0
;
margin
:
auto
;
}
.popup-top
{
top
:
0
;
width
:
100%
;
height
:
100
upx
;
text-align
:
center
;
}
.popup-top
text
{
line-height
:
100
upx
;
margin-left
:
20
upx
;
font-size
:
32
upx
;
}
.popup-bottom
{
bottom
:
0
;
width
:
100%
;
height
:
100
upx
;
text-align
:
center
;
}
.popup-bottom
text
{
line-height
:
100
upx
;
font-size
:
32
upx
;
}
.popup
.list-view
{
height
:
600
upx
;
}
.list-view-item
{
position
:
relative
;
padding
:
22
upx
30
upx
;
overflow
:
hidden
;
font-size
:
28
upx
;
}
.list-view-item
::after
{
position
:
absolute
;
right
:
0
;
bottom
:
0
;
left
:
30
upx
;
height
:
2
upx
;
content
:
''
;
-webkit-transform
:
scaleY
(
.5
);
transform
:
scaleY
(
.5
);
background-color
:
#c8c7cc
;
}
.desc
{
padding
:
10
upx
20
upx
;
font-size
:
30
upx
;
line-height
:
30
upx
;
margin-top
:
150
upx
;
text-align
:
center
;
}
</
style
>
</
style
>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录