Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
ripplebb
uni-app
提交
b1fdbd73
U
uni-app
项目概览
ripplebb
/
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,发现更多精彩内容 >>
提交
b1fdbd73
编写于
8月 18, 2020
作者:
fxy060608
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(h5): add leftWindow,rightWindow
上级
efd75c54
变更
20
隐藏空白更改
内联
并排
Showing
20 changed file
with
568 addition
and
301 deletion
+568
-301
packages/uni-mp-alipay/lib/uni.config.js
packages/uni-mp-alipay/lib/uni.config.js
+3
-1
packages/uni-mp-baidu/lib/uni.config.js
packages/uni-mp-baidu/lib/uni.config.js
+3
-1
packages/uni-mp-kuaishou/lib/uni.config.js
packages/uni-mp-kuaishou/lib/uni.config.js
+3
-1
packages/uni-mp-qq/lib/uni.config.js
packages/uni-mp-qq/lib/uni.config.js
+3
-1
packages/uni-mp-toutiao/lib/uni.config.js
packages/uni-mp-toutiao/lib/uni.config.js
+3
-1
packages/uni-mp-weixin/lib/uni.config.js
packages/uni-mp-weixin/lib/uni.config.js
+3
-1
packages/uni-quickapp-native/lib/uni.config.js
packages/uni-quickapp-native/lib/uni.config.js
+3
-1
packages/uni-quickapp-webview/lib/uni.config.js
packages/uni-quickapp-webview/lib/uni.config.js
+3
-1
packages/vue-cli-plugin-uni/packages/app-vue-style-loader/lib/addStylesClient.js
...-uni/packages/app-vue-style-loader/lib/addStylesClient.js
+4
-0
packages/vue-cli-plugin-uni/packages/h5-vue-style-loader/lib/addStylesClient.js
...n-uni/packages/h5-vue-style-loader/lib/addStylesClient.js
+5
-2
packages/webpack-uni-pages-loader/lib/platforms/h5.js
packages/webpack-uni-pages-loader/lib/platforms/h5.js
+43
-5
src/core/helpers/constants.js
src/core/helpers/constants.js
+3
-1
src/core/helpers/tags.js
src/core/helpers/tags.js
+6
-1
src/core/service/plugins/app/create-app.js
src/core/service/plugins/app/create-app.js
+5
-2
src/platforms/app-plus/helpers/get-window-offset.js
src/platforms/app-plus/helpers/get-window-offset.js
+3
-1
src/platforms/h5/components/app/components.js
src/platforms/h5/components/app/components.js
+2
-0
src/platforms/h5/components/app/index.vue
src/platforms/h5/components/app/index.vue
+4
-6
src/platforms/h5/components/app/layout.vue
src/platforms/h5/components/app/layout.vue
+187
-0
src/platforms/h5/components/page/pageHead.vue
src/platforms/h5/components/page/pageHead.vue
+273
-272
src/platforms/h5/helpers/get-window-offset.js
src/platforms/h5/helpers/get-window-offset.js
+9
-3
未找到文件。
packages/uni-mp-alipay/lib/uni.config.js
浏览文件 @
b1fdbd73
...
...
@@ -4,7 +4,9 @@ module.exports = {
cssVars
:
{
'
--status-bar-height
'
:
'
25px
'
,
'
--window-top
'
:
'
0px
'
,
'
--window-bottom
'
:
'
0px
'
'
--window-bottom
'
:
'
0px
'
,
'
--window-left
'
:
'
0px
'
,
'
--window-right
'
:
'
0px
'
},
extnames
:
{
style
:
'
.acss
'
,
...
...
packages/uni-mp-baidu/lib/uni.config.js
浏览文件 @
b1fdbd73
...
...
@@ -3,7 +3,9 @@ module.exports = {
cssVars
:
{
'
--status-bar-height
'
:
'
25px
'
,
'
--window-top
'
:
'
0px
'
,
'
--window-bottom
'
:
'
0px
'
'
--window-bottom
'
:
'
0px
'
,
'
--window-left
'
:
'
0px
'
,
'
--window-right
'
:
'
0px
'
},
extnames
:
{
style
:
'
.css
'
,
...
...
packages/uni-mp-kuaishou/lib/uni.config.js
浏览文件 @
b1fdbd73
...
...
@@ -3,7 +3,9 @@ module.exports = {
cssVars
:
{
'
--status-bar-height
'
:
'
25px
'
,
'
--window-top
'
:
'
0px
'
,
'
--window-bottom
'
:
'
0px
'
'
--window-bottom
'
:
'
0px
'
,
'
--window-left
'
:
'
0px
'
,
'
--window-right
'
:
'
0px
'
},
extnames
:
{
style
:
'
.css
'
,
...
...
packages/uni-mp-qq/lib/uni.config.js
浏览文件 @
b1fdbd73
...
...
@@ -8,7 +8,9 @@ module.exports = {
cssVars
:
{
'
--status-bar-height
'
:
'
25px
'
,
'
--window-top
'
:
'
0px
'
,
'
--window-bottom
'
:
'
0px
'
'
--window-bottom
'
:
'
0px
'
,
'
--window-left
'
:
'
0px
'
,
'
--window-right
'
:
'
0px
'
},
extnames
:
{
style
:
'
.qss
'
,
...
...
packages/uni-mp-toutiao/lib/uni.config.js
浏览文件 @
b1fdbd73
...
...
@@ -3,7 +3,9 @@ module.exports = {
cssVars
:
{
'
--status-bar-height
'
:
'
25px
'
,
'
--window-top
'
:
'
0px
'
,
'
--window-bottom
'
:
'
0px
'
'
--window-bottom
'
:
'
0px
'
,
'
--window-left
'
:
'
0px
'
,
'
--window-right
'
:
'
0px
'
},
extnames
:
{
style
:
'
.ttss
'
,
...
...
packages/uni-mp-weixin/lib/uni.config.js
浏览文件 @
b1fdbd73
...
...
@@ -8,7 +8,9 @@ module.exports = {
cssVars
:
{
'
--status-bar-height
'
:
'
25px
'
,
'
--window-top
'
:
'
0px
'
,
'
--window-bottom
'
:
'
0px
'
'
--window-bottom
'
:
'
0px
'
,
'
--window-left
'
:
'
0px
'
,
'
--window-right
'
:
'
0px
'
},
extnames
:
{
style
:
'
.wxss
'
,
...
...
packages/uni-quickapp-native/lib/uni.config.js
浏览文件 @
b1fdbd73
...
...
@@ -3,7 +3,9 @@ module.exports = {
cssVars
:
{
'
--status-bar-height
'
:
'
25px
'
,
'
--window-top
'
:
'
0px
'
,
'
--window-bottom
'
:
'
0px
'
'
--window-bottom
'
:
'
0px
'
,
'
--window-left
'
:
'
0px
'
,
'
--window-right
'
:
'
0px
'
}
}
}
packages/uni-quickapp-webview/lib/uni.config.js
浏览文件 @
b1fdbd73
...
...
@@ -20,7 +20,9 @@ module.exports = {
cssVars
:
{
'
--status-bar-height
'
:
'
25px
'
,
'
--window-top
'
:
'
0px
'
,
'
--window-bottom
'
:
'
0px
'
'
--window-bottom
'
:
'
0px
'
,
'
--window-left
'
:
'
0px
'
,
'
--window-right
'
:
'
0px
'
},
extnames
:
{
style
:
'
.css
'
,
...
...
packages/vue-cli-plugin-uni/packages/app-vue-style-loader/lib/addStylesClient.js
浏览文件 @
b1fdbd73
...
...
@@ -226,6 +226,8 @@ var UPX_RE = /([+-]?\d+(\.\d+)?)[r|u]px/g
var
VAR_STATUS_BAR_HEIGHT
=
/var
\(
--status-bar-height
\)
/gi
var
VAR_WINDOW_TOP
=
/var
\(
--window-top
\)
/gi
var
VAR_WINDOW_BOTTOM
=
/var
\(
--window-bottom
\)
/gi
var
VAR_WINDOW_LEFT
=
/var
\(
--window-left
\)
/gi
var
VAR_WINDOW_RIGHT
=
/var
\(
--window-right
\)
/gi
var
statusBarHeight
=
false
function
processCss
(
css
)
{
...
...
@@ -241,6 +243,8 @@ function processCss(css) {
css
=
css
.
replace
(
VAR_STATUS_BAR_HEIGHT
,
offset
.
statusBarHeight
+
'
px
'
)
.
replace
(
VAR_WINDOW_TOP
,
offset
.
top
+
'
px
'
)
.
replace
(
VAR_WINDOW_BOTTOM
,
offset
.
bottom
+
'
px
'
)
.
replace
(
VAR_WINDOW_LEFT
,
'
0px
'
)
.
replace
(
VAR_WINDOW_RIGHT
,
'
0px
'
)
}
return
css
.
replace
(
/
\{[\s\S]
+
?\}
/g
,
function
(
css
)
{
return
css
.
replace
(
UPX_RE
,
function
(
a
,
b
)
{
...
...
packages/vue-cli-plugin-uni/packages/h5-vue-style-loader/lib/addStylesClient.js
浏览文件 @
b1fdbd73
...
...
@@ -236,7 +236,8 @@ var PAGE_SCOPED_RE = /uni-page-body\[data-v-[a-z0-9]{8}\]/g
var
VAR_STATUS_BAR_HEIGHT
=
/var
\(
--status-bar-height
\)
/gi
var
VAR_WINDOW_TOP
=
/var
\(
--window-top
\)
/gi
var
VAR_WINDOW_BOTTOM
=
/var
\(
--window-bottom
\)
/gi
var
VAR_WINDOW_LEFT
=
/var
\(
--window-left
\)
/gi
var
VAR_WINDOW_RIGHT
=
/var
\(
--window-right
\)
/gi
function
processCss
(
css
)
{
var
page
=
getPage
()
...
...
@@ -244,7 +245,9 @@ function processCss(css) {
var
offset
=
getWindowOffset
()
css
=
css
.
replace
(
VAR_STATUS_BAR_HEIGHT
,
'
0px
'
)
.
replace
(
VAR_WINDOW_TOP
,
offset
.
top
+
'
px
'
)
.
replace
(
VAR_WINDOW_BOTTOM
,
offset
.
bottom
+
'
px
'
)
.
replace
(
VAR_WINDOW_BOTTOM
,
offset
.
bottom
+
'
px
'
)
.
replace
(
VAR_WINDOW_LEFT
,
'
0px
'
)
.
replace
(
VAR_WINDOW_RIGHT
,
'
0px
'
)
}
return
css
.
replace
(
BODY_SCOPED_RE
,
page
)
...
...
packages/webpack-uni-pages-loader/lib/platforms/h5.js
浏览文件 @
b1fdbd73
...
...
@@ -12,8 +12,8 @@ const {
const
{
addPageUsingComponents
}
=
require
(
'
@dcloudio/uni-cli-shared/lib/pages
'
)
}
=
require
(
'
@dcloudio/uni-cli-shared/lib/pages
'
)
const
compilerVersion
=
require
(
'
@dcloudio/webpack-uni-pages-loader/package.json
'
)[
'
uni-app
'
].
compilerVersion
const
PLATFORMS
=
getPlatforms
()
...
...
@@ -357,6 +357,31 @@ function filterPages (pagesJson, includes) {
pagesJson
.
pages
=
pages
}
function
genLayoutComponentsCode
(
pagesJson
)
{
const
code
=
[]
const
{
leftWindow
,
rightWindow
}
=
pagesJson
if
(
leftWindow
&&
leftWindow
.
path
)
{
code
.
push
(
`import LeftWindow from './
${
leftWindow
.
path
}
';
${
leftWindow
.
style
?
(
'
LeftWindow.style=
'
+
JSON
.
stringify
(
leftWindow
.
style
))
:
''
}
Vue.component('VUniLeftWindow',LeftWindow);`
)
}
if
(
rightWindow
&&
rightWindow
.
path
)
{
code
.
push
(
`
import RightWindow from './
${
rightWindow
.
path
}
';
${
rightWindow
.
style
?
(
'
RightWindow.style=
'
+
JSON
.
stringify
(
rightWindow
.
style
))
:
''
}
Vue.component('VUniRightWindow',RightWindow);`
)
}
return
code
.
join
(
'
\n
'
)
}
module
.
exports
=
function
(
pagesJson
,
manifestJson
,
loader
)
{
const
inputDir
=
process
.
env
.
UNI_INPUT_DIR
...
...
@@ -398,12 +423,25 @@ module.exports = function (pagesJson, manifestJson, loader) {
qqMapKey
=
sdkConfigs
.
maps
.
qqmap
.
key
}
let
minWidth
=
768
if
(
manifestJson
&&
manifestJson
.
h5
&&
manifestJson
.
h5
.
responsive
&&
manifestJson
.
h5
.
responsive
.
minWidth
)
{
minWidth
=
parseInt
(
manifestJson
.
h5
.
responsive
.
minWidth
)
||
minWidth
}
return
`
import Vue from 'vue'
${
genLayoutComponentsCode
(
pagesJson
)}
global['____
${
h5
.
appid
}
____'] = true;
delete global['____
${
h5
.
appid
}
____'];
global.__uniConfig =
${
JSON
.
stringify
(
pagesJson
)}
;
global.__uniConfig =
${
JSON
.
stringify
(
pagesJson
)}
;
global.__uniConfig.compilerVersion = '
${
compilerVersion
}
';
global.__uniConfig.responsive = { minWidth:
${
minWidth
}
};
global.__uniConfig.router =
${
JSON
.
stringify
(
h5
.
router
)}
;
global.__uniConfig.publicPath =
${
JSON
.
stringify
(
h5
.
publicPath
)}
;
global.__uniConfig['async'] =
${
JSON
.
stringify
(
h5
.
async
)}
;
...
...
@@ -411,10 +449,10 @@ global.__uniConfig.debug = ${manifestJson.debug === true};
global.__uniConfig.networkTimeout =
${
JSON
.
stringify
(
networkTimeoutConfig
)}
;
global.__uniConfig.sdkConfigs =
${
JSON
.
stringify
(
sdkConfigs
)}
;
global.__uniConfig.qqMapKey =
${
JSON
.
stringify
(
qqMapKey
)}
;
global.__uniConfig.nvue =
${
JSON
.
stringify
({
'
flex-direction
'
:
getFlexDirection
(
manifestJson
[
'
app-plus
'
])
})}
global.__uniConfig.nvue =
${
JSON
.
stringify
({
'
flex-direction
'
:
getFlexDirection
(
manifestJson
[
'
app-plus
'
])
})}
global.__uniConfig.__webpack_chunk_load__ = __webpack_chunk_load__
${
genRegisterPageVueComponentsCode
(
pageComponents
)}
global.__uniRoutes=[
${
genPageRoutes
(
pageComponents
).
concat
(
genSystemRoutes
()).
join
(
'
,
'
)}
]
global.__uniRoutes=[
${
genPageRoutes
(
pageComponents
).
concat
(
genSystemRoutes
()).
join
(
'
,
'
)}
]
global.UniApp && new global.UniApp();
`
}
src/core/helpers/constants.js
浏览文件 @
b1fdbd73
export
const
NAVBAR_HEIGHT
=
44
export
const
TABBAR_HEIGHT
=
50
export
const
TABBAR_HEIGHT
=
50
// 576:landscape phones,768:tablets,992:desktops,1200:large desktops
export
const
RESPONSIVE_MIN_WIDTH
=
768
src/core/helpers/tags.js
浏览文件 @
b1fdbd73
module
.
exports
=
[
'
uni-app
'
,
'
uni-app
'
,
'
uni-layout
'
,
'
uni-content
'
,
'
uni-main
'
,
'
uni-left-window
'
,
'
uni-right-window
'
,
'
uni-tabbar
'
,
'
uni-page
'
,
'
uni-page-head
'
,
...
...
src/core/service/plugins/app/create-app.js
浏览文件 @
b1fdbd73
...
...
@@ -15,10 +15,13 @@ export function getCurrentPages (isAll = false, ignoreError = false) {
}
return
[]
}
cons
t
childrenVm
=
app
.
$children
[
0
]
le
t
childrenVm
=
app
.
$children
[
0
]
if
(
childrenVm
&&
childrenVm
.
$children
.
length
)
{
const
tabBarVm
=
childrenVm
.
$children
.
find
(
vm
=>
vm
.
$options
.
name
===
'
TabBar
'
)
const
layoutVm
=
childrenVm
.
$children
.
find
(
vm
=>
vm
.
$options
.
name
===
'
Layout
'
)
if
(
layoutVm
)
{
childrenVm
=
layoutVm
}
childrenVm
.
$children
.
forEach
(
vm
=>
{
if
(
tabBarVm
!==
vm
&&
vm
.
$children
.
length
&&
vm
.
$children
[
0
].
$options
.
name
===
'
Page
'
&&
vm
.
$children
[
0
].
$slots
.
page
)
{
// vm.$children[0]=Page->PageBody->RealPage
...
...
src/platforms/app-plus/helpers/get-window-offset.js
浏览文件 @
b1fdbd73
export
default
function
getWindowOffset
()
{
return
{
top
:
0
,
bottom
:
0
bottom
:
0
,
left
:
0
,
right
:
0
}
}
src/platforms/h5/components/app/components.js
浏览文件 @
b1fdbd73
import
TabBar
from
'
./tabBar
'
import
Layout
from
'
./layout
'
import
Components
from
'
uni-h5-app-components
'
export
default
{
TabBar
,
Layout
,
...
Components
}
src/platforms/h5/components/app/index.vue
浏览文件 @
b1fdbd73
<
template
>
<uni-app
:class=
"
{'uni-app--showtabbar':showTabBar}">
<!--
<transition
:name=
"transitionName"
>
-->
<!-- TODO -->
<keep-alive
:include=
"keepAliveInclude"
>
<router-view
:key=
"key"
/>
</keep-alive>
<!--
</transition>
-->
<layout
:router-key=
"key"
:keep-alive-include=
"keepAliveInclude"
/>
<tab-bar
v-if=
"hasTabBar"
v-show=
"showTabBar"
...
...
src/platforms/h5/components/app/layout.vue
0 → 100644
浏览文件 @
b1fdbd73
<
template
>
<uni-layout
v-if=
"responsive"
:class=
"
{'uni-app--showlayout':showLayout}"
>
<!--TODO header-->
<uni-content>
<uni-main>
<keep-alive
:include=
"keepAliveInclude"
>
<router-view
:key=
"routerKey"
/>
</keep-alive>
</uni-main>
<uni-left-window
v-if=
"leftWindow"
ref=
"leftWindow"
:style=
"leftWindowStyle"
>
<v-uni-left-window
ref=
"left"
@
hook:mounted=
"onLeftWindowInit"
/>
</uni-left-window>
<uni-right-window
v-if=
"rightWindow"
ref=
"rightWindow"
:style=
"rightWindowStyle"
>
<v-uni-right-window
ref=
"right"
@
hook:mounted=
"onRightWindowInit"
/>
</uni-right-window>
</uni-content>
<!--TODO footer-->
</uni-layout>
<keep-alive
v-else
:include=
"keepAliveInclude"
>
<router-view
:key=
"routerKey"
/>
</keep-alive>
</
template
>
<
script
>
import
Vue
from
'
vue
'
import
{
RESPONSIVE_MIN_WIDTH
}
from
'
uni-helpers/constants
'
const
screen
=
window
.
screen
const
documentElement
=
document
.
documentElement
const
minWidth
=
parseInt
(
__uniConfig
.
responsive
&&
__uniConfig
.
responsive
.
minWidth
)
||
RESPONSIVE_MIN_WIDTH
let
styleObj
function
updateCssVar
(
name
,
value
)
{
if
(
!
styleObj
)
{
styleObj
=
documentElement
.
style
}
styleObj
.
setProperty
(
name
,
value
)
}
const
sizes
=
[
window
.
outerWidth
,
window
.
outerHeight
,
screen
.
width
,
screen
.
height
,
documentElement
.
clientWidth
,
documentElement
.
clientHeight
]
export
default
{
name
:
'
Layout
'
,
props
:
{
routerKey
:
{
type
:
String
,
default
:
''
},
keepAliveInclude
:
{
type
:
Array
,
default
:
function
()
{
return
[]
}
}
},
data
()
{
return
{
showLayout
:
true
,
leftWindowStyle
:
''
,
rightWindowStyle
:
''
}
},
beforeCreate
()
{
updateCssVar
(
'
--window-left
'
,
'
0px
'
)
updateCssVar
(
'
--window-right
'
,
'
0px
'
)
},
created
()
{
this
.
leftWindow
=
Vue
.
component
(
'
VUniLeftWindow
'
)
this
.
rightWindow
=
Vue
.
component
(
'
VUniRightWindow
'
)
if
(
// 低版本不提供 responsive 支持
(
this
.
leftWindow
||
this
.
rightWindow
)
&&
uni
.
canIUse
(
'
css.var
'
)
&&
window
.
matchMedia
)
{
this
.
responsive
=
Math
.
max
.
apply
(
null
,
sizes
)
>
minWidth
if
(
this
.
responsive
)
{
if
(
this
.
leftWindow
&&
this
.
leftWindow
.
options
.
style
)
{
this
.
leftWindowStyle
=
this
.
leftWindow
.
options
.
style
}
if
(
this
.
rightWindow
&&
this
.
rightWindow
.
options
.
style
)
{
this
.
rightWindowStyle
=
this
.
rightWindow
.
options
.
style
}
this
.
initMediaQuery
()
}
}
},
methods
:
{
initMediaQuery
()
{
if
(
!
window
.
matchMedia
)
{
return
}
const
mediaQueryList
=
window
.
matchMedia
(
'
(min-width:
'
+
minWidth
+
'
px)
'
)
mediaQueryList
.
addListener
((
e
)
=>
{
this
.
showLayout
=
e
.
matches
this
.
$nextTick
(()
=>
{
this
.
leftWindow
&&
this
.
onLeftWindowInit
()
this
.
rightWindow
&&
this
.
onRightWindowInit
()
})
})
this
.
showLayout
=
mediaQueryList
.
matches
},
onLeftWindowInit
()
{
if
(
this
.
leftWindowStyle
&&
this
.
leftWindowStyle
.
width
)
{
updateCssVar
(
'
--window-left
'
,
this
.
$refs
.
leftWindow
.
offsetWidth
+
'
px
'
)
}
else
{
updateCssVar
(
'
--window-left
'
,
this
.
$refs
.
left
.
$el
.
offsetWidth
+
'
px
'
)
}
},
onRightWindowInit
()
{
if
(
this
.
rightWindowStyle
&&
this
.
rightWindowStyle
.
width
)
{
updateCssVar
(
'
--window-left
'
,
this
.
$refs
.
rightWindow
.
offsetWidth
+
'
px
'
)
}
else
{
updateCssVar
(
'
--window-right
'
,
this
.
$refs
.
right
.
$el
.
offsetWidth
+
'
px
'
)
}
}
}
}
</
script
>
<
style
>
uni-content
{
display
:
flex
;
flex
:
1
0
auto
;
height
:
100%
;
}
uni-main
{
flex
:
1
;
overflow
:
auto
;
}
uni-left-window
{
display
:
none
;
position
:
relative
;
width
:
var
(
--window-left
);
order
:
-1
;
overflow-x
:
hidden
;
}
uni-right-window
{
display
:
none
;
position
:
relative
;
width
:
var
(
--window-right
);
overflow-x
:
hidden
;
}
.uni-app--showlayout
uni-left-window
,
.uni-app--showlayout
uni-right-window
{
display
:
block
;
}
.uni-app--showlayout
+
uni-tabbar
{
display
:
none
;
}
</
style
>
src/platforms/h5/components/page/pageHead.vue
浏览文件 @
b1fdbd73
<
template
>
<uni-page-head
:uni-page-head-type=
"type"
>
<div
<div
:style=
"
{transitionDuration:duration,transitionTimingFunction:timingFunc,backgroundColor:bgColor,color:textColor}"
:class="headClass"
class="uni-page-head"
:class="headClass"
class="uni-page-head"
>
<div
class=
"uni-page-head-hd"
>
<div
v-show=
"backButton"
class=
"uni-page-head-btn"
@
click=
"_back"
<div
v-show=
"backButton"
class=
"uni-page-head-btn"
@
click=
"_back"
>
<i
:style=
"
{color:color,fontSize:'27px'}"
class="uni-btn-icon"
<i
:style=
"
{color:color,fontSize:'27px'}"
class="uni-btn-icon"
>

</i>
</div>
<template
v-for=
"(btn,index) in btns"
>
<div
v-if=
"btn.float === 'left'"
:key=
"index"
<div
v-if=
"btn.float === 'left'"
:key=
"index"
:style=
"
{backgroundColor: type==='transparent'?btn.background:'transparent',width:btn.width}"
:badge-text="btn.badgeText"
:badge-text="btn.badgeText"
:class="{'uni-page-head-btn-red-dot':btn.redDot||btn.badgeText,'uni-page-head-btn-select':btn.select}"
class="uni-page-head-btn"
class="uni-page-head-btn"
>
<i
:style=
"_formatBtnStyle(btn)"
class=
"uni-btn-icon"
@
click=
"_onBtnClick(index)"
v-html=
"_formatBtnFontText(btn)"
<i
:style=
"_formatBtnStyle(btn)"
class=
"uni-btn-icon"
@
click=
"_onBtnClick(index)"
v-html=
"_formatBtnFontText(btn)"
/>
</div>
</
template
>
</div>
<div
v-if=
"!searchInput"
class=
"uni-page-head-bd"
<div
v-if=
"!searchInput"
class=
"uni-page-head-bd"
>
<div
:style=
"{fontSize:titleSize,opacity:type==='transparent'?0:1}"
class=
"uni-page-head__title"
<div
:style=
"{fontSize:titleSize,opacity:type==='transparent'?0:1}"
class=
"uni-page-head__title"
>
<i
v-if=
"loading"
class=
"uni-loading"
<i
v-if=
"loading"
class=
"uni-loading"
/>
<img
v-if=
"titleImage!==''"
:src=
"titleImage"
class=
"uni-page-head__title_image"
<img
v-if=
"titleImage!==''"
:src=
"titleImage"
class=
"uni-page-head__title_image"
>
<
template
v-else
>
{{
titleText
}}
</
template
>
</div>
</div>
<div
v-if=
"searchInput"
<div
v-if=
"searchInput"
:style=
"{'border-radius':searchInput.borderRadius,'background-color':searchInput.backgroundColor}"
class=
"uni-page-head-search"
class=
"uni-page-head-search"
>
<div
:style=
"{color:searchInput.placeholderColor}"
<div
:style=
"{color:searchInput.placeholderColor}"
:class=
"[`uni-page-head-search-placeholder-${focus || text ? 'left' : searchInput.align}`]"
class=
"uni-page-head-search-placeholder"
v-text=
"text || composing ? '' : searchInput.placeholder"
class=
"uni-page-head-search-placeholder"
v-text=
"text || composing ? '' : searchInput.placeholder"
/>
<v-uni-input
ref=
"input"
v-model=
"text"
:focus=
"searchInput.autoFocus"
:disabled=
"searchInput.disabled"
<v-uni-input
ref=
"input"
v-model=
"text"
:focus=
"searchInput.autoFocus"
:disabled=
"searchInput.disabled"
:style=
"{color:searchInput.color}"
:placeholder-style=
"`color:${searchInput.placeholderColor}`"
class=
"uni-page-head-search-input"
:placeholder-style=
"`color:${searchInput.placeholderColor}`"
class=
"uni-page-head-search-input"
confirm-type=
"search"
@
focus=
"_focus"
@
blur=
"_blur"
@
update:value=
"_input"
@
focus=
"_focus"
@
blur=
"_blur"
@
update:value=
"_input"
/>
</div>
<div
class=
"uni-page-head-ft"
>
<
template
v-for=
"(btn,index) in btns"
>
<div
v-if=
"btn.float !== 'left'"
:key=
"index"
<div
v-if=
"btn.float !== 'left'"
:key=
"index"
:style=
"
{backgroundColor: type==='transparent'?btn.background:'transparent',width:btn.width}"
:badge-text="btn.badgeText"
:badge-text="btn.badgeText"
:class="{'uni-page-head-btn-red-dot':btn.redDot||btn.badgeText,'uni-page-head-btn-select':btn.select}"
class="uni-page-head-btn"
class="uni-page-head-btn"
>
<i
:style=
"_formatBtnStyle(btn)"
class=
"uni-btn-icon"
@
click=
"_onBtnClick(index)"
v-html=
"_formatBtnFontText(btn)"
<i
:style=
"_formatBtnStyle(btn)"
class=
"uni-btn-icon"
@
click=
"_onBtnClick(index)"
v-html=
"_formatBtnFontText(btn)"
/>
</div>
</
template
>
</div>
</div>
<div
v-if=
"type!=='transparent'&&type!=='float'"
:class=
"{'uni-placeholder-titlePenetrate': titlePenetrate}"
class=
"uni-placeholder"
<div
v-if=
"type!=='transparent'&&type!=='float'"
:class=
"{'uni-placeholder-titlePenetrate': titlePenetrate}"
class=
"uni-placeholder"
/>
</uni-page-head>
</template>
<
style
>
uni-page-head
{
display
:
block
;
box-sizing
:
border-box
;
}
uni-page-head
{
display
:
block
;
box-sizing
:
border-box
;
}
uni-page-head
.uni-page-head
{
position
:
fixed
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
44px
;
height
:
calc
(
44px
+
constant
(
safe-area-inset-top
));
height
:
calc
(
44px
+
env
(
safe-area-inset-top
));
padding
:
7px
3px
;
padding-top
:
calc
(
7px
+
constant
(
safe-area-inset-top
));
padding-top
:
calc
(
7px
+
env
(
safe-area-inset-top
));
display
:
flex
;
overflow
:
hidden
;
justify-content
:
space-between
;
box-sizing
:
border-box
;
z-index
:
998
;
color
:
#fff
;
background-color
:
#000
;
transition-property
:
all
;
}
uni-page-head
.uni-page-head
{
position
:
fixed
;
left
:
var
(
--window-left
)
;
right
:
var
(
--window-right
)
;
top
:
0
;
height
:
44px
;
height
:
calc
(
44px
+
constant
(
safe-area-inset-top
));
height
:
calc
(
44px
+
env
(
safe-area-inset-top
));
padding
:
7px
3px
;
padding-top
:
calc
(
7px
+
constant
(
safe-area-inset-top
));
padding-top
:
calc
(
7px
+
env
(
safe-area-inset-top
));
display
:
flex
;
overflow
:
hidden
;
justify-content
:
space-between
;
box-sizing
:
border-box
;
z-index
:
998
;
color
:
#fff
;
background-color
:
#000
;
transition-property
:
all
;
}
uni-page-head
.uni-page-head-titlePenetrate
,
uni-page-head
.uni-page-head-titlePenetrate
.uni-page-head-bd
,
uni-page-head
.uni-page-head-titlePenetrate
.uni-page-head-bd
*
{
pointer-events
:
none
;
}
uni-page-head
.uni-page-head-titlePenetrate
,
uni-page-head
.uni-page-head-titlePenetrate
.uni-page-head-bd
,
uni-page-head
.uni-page-head-titlePenetrate
.uni-page-head-bd
*
{
pointer-events
:
none
;
}
uni-page-head
.uni-page-head-titlePenetrate
*
{
pointer-events
:
auto
;
}
uni-page-head
.uni-page-head-titlePenetrate
*
{
pointer-events
:
auto
;
}
uni-page-head
.uni-page-head.uni-page-head-transparent
.uni-page-head-ft
>
div
{
justify-content
:
center
;
}
uni-page-head
.uni-page-head.uni-page-head-transparent
.uni-page-head-ft
>
div
{
justify-content
:
center
;
}
uni-page-head
.uni-page-head
~
.uni-placeholder
{
width
:
100%
;
height
:
44px
;
height
:
calc
(
44px
+
constant
(
safe-area-inset-top
));
height
:
calc
(
44px
+
env
(
safe-area-inset-top
));
}
uni-page-head
.uni-page-head
~
.uni-placeholder
{
width
:
100%
;
height
:
44px
;
height
:
calc
(
44px
+
constant
(
safe-area-inset-top
));
height
:
calc
(
44px
+
env
(
safe-area-inset-top
));
}
uni-page-head
.uni-placeholder-titlePenetrate
{
pointer-events
:
none
;
}
uni-page-head
.uni-placeholder-titlePenetrate
{
pointer-events
:
none
;
}
uni-page-head
.uni-page-head
*
{
box-sizing
:
border-box
;
}
uni-page-head
.uni-page-head
*
{
box-sizing
:
border-box
;
}
uni-page-head
.uni-page-head-hd
{
display
:
flex
;
align-items
:
center
;
font-size
:
16px
;
}
uni-page-head
.uni-page-head-hd
{
display
:
flex
;
align-items
:
center
;
font-size
:
16px
;
}
uni-page-head
.uni-page-head-bd
{
position
:
absolute
;
left
:
70px
;
right
:
70px
;
min-width
:
0
;
user-select
:
auto
;
}
uni-page-head
.uni-page-head-bd
{
position
:
absolute
;
left
:
70px
;
right
:
70px
;
min-width
:
0
;
user-select
:
auto
;
}
.uni-page-head-btn
{
position
:
relative
;
width
:
auto
;
margin
:
0
2px
;
word-break
:
keep-all
;
white-space
:
pre
;
cursor
:
pointer
;
}
.uni-page-head-btn
{
position
:
relative
;
width
:
auto
;
margin
:
0
2px
;
word-break
:
keep-all
;
white-space
:
pre
;
cursor
:
pointer
;
}
.uni-page-head-transparent
.uni-page-head-btn
{
display
:
flex
;
align-items
:
center
;
width
:
32px
;
height
:
32px
;
border-radius
:
50%
;
background-color
:
rgba
(
0
,
0
,
0
,
0.5
);
}
.uni-page-head-transparent
.uni-page-head-btn
{
display
:
flex
;
align-items
:
center
;
width
:
32px
;
height
:
32px
;
border-radius
:
50%
;
background-color
:
rgba
(
0
,
0
,
0
,
0.5
);
}
uni-page-head
.uni-btn-icon
{
overflow
:
hidden
;
min-width
:
1em
;
}
uni-page-head
.uni-btn-icon
{
overflow
:
hidden
;
min-width
:
1em
;
}
.uni-page-head-btn-red-dot
::after
{
content
:
attr
(
badge-text
);
position
:
absolute
;
right
:
0
;
top
:
0
;
background-color
:
red
;
color
:
white
;
width
:
18px
;
height
:
18px
;
line-height
:
18px
;
border-radius
:
18px
;
overflow
:
hidden
;
transform
:
scale
(
0.5
)
translate
(
40%
,
-40%
);
transform-origin
:
100%
0
;
}
.uni-page-head-btn-red-dot
::after
{
content
:
attr
(
badge-text
);
position
:
absolute
;
right
:
0
;
top
:
0
;
background-color
:
red
;
color
:
white
;
width
:
18px
;
height
:
18px
;
line-height
:
18px
;
border-radius
:
18px
;
overflow
:
hidden
;
transform
:
scale
(
0.5
)
translate
(
40%
,
-40%
);
transform-origin
:
100%
0
;
}
.uni-page-head-btn-red-dot
[
badge-text
]
::after
{
font-size
:
12px
;
width
:
auto
;
min-width
:
18px
;
max-width
:
42px
;
text-align
:
center
;
padding
:
0
3px
;
transform
:
scale
(
0.7
)
translate
(
40%
,
-40%
);
}
.uni-page-head-btn-red-dot
[
badge-text
]
::after
{
font-size
:
12px
;
width
:
auto
;
min-width
:
18px
;
max-width
:
42px
;
text-align
:
center
;
padding
:
0
3px
;
transform
:
scale
(
0.7
)
translate
(
40%
,
-40%
);
}
.uni-page-head-btn-select
>
.uni-btn-icon
::after
{
display
:
inline-block
;
font-family
:
"unibtn"
;
content
:
"\e601"
;
margin-left
:
2px
;
transform
:
rotate
(
-90deg
)
scale
(
0.8
);
}
.uni-page-head-btn-select
>
.uni-btn-icon
::after
{
display
:
inline-block
;
font-family
:
"unibtn"
;
content
:
"\e601"
;
margin-left
:
2px
;
transform
:
rotate
(
-90deg
)
scale
(
0.8
);
}
.uni-page-head-search
{
position
:
relative
;
display
:
flex
;
flex
:
1
;
margin
:
0
2px
;
line-height
:
30px
;
font-size
:
15px
;
}
.uni-page-head-search
{
position
:
relative
;
display
:
flex
;
flex
:
1
;
margin
:
0
2px
;
line-height
:
30px
;
font-size
:
15px
;
}
.uni-page-head-search-input
{
width
:
100%
;
height
:
100%
;
padding-left
:
34px
;
text-align
:
left
;
}
.uni-page-head-search-input
{
width
:
100%
;
height
:
100%
;
padding-left
:
34px
;
text-align
:
left
;
}
.uni-page-head-search-placeholder
{
position
:
absolute
;
max-width
:
100%
;
height
:
100%
;
padding-left
:
34px
;
overflow
:
hidden
;
word-break
:
keep-all
;
white-space
:
pre
;
}
.uni-page-head-search-placeholder
{
position
:
absolute
;
max-width
:
100%
;
height
:
100%
;
padding-left
:
34px
;
overflow
:
hidden
;
word-break
:
keep-all
;
white-space
:
pre
;
}
.uni-page-head-search-placeholder-right
{
right
:
0
;
}
.uni-page-head-search-placeholder-right
{
right
:
0
;
}
.uni-page-head-search-placeholder-center
{
left
:
50%
;
transform
:
translateX
(
-50%
);
}
.uni-page-head-search-placeholder-center
{
left
:
50%
;
transform
:
translateX
(
-50%
);
}
.uni-page-head-search-placeholder
::before
{
position
:
absolute
;
top
:
0
;
left
:
2px
;
width
:
30px
;
content
:
"\ea0e"
;
display
:
block
;
font-size
:
20px
;
font-family
:
"uni"
;
text-align
:
center
;
}
.uni-page-head-search-placeholder
::before
{
position
:
absolute
;
top
:
0
;
left
:
2px
;
width
:
30px
;
content
:
"\ea0e"
;
display
:
block
;
font-size
:
20px
;
font-family
:
"uni"
;
text-align
:
center
;
}
uni-page-head
.uni-page-head-ft
{
display
:
flex
;
align-items
:
center
;
flex-direction
:
row-reverse
;
font-size
:
13px
;
}
uni-page-head
.uni-page-head-ft
{
display
:
flex
;
align-items
:
center
;
flex-direction
:
row-reverse
;
font-size
:
13px
;
}
uni-page-head
.uni-page-head__title
{
font-weight
:
bold
;
font-size
:
16px
;
line-height
:
30px
;
text-align
:
center
;
overflow
:
hidden
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
}
uni-page-head
.uni-page-head__title
{
font-weight
:
bold
;
font-size
:
16px
;
line-height
:
30px
;
text-align
:
center
;
overflow
:
hidden
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
}
uni-page-head
.uni-page-head__title
.uni-loading
{
width
:
16px
;
height
:
16px
;
margin-top
:
-3px
;
}
uni-page-head
.uni-page-head__title
.uni-loading
{
width
:
16px
;
height
:
16px
;
margin-top
:
-3px
;
}
uni-page-head
.uni-page-head__title
.uni-page-head__title_image
{
width
:
auto
;
height
:
26px
;
vertical-align
:
middle
;
}
uni-page-head
.uni-page-head__title
.uni-page-head__title_image
{
width
:
auto
;
height
:
26px
;
vertical-align
:
middle
;
}
uni-page-head
.uni-page-head-shadow
{
overflow
:
visible
;
}
uni-page-head
.uni-page-head-shadow
{
overflow
:
visible
;
}
uni-page-head
.uni-page-head-shadow
::after
{
content
:
""
;
position
:
absolute
;
left
:
0
;
right
:
0
;
top
:
100%
;
height
:
5px
;
background-size
:
100%
100%
;
}
uni-page-head
.uni-page-head-shadow
::after
{
content
:
""
;
position
:
absolute
;
left
:
0
;
right
:
0
;
top
:
100%
;
height
:
5px
;
background-size
:
100%
100%
;
}
uni-page-head
.uni-page-head-shadow-grey
::after
{
background-image
:
url("https://cdn.dcloud.net.cn/img/shadow-grey.png")
;
}
uni-page-head
.uni-page-head-shadow-grey
::after
{
background-image
:
url("https://cdn.dcloud.net.cn/img/shadow-grey.png")
;
}
uni-page-head
.uni-page-head-shadow-blue
::after
{
background-image
:
url("https://cdn.dcloud.net.cn/img/shadow-blue.png")
;
}
uni-page-head
.uni-page-head-shadow-blue
::after
{
background-image
:
url("https://cdn.dcloud.net.cn/img/shadow-blue.png")
;
}
uni-page-head
.uni-page-head-shadow-green
::after
{
background-image
:
url("https://cdn.dcloud.net.cn/img/shadow-green.png")
;
}
uni-page-head
.uni-page-head-shadow-green
::after
{
background-image
:
url("https://cdn.dcloud.net.cn/img/shadow-green.png")
;
}
uni-page-head
.uni-page-head-shadow-orange
::after
{
background-image
:
url("https://cdn.dcloud.net.cn/img/shadow-orange.png")
;
}
uni-page-head
.uni-page-head-shadow-orange
::after
{
background-image
:
url("https://cdn.dcloud.net.cn/img/shadow-orange.png")
;
}
uni-page-head
.uni-page-head-shadow-red
::after
{
background-image
:
url("https://cdn.dcloud.net.cn/img/shadow-red.png")
;
}
uni-page-head
.uni-page-head-shadow-red
::after
{
background-image
:
url("https://cdn.dcloud.net.cn/img/shadow-red.png")
;
}
uni-page-head
.uni-page-head-shadow-yellow
::after
{
background-image
:
url("https://cdn.dcloud.net.cn/img/shadow-yellow.png")
;
}
uni-page-head
.uni-page-head-shadow-yellow
::after
{
background-image
:
url("https://cdn.dcloud.net.cn/img/shadow-yellow.png")
;
}
</
style
>
<
script
>
import
appendCss
from
'
uni-platform/helpers/append-css
'
...
...
@@ -461,7 +461,8 @@ export default {
}
else
{
fontFamily
=
`font
${
Date
.
now
()}
`
fonts
[
fontSrc
]
=
fontFamily
const
cssText
=
`@font-face{font-family: "
${
fontFamily
}
";src: url("
${
fontSrc
}
") format("truetype")}`
const
cssText
=
`@font-face{font-family: "
${
fontFamily
}
";src: url("
${
fontSrc
}
") format("truetype")}`
appendCss
(
cssText
,
'
uni-btn-font-
'
+
fontFamily
)
}
btn
.
fontFamily
=
fontFamily
...
...
@@ -571,4 +572,4 @@ export default {
}
}
}
</
script
>
</
script
>
src/platforms/h5/helpers/get-window-offset.js
浏览文件 @
b1fdbd73
...
...
@@ -9,9 +9,13 @@ export default function getWindowOffset () {
const
style
=
document
.
documentElement
.
style
const
top
=
parseInt
((
style
.
getPropertyValue
(
'
--window-top
'
).
match
(
/
\d
+/
)
||
[
'
0
'
])[
0
])
const
bottom
=
parseInt
((
style
.
getPropertyValue
(
'
--window-bottom
'
).
match
(
/
\d
+/
)
||
[
'
0
'
])[
0
])
const
left
=
parseInt
((
style
.
getPropertyValue
(
'
--window-left
'
).
match
(
/
\d
+/
)
||
[
'
0
'
])[
0
])
const
right
=
parseInt
((
style
.
getPropertyValue
(
'
--window-right
'
).
match
(
/
\d
+/
)
||
[
'
0
'
])[
0
])
return
{
top
:
top
?
(
top
+
safeAreaInsets
.
top
)
:
0
,
bottom
:
bottom
?
(
bottom
+
safeAreaInsets
.
bottom
)
:
0
bottom
:
bottom
?
(
bottom
+
safeAreaInsets
.
bottom
)
:
0
,
left
:
left
?
(
left
+
safeAreaInsets
.
left
)
:
0
,
right
:
right
?
(
right
+
safeAreaInsets
.
right
)
:
0
}
}
...
...
@@ -29,6 +33,8 @@ export default function getWindowOffset () {
}
return
{
top
,
bottom
bottom
,
left
:
0
,
right
:
0
}
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录