Skip to content

U
uni-app

ripplebb / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 0
Fork 0
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 b1fdbd73 编写于 作者: fxy060608's avatar fxy060608
浏览文件
操作

feat(h5): add leftWindow,rightWindow

上级 efd75c54
隐藏空白更改
内联 并排
Showing with 568 addition and 301 deletion
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 []
}
const childrenVm = app.$children[0]
let 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"
>&#xe601;</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.
先完成此消息的编辑！
想要评论请 注册 或