Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
CoderSmallfan
uni-app
提交
3b7b5d79
U
uni-app
项目概览
CoderSmallfan
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
3b7b5d79
编写于
10月 12, 2020
作者:
Q
qiang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(h5): 优化 picker 组件大屏展示效果
上级
b8efb97d
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
141 addition
and
84 deletion
+141
-84
src/platforms/h5/components/app/popup/actionSheet.vue
src/platforms/h5/components/app/popup/actionSheet.vue
+8
-74
src/platforms/h5/components/app/popup/mixins/popup.js
src/platforms/h5/components/app/popup/mixins/popup.js
+69
-0
src/platforms/h5/view/components/picker/index.vue
src/platforms/h5/view/components/picker/index.vue
+64
-10
未找到文件。
src/platforms/h5/components/app/popup/actionSheet.vue
浏览文件 @
3b7b5d79
...
...
@@ -9,13 +9,13 @@
</transition>
<div
:class=
"
{ 'uni-actionsheet_toggle': visible }"
:style="
actionSheet
Style.content"
:style="
popup
Style.content"
class="uni-actionsheet"
>
<div
class=
"uni-actionsheet__menu"
>
<div
v-if=
"title"
class=
"uni-actionsheet__title"
<div
v-if=
"title"
class=
"uni-actionsheet__title"
>
{{
title
}}
</div>
...
...
@@ -38,13 +38,16 @@
取消
</div>
</div>
<div
:style=
"
actionSheet
Style.triangle"
/>
<div
:style=
"
popup
Style.triangle"
/>
</div>
</uni-actionsheet>
</
template
>
<
script
>
import
popup
from
'
./mixins/popup
'
export
default
{
name
:
'
ActionSheet
'
,
mixins
:
[
popup
],
props
:
{
title
:
{
type
:
String
,
...
...
@@ -69,75 +72,6 @@ export default {
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
)
...
...
src/platforms/h5/components/app/popup/mixins/popup.js
0 → 100644
浏览文件 @
3b7b5d79
export
default
{
data
()
{
return
{
popupWidth
:
0
,
popupHeight
:
0
}
},
computed
:
{
popupStyle
()
{
const
style
=
{}
const
contentStyle
=
style
.
content
=
{}
const
triangleStyle
=
style
.
triangle
=
{}
const
popover
=
this
.
popover
function
getNumber
(
value
)
{
return
Number
(
value
)
||
0
}
if
(
this
.
popupWidth
>=
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
.
popupHeight
/
2
if
(
popoverTop
+
popoverHeight
-
vcl
>
vcl
-
popoverTop
)
{
contentStyle
.
top
=
'
auto
'
contentStyle
.
bottom
=
`
${
this
.
popupHeight
-
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
.
popupWidth
=
windowWidth
this
.
popupHeight
=
windowHeight
+
windowTop
}
this
.
$watch
(
'
visible
'
,
value
=>
value
&&
fixSize
())
window
.
addEventListener
(
'
resize
'
,
fixSize
)
this
.
$once
(
'
hook:beforeDestroy
'
,
()
=>
{
window
.
removeEventListener
(
'
resize
'
,
fixSize
)
})
}
}
src/platforms/h5/view/components/picker/index.vue
浏览文件 @
3b7b5d79
...
...
@@ -12,12 +12,13 @@
<transition
name=
"uni-fade"
>
<div
v-show=
"visible"
class=
"uni-mask"
class=
"uni-mask
uni-picker-mask
"
@
click=
"_cancel"
/>
</transition>
<div
:class=
"
{'uni-picker-toggle':visible}"
:class=
"
{ 'uni-picker-toggle': visible }"
:style="popupStyle.content"
class="uni-picker"
>
<div
...
...
@@ -38,20 +39,21 @@
</div>
</div>
<v-uni-picker-view
v-if=
"
v
isible"
v-if=
"
contentV
isible"
:value.sync=
"valueArray"
class=
"uni-picker-content"
>
<v-uni-picker-view-column
v-for=
"(rangeItem,index0) in rangeArray"
v-for=
"(rangeItem,
index0) in rangeArray"
:key=
"index0"
>
<div
v-for=
"(item,index) in rangeItem"
v-for=
"(item,
index) in rangeItem"
:key=
"index"
class=
"uni-picker-item"
>
{{
typeof
item
===
'
object
'
?
item
[
rangeKey
]
||
''
:
item
}}{{
units
[
index0
]
||
''
}}
{{
typeof
item
===
"
object
"
?
item
[
rangeKey
]
||
""
:
item
}}{{
units
[
index0
]
||
""
}}
</div>
</v-uni-picker-view-column>
</v-uni-picker-view>
...
...
@@ -59,6 +61,7 @@
<!--
<div
v-if=
"units.length"
class=
"uni-picker-units"
>
<div
v-for=
"(item,index) in units"
:key=
"index"
>
{{
item
}}
</div>
</div>
-->
<div
:style=
"popupStyle.triangle"
/>
</div>
</div>
<div>
...
...
@@ -70,6 +73,7 @@
<
script
>
import
{
emitter
}
from
'
uni-mixins
'
import
{
formatDateTime
}
from
'
uni-shared
'
import
popup
from
'
../../../components/app/popup/mixins/popup
'
function
getDefaultStartValue
()
{
if
(
this
.
mode
===
mode
.
TIME
)
{
...
...
@@ -122,7 +126,7 @@ const fields = {
}
export
default
{
name
:
'
Picker
'
,
mixins
:
[
emitter
],
mixins
:
[
emitter
,
popup
],
props
:
{
name
:
{
type
:
String
,
...
...
@@ -173,6 +177,8 @@ export default {
return
{
valueSync
:
null
,
visible
:
false
,
contentVisible
:
false
,
popover
:
null
,
valueChangeSource
:
''
,
timeArray
:
[],
dateArray
:
[],
...
...
@@ -221,8 +227,19 @@ export default {
return
[]
}
}
},
watch
:
{
visible
(
val
)
{
if
(
val
)
{
clearTimeout
(
this
.
__contentVisibleDelay
)
this
.
contentVisible
=
val
}
else
{
this
.
__contentVisibleDelay
=
setTimeout
(()
=>
{
this
.
contentVisible
=
val
},
300
)
}
},
value
()
{
this
.
_setValueSync
()
},
...
...
@@ -247,8 +264,7 @@ export default {
const
max
=
dateArray
[
2
].
length
const
day
=
Number
(
dateArray
[
2
][
valueArray
[
2
]])
||
1
const
realDay
=
new
Date
(
`
${
dateArray
[
0
][
valueArray
[
0
]]}
/
${
dateArray
[
1
][
valueArray
[
1
]]
`
${
dateArray
[
0
][
valueArray
[
0
]]}
/
${
dateArray
[
1
][
valueArray
[
1
]]
}
/
${
day
}
`
).
getDate
()
if
(
realDay
<
day
)
{
...
...
@@ -292,7 +308,7 @@ export default {
})
},
methods
:
{
_show
()
{
_show
(
event
)
{
if
(
this
.
disabled
)
{
return
}
...
...
@@ -301,6 +317,13 @@ export default {
$picker
.
remove
();
(
document
.
querySelector
(
'
uni-app
'
)
||
document
.
body
).
appendChild
(
$picker
)
$picker
.
style
.
display
=
'
block
'
const
rect
=
event
.
currentTarget
.
getBoundingClientRect
()
this
.
popover
=
{
top
:
rect
.
top
,
left
:
rect
.
left
,
width
:
rect
.
width
,
height
:
rect
.
height
}
setTimeout
(()
=>
{
this
.
visible
=
true
},
20
)
...
...
@@ -633,4 +656,35 @@ uni-picker[disabled] {
text-align: center;
transform: translateX(2em);
} */
@media
screen
and
(
min-width
:
500px
)
{
.uni-mask.uni-picker-mask
{
background
:
none
;
}
.uni-picker-container
.uni-picker
{
width
:
300px
;
left
:
50%
;
right
:
auto
;
top
:
50%
;
bottom
:
auto
;
transform
:
translate
(
-50%
,
-50%
);
opacity
:
0
;
border-radius
:
5px
;
transition
:
opacity
0.3s
,
visibility
0.3s
;
box-shadow
:
0px
0
20px
5px
rgba
(
0
,
0
,
0
,
0.3
);
}
.uni-picker-container
.uni-picker-header
{
border-radius
:
5px
5px
0
0
;
}
.uni-picker-container
.uni-picker-content
{
/* transform 用于解决 Safari overflow 失效的问题 */
transform
:
translate
(
0
0
);
overflow
:
hidden
;
border-radius
:
0
0
5px
5px
;
}
.uni-picker-container
.uni-picker.uni-picker-toggle
{
opacity
:
1
;
transform
:
translate
(
-50%
,
-50%
);
}
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录