Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wychl
uni-app
提交
d2b26971
U
uni-app
项目概览
wychl
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
d2b26971
编写于
9月 30, 2020
作者:
Q
qiang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: H5 端 uni.showActionSheet 优化大屏展示效果,支持 popover 参数
上级
bf6d4eb5
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
203 addition
and
99 deletion
+203
-99
src/core/view/index.css
src/core/view/index.css
+14
-14
src/platforms/h5/components/app/popup/actionSheet.vue
src/platforms/h5/components/app/popup/actionSheet.vue
+175
-71
src/platforms/h5/view/index.css
src/platforms/h5/view/index.css
+14
-14
未找到文件。
src/core/view/index.css
浏览文件 @
d2b26971
...
...
@@ -103,7 +103,7 @@ uni-page {
right
:
0
;
left
:
0
;
bottom
:
0
;
background
:
rgba
(
0
,
0
,
0
,
0.
6
);
background
:
rgba
(
0
,
0
,
0
,
0.
5
);
}
...
...
@@ -122,20 +122,20 @@ uni-page {
}
[
nvue
]
uni-view
,
[
nvue
]
uni-swiper-item
,
[
nvue
]
uni-swiper-item
,
[
nvue
]
uni-scroll-view
{
display
:
flex
;
flex-shrink
:
0
;
flex-grow
:
0
;
flex-basis
:
auto
;
align-items
:
stretch
;
display
:
flex
;
flex-shrink
:
0
;
flex-grow
:
0
;
flex-basis
:
auto
;
align-items
:
stretch
;
align-content
:
flex-start
;
}
}
[
nvue-dir-row
]
uni-view
,
[
nvue-dir-row
]
uni-swiper-item
{
flex-direction
:
row
;
}
}
[
nvue-dir-column
]
uni-view
,
[
nvue-dir-column
]
uni-swiper-item
{
...
...
@@ -164,8 +164,8 @@ uni-page {
position
:
relative
;
border
:
0px
solid
#000000
;
box-sizing
:
border-box
;
}
[
nvue
]
uni-swiper-item
{
position
:
absolute
;
}
}
[
nvue
]
uni-swiper-item
{
position
:
absolute
;
}
src/platforms/h5/components/app/popup/actionSheet.vue
浏览文件 @
d2b26971
...
...
@@ -3,40 +3,42 @@
<transition
name=
"uni-fade"
>
<div
v-show=
"visible"
class=
"uni-mask"
@
click=
"_close(-1)"
class=
"uni-mask
uni-actionsheet__mask
"
@
click=
"_close(-1)"
/>
</transition>
<div
:class=
"
{'uni-actionsheet_toggle':visible}"
class="uni-actionsheet"
>
:class=
"
{ 'uni-actionsheet_toggle': visible }"
:style="actionSheetStyle.content"
class="uni-actionsheet"
>
<div
class=
"uni-actionsheet__menu"
>
<div
v-if=
"title"
class=
"uni-actionsheet__title"
>
{{
title
}}
>
{{
title
}}
</div>
<div
v-for=
"(itemTitle,index) in itemList"
v-for=
"(itemTitle,
index) in itemList"
:key=
"index"
:style=
"
{
color:itemColor
}"
:style=
"
{
color: itemColor
}"
class="uni-actionsheet__cell"
@click="_close(index)"
>
{{
itemTitle
}}
@click="_close(index)"
>
{{
itemTitle
}}
</div>
</div>
<div
class=
"uni-actionsheet__action"
>
<div
:style=
"
{
color:itemColor
}"
:style=
"
{
color: itemColor
}"
class="uni-actionsheet__cell"
@click="_close(-1)"
>
取消
@click="_close(-1)"
>
取消
</div>
</div>
<div
:style=
"actionSheetStyle.triangle"
/>
</div>
</uni-actionsheet>
</
template
>
...
...
@@ -58,11 +60,84 @@ export default {
type
:
String
,
default
:
'
#000000
'
},
popover
:
{
type
:
Object
,
default
:
null
},
visible
:
{
type
:
Boolean
,
default
:
false
}
},
data
()
{
return
{
width
:
0
,
height
:
0
,
top
:
top
}
},
computed
:
{
actionSheetStyle
()
{
const
style
=
{}
const
contentStyle
=
style
.
content
=
{}
const
triangleStyle
=
style
.
triangle
=
{}
const
popover
=
this
.
popover
function
getNumber
(
value
)
{
return
Number
(
value
)
||
0
}
if
(
this
.
width
>=
500
&&
popover
)
{
Object
.
assign
(
triangleStyle
,
{
position
:
'
absolute
'
,
width
:
'
0
'
,
height
:
'
0
'
,
'
margin-left
'
:
'
-6px
'
,
'
border-style
'
:
'
solid
'
})
const
popoverLeft
=
getNumber
(
popover
.
left
)
const
popoverWidth
=
getNumber
(
popover
.
width
)
const
popoverTop
=
getNumber
(
popover
.
top
)
const
popoverHeight
=
getNumber
(
popover
.
height
)
const
center
=
(
popoverLeft
+
popoverWidth
)
/
2
contentStyle
.
transform
=
'
none !important
'
const
contentLeft
=
Math
.
max
(
0
,
center
-
300
/
2
)
contentStyle
.
left
=
`
${
contentLeft
}
px`
let
triangleLeft
=
Math
.
max
(
12
,
center
-
contentLeft
)
triangleLeft
=
Math
.
min
(
300
-
12
,
triangleLeft
)
triangleStyle
.
left
=
`
${
triangleLeft
}
px`
const
vcl
=
this
.
height
/
2
if
(
popoverTop
+
popoverHeight
-
vcl
>
vcl
-
popoverTop
)
{
contentStyle
.
top
=
'
auto
'
contentStyle
.
bottom
=
`
${
this
.
height
-
popoverTop
+
6
}
px`
triangleStyle
.
bottom
=
'
-6px
'
triangleStyle
[
'
border-width
'
]
=
'
6px 6px 0 6px
'
triangleStyle
[
'
border-color
'
]
=
'
#fcfcfd transparent transparent transparent
'
}
else
{
contentStyle
.
top
=
`
${
popoverTop
+
popoverHeight
+
6
}
px`
triangleStyle
.
top
=
'
-6px
'
triangleStyle
[
'
border-width
'
]
=
'
0 6px 6px 6px
'
triangleStyle
[
'
border-color
'
]
=
'
transparent transparent #fcfcfd transparent
'
}
}
return
style
}
},
mounted
()
{
const
fixSize
=
()
=>
{
const
{
windowWidth
,
windowHeight
,
windowTop
}
=
uni
.
getSystemInfoSync
()
this
.
width
=
windowWidth
this
.
height
=
windowHeight
+
windowTop
this
.
top
=
windowTop
}
this
.
$watch
(
'
visible
'
,
value
=>
value
&&
fixSize
())
window
.
addEventListener
(
'
resize
'
,
fixSize
)
this
.
$once
(
'
hook:beforeDestroy
'
,
()
=>
{
window
.
removeEventListener
(
'
resize
'
,
fixSize
)
})
},
methods
:
{
_close
(
tapIndex
)
{
this
.
$emit
(
'
close
'
,
tapIndex
)
...
...
@@ -71,67 +146,96 @@ export default {
}
</
script
>
<
style
>
uni-actionsheet
{
display
:
block
;
box-sizing
:
border-box
;
}
uni-actionsheet
{
display
:
block
;
box-sizing
:
border-box
;
}
uni-actionsheet
.uni-actionsheet
{
position
:
fixed
;
left
:
0
;
bottom
:
0
;
transform
:
translate
(
0
,
100%
);
backface-visibility
:
hidden
;
z-index
:
999
;
width
:
100%
;
background-color
:
#efeff4
;
visibility
:
hidden
;
transition
:
transform
0.3s
,
visibility
0.3s
;
}
uni-actionsheet
.uni-actionsheet
{
position
:
fixed
;
left
:
6px
;
right
:
6px
;
bottom
:
6px
;
transform
:
translate
(
0
,
100%
);
backface-visibility
:
hidden
;
z-index
:
999
;
visibility
:
hidden
;
transition
:
transform
0.3s
,
visibility
0.3s
;
}
uni-actionsheet
.uni-actionsheet.uni-actionsheet_toggle
{
visibility
:
visible
;
transform
:
translate
(
0
,
0
);
}
uni-actionsheet
.uni-actionsheet.uni-actionsheet_toggle
{
visibility
:
visible
;
transform
:
translate
(
0
,
0
);
}
uni-actionsheet
.uni-actionsheet
*
{
box-sizing
:
border-box
;
}
uni-actionsheet
.uni-actionsheet
*
{
box-sizing
:
border-box
;
}
uni-actionsheet
.uni-actionsheet__menu
{
background-color
:
#fcfcfd
;
}
uni-actionsheet
.uni-actionsheet__menu
,
uni-actionsheet
.uni-actionsheet__action
{
border-radius
:
5px
;
background-color
:
#fcfcfd
;
}
uni-actionsheet
.uni-actionsheet__action
{
margin-top
:
6px
;
background-color
:
#fcfcfd
;
}
uni-actionsheet
.uni-actionsheet__action
{
margin-top
:
6px
;
}
uni-actionsheet
.uni-actionsheet__cell
,
uni-actionsheet
.uni-actionsheet__title
{
position
:
relative
;
padding
:
10px
6px
;
text-align
:
center
;
font-size
:
18px
;
text-overflow
:
ellipsis
;
overflow
:
hidden
;
}
uni-actionsheet
.uni-actionsheet__cell
,
uni-actionsheet
.uni-actionsheet__title
{
position
:
relative
;
padding
:
10px
0
;
text-align
:
center
;
font-size
:
18px
;
}
uni-actionsheet
.uni-actionsheet__cell
:before
{
content
:
" "
;
position
:
absolute
;
left
:
0
;
top
:
0
;
right
:
0
;
height
:
1px
;
border-top
:
1px
solid
#e5e5e5
;
color
:
#e5e5e5
;
transform-origin
:
0
0
;
transform
:
scaleY
(
0.5
);
}
uni-actionsheet
.uni-actionsheet__cell
:before
{
content
:
" "
;
position
:
absolute
;
left
:
0
;
top
:
0
;
right
:
0
;
height
:
1px
;
border-top
:
1px
solid
#e5e5e5
;
color
:
#e5e5e5
;
transform-origin
:
0
0
;
transform
:
scaleY
(
0.5
);
}
uni-actionsheet
.uni-actionsheet__cell
:active
{
background-color
:
#ececec
;
}
uni-actionsheet
.uni-actionsheet__cell
:active
{
background-color
:
#ececec
;
}
uni-actionsheet
.uni-actionsheet__cell
:first-child:before
{
display
:
none
;
}
uni-actionsheet
.uni-actionsheet__cell
:first-child:before
{
display
:
none
;
}
@media
screen
and
(
min-width
:
500px
)
{
.uni-mask.uni-actionsheet__mask
{
background
:
none
;
}
uni-actionsheet
.uni-actionsheet
{
width
:
300px
;
left
:
50%
;
right
:
auto
;
top
:
50%
;
bottom
:
auto
;
transform
:
translate
(
-50%
,
-50%
);
opacity
:
0
;
transition
:
opacity
0.3s
,
visibility
0.3s
;
}
uni-actionsheet
.uni-actionsheet.uni-actionsheet_toggle
{
opacity
:
1
;
transform
:
translate
(
-50%
,
-50%
);
}
uni-actionsheet
.uni-actionsheet__menu
{
box-shadow
:
0px
0
20px
5px
rgba
(
0
,
0
,
0
,
0.3
);
}
uni-actionsheet
.uni-actionsheet__action
{
display
:
none
;
}
}
</
style
>
src/platforms/h5/view/index.css
浏览文件 @
d2b26971
...
...
@@ -103,7 +103,7 @@ uni-page {
right
:
0
;
left
:
0
;
bottom
:
0
;
background
:
rgba
(
0
,
0
,
0
,
0.
6
);
background
:
rgba
(
0
,
0
,
0
,
0.
5
);
}
...
...
@@ -122,20 +122,20 @@ uni-page {
}
[
nvue
]
uni-view
,
[
nvue
]
uni-swiper-item
,
[
nvue
]
uni-swiper-item
,
[
nvue
]
uni-scroll-view
{
display
:
flex
;
flex-shrink
:
0
;
flex-grow
:
0
;
flex-basis
:
auto
;
align-items
:
stretch
;
display
:
flex
;
flex-shrink
:
0
;
flex-grow
:
0
;
flex-basis
:
auto
;
align-items
:
stretch
;
align-content
:
flex-start
;
}
}
[
nvue-dir-row
]
uni-view
,
[
nvue-dir-row
]
uni-swiper-item
{
flex-direction
:
row
;
}
}
[
nvue-dir-column
]
uni-view
,
[
nvue-dir-column
]
uni-swiper-item
{
...
...
@@ -164,8 +164,8 @@ uni-page {
position
:
relative
;
border
:
0px
solid
#000000
;
box-sizing
:
border-box
;
}
[
nvue
]
uni-swiper-item
{
position
:
absolute
;
}
}
[
nvue
]
uni-swiper-item
{
position
:
absolute
;
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录