Skip to content

U
uni-app

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

Fork自 DCloud / uni-app

通知 1
Star 1
Fork 0
U
uni-app

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

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

feat(h5): topWindow

上级 71d831c3
展开全部 隐藏空白更改
内联 并排
Showing with 338 addition and 128 deletion
packages/uni-app-plus/dist/index.v3.js
浏览文件 @ 79c041f3
......@@ -120,8 +120,8 @@ var serviceContext = (function () {
'getBLEDeviceServices',
'getBLEDeviceCharacteristics',
'createBLEConnection',
'closeBLEConnection',
'setBLEMTU',
'closeBLEConnection',
'setBLEMTU',
'getBLEDeviceRSSI',
'onBeaconServiceChange',
'onBeaconUpdate',
......@@ -130,14 +130,15 @@ var serviceContext = (function () {
'stopBeaconDiscovery',
'checkIsSupportSoterAuthentication',
'checkIsSoterEnrolledInDevice',
'startSoterAuthentication',
'startSoterAuthentication',
'onThemeChange',
'onUIStyleChange'
];
const keyboard = [
'hideKeyboard',
'onKeyboardHeightChange'
'onKeyboardHeightChange',
'getSelectedTextRange'
];
const ui = [
......@@ -171,6 +172,7 @@ var serviceContext = (function () {
'stopPullDownRefresh',
'createSelectorQuery',
'createIntersectionObserver',
'createMediaQueryObserver',
'getMenuButtonBoundingClientRect'
];
......@@ -969,7 +971,7 @@ var serviceContext = (function () {
},
canvasId: {
type: String,
require: true
required: true
},
fileType: {
type: String,
......@@ -990,11 +992,11 @@ var serviceContext = (function () {
const drawCanvas = {
canvasId: {
type: String,
require: true
required: true
},
actions: {
type: Array,
require: true
required: true
},
reserve: {
type: Boolean,
......@@ -1108,7 +1110,7 @@ var serviceContext = (function () {
default: type.WGS84
},
altitude: {
altitude: Boolean,
type: Boolean,
default: false
}
};
......@@ -8826,7 +8828,7 @@ var serviceContext = (function () {
return webview
}
function _navigateTo({
function _navigateTo ({
url,
path,
query,
......@@ -8860,7 +8862,7 @@ var serviceContext = (function () {
setStatusBarStyle();
}
function navigateTo$1({
function navigateTo$1 ({
url,
events,
openType,
......@@ -8878,7 +8880,7 @@ var serviceContext = (function () {
animationDuration = routeStyles.animationDuration || globalStyle.animationDuration || ANI_DURATION;
}
const query = parseQuery(urls[1] || '');
navigate(path, function() {
navigate(path, function () {
_navigateTo({
url,
path,
......@@ -10339,16 +10341,6 @@ var serviceContext = (function () {
const canvasEventCallbacks = createCallbacks('canvasEvent');
UniServiceJSBridge.subscribe('onDrawCanvas', ({
callbackId,
data
}) => {
const callback = canvasEventCallbacks.pop(callbackId);
if (callback) {
callback(data);
}
});
UniServiceJSBridge.subscribe('onCanvasMethodCallback', ({
callbackId,
data
......@@ -10589,17 +10581,6 @@ var serviceContext = (function () {
'setTextBaseline', 'setLineDash'
];
var tempCanvas;
function getTempCanvas (width = 0, height = 0) {
if (!tempCanvas) {
tempCanvas = document.createElement('canvas');
}
tempCanvas.width = width;
tempCanvas.height = height;
return tempCanvas
}
function TextMetrics (width) {
this.width = width;
}
......@@ -10664,14 +10645,23 @@ var serviceContext = (function () {
}
}
// TODO
measureText (text) {
if (typeof document === 'object') {
var c2d = getTempCanvas().getContext('2d');
c2d.font = this.state.font;
return new TextMetrics(c2d.measureText(text).width || 0)
} else {
return new TextMetrics(0)
measureText (text, callback) {
const font = this.state.font;
{
const textMetrics = new TextMetrics(0);
if (typeof callback === 'function') {
const callbackId = canvasEventCallbacks.push(function ({ width }) {
callback(new TextMetrics(width));
});
operateCanvas(this.id, this.pageId, 'measureText', {
text,
font,
callbackId
});
} else {
console.error('warning: measureText missing required arguments: callback');
}
return textMetrics
}
}
......@@ -11753,6 +11743,51 @@ var serviceContext = (function () {
onUIStyleChange: onUIStyleChange
});
const getSelectedTextRangeEventCallbacks = createCallbacks('getSelectedTextRangeEvent');
UniServiceJSBridge.subscribe('onGetSelectedTextRange', ({
callbackId,
data
}) => {
console.log('onGetSelectedTextRange');
const callback = getSelectedTextRangeEventCallbacks.pop(callbackId);
if (callback) {
callback(data);
}
});
function getSelectedTextRange (_, callbackId) {
const pageId = getCurrentPageId();
UniServiceJSBridge.publishHandler('getSelectedTextRange', {
pageId,
callbackId: getSelectedTextRangeEventCallbacks.push(function (res) {
invoke$1(callbackId, res);
})
}, pageId);
}
var require_context_module_1_16 = /*#__PURE__*/Object.freeze({
__proto__: null,
getSelectedTextRange: getSelectedTextRange
});
let callback$1;
onMethod('onKeyboardHeightChange', res => {
if (callback$1) {
invoke$1(callback$1, res);
}
});
function onKeyboardHeightChange (callbackId) {
callback$1 = callbackId;
}
var require_context_module_1_17 = /*#__PURE__*/Object.freeze({
__proto__: null,
onKeyboardHeightChange: onKeyboardHeightChange
});
const longPressActionsCallbackId = 'longPressActionsCallback';
let longPressActions = {};
......@@ -11776,7 +11811,7 @@ var serviceContext = (function () {
return invokeMethod('previewImagePlus', args)
}
var require_context_module_1_16 = /*#__PURE__*/Object.freeze({
var require_context_module_1_18 = /*#__PURE__*/Object.freeze({
__proto__: null,
previewImage: previewImage$1
});
......@@ -11864,7 +11899,7 @@ var serviceContext = (function () {
return recorderManager || (recorderManager = new RecorderManager())
}
var require_context_module_1_17 = /*#__PURE__*/Object.freeze({
var require_context_module_1_19 = /*#__PURE__*/Object.freeze({
__proto__: null,
getRecorderManager: getRecorderManager
});
......@@ -11958,7 +11993,7 @@ var serviceContext = (function () {
return task
}
var require_context_module_1_18 = /*#__PURE__*/Object.freeze({
var require_context_module_1_20 = /*#__PURE__*/Object.freeze({
__proto__: null,
downloadFile: downloadFile$1
});
......@@ -12076,7 +12111,7 @@ var serviceContext = (function () {
return new RequestTask(requestTaskId)
}
var require_context_module_1_19 = /*#__PURE__*/Object.freeze({
var require_context_module_1_21 = /*#__PURE__*/Object.freeze({
__proto__: null,
request: request$1
});
......@@ -12258,7 +12293,7 @@ var serviceContext = (function () {
callbacks$b.close = callbackId;
}
var require_context_module_1_20 = /*#__PURE__*/Object.freeze({
var require_context_module_1_22 = /*#__PURE__*/Object.freeze({
__proto__: null,
connectSocket: connectSocket$1,
sendSocketMessage: sendSocketMessage$1,
......@@ -12293,7 +12328,7 @@ var serviceContext = (function () {
return updateManager || (updateManager = new UpdateManager())
}
var require_context_module_1_21 = /*#__PURE__*/Object.freeze({
var require_context_module_1_23 = /*#__PURE__*/Object.freeze({
__proto__: null,
getUpdateManager: getUpdateManager
});
......@@ -12387,7 +12422,7 @@ var serviceContext = (function () {
return task
}
var require_context_module_1_22 = /*#__PURE__*/Object.freeze({
var require_context_module_1_24 = /*#__PURE__*/Object.freeze({
__proto__: null,
uploadFile: uploadFile$1
});
......@@ -12476,7 +12511,7 @@ var serviceContext = (function () {
return new MPAnimation(option)
}
var require_context_module_1_23 = /*#__PURE__*/Object.freeze({
var require_context_module_1_25 = /*#__PURE__*/Object.freeze({
__proto__: null,
createAnimation: createAnimation
});
......@@ -12546,11 +12581,58 @@ var serviceContext = (function () {
return new ServiceIntersectionObserver(getCurrentPageVm('createIntersectionObserver'), options)
}
var require_context_module_1_24 = /*#__PURE__*/Object.freeze({
var require_context_module_1_26 = /*#__PURE__*/Object.freeze({
__proto__: null,
createIntersectionObserver: createIntersectionObserver
});
const createMediaQueryObserverCallbacks = createCallbacks('requestMediaQueryObserver');
class ServiceMediaQueryObserver {
constructor (component, options) {
this.pageId = component.$page.id;
this.component = component._$id || component; // app-plus 平台传输_$id
this.options = options;
}
observe (options, callback) {
if (typeof callback !== 'function') {
return
}
this.options = options;
this.reqId = createMediaQueryObserverCallbacks.push(callback);
UniServiceJSBridge.publishHandler('requestMediaQueryObserver', {
reqId: this.reqId,
component: this.component,
options: this.options
}, this.pageId);
}
disconnect () {
UniServiceJSBridge.publishHandler('destroyMediaQueryObserver', {
reqId: this.reqId
}, this.pageId);
}
}
function createMediaQueryObserver (context, options) {
if (!context._isVue) {
options = context;
context = null;
}
if (context) {
return new ServiceMediaQueryObserver(context, options)
}
return new ServiceMediaQueryObserver(getCurrentPageVm('createMediaQueryObserver'), options)
}
var require_context_module_1_27 = /*#__PURE__*/Object.freeze({
__proto__: null,
createMediaQueryObserver: createMediaQueryObserver
});
const ContextClasss = {
canvas: CanvasContext,
map: MapContext,
......@@ -12687,28 +12769,11 @@ var serviceContext = (function () {
return new SelectorQuery(getCurrentPageVm('createSelectorQuery'))
}
var require_context_module_1_25 = /*#__PURE__*/Object.freeze({
var require_context_module_1_28 = /*#__PURE__*/Object.freeze({
__proto__: null,
createSelectorQuery: createSelectorQuery
});
let callback$1;
onMethod('onKeyboardHeightChange', res => {
if (callback$1) {
invoke$1(callback$1, res);
}
});
function onKeyboardHeightChange (callbackId) {
callback$1 = callbackId;
}
var require_context_module_1_26 = /*#__PURE__*/Object.freeze({
__proto__: null,
onKeyboardHeightChange: onKeyboardHeightChange
});
UniServiceJSBridge.subscribe('onLoadFontFaceCallback', ({
callbackId,
data
......@@ -12729,7 +12794,7 @@ var serviceContext = (function () {
}, pageId);
}
var require_context_module_1_27 = /*#__PURE__*/Object.freeze({
var require_context_module_1_29 = /*#__PURE__*/Object.freeze({
__proto__: null,
loadFontFace: loadFontFace$1
});
......@@ -12742,7 +12807,7 @@ var serviceContext = (function () {
return {}
}
var require_context_module_1_28 = /*#__PURE__*/Object.freeze({
var require_context_module_1_30 = /*#__PURE__*/Object.freeze({
__proto__: null,
pageScrollTo: pageScrollTo$1
});
......@@ -12755,7 +12820,7 @@ var serviceContext = (function () {
return {}
}
var require_context_module_1_29 = /*#__PURE__*/Object.freeze({
var require_context_module_1_31 = /*#__PURE__*/Object.freeze({
__proto__: null,
setPageMeta: setPageMeta
});
......@@ -12792,7 +12857,7 @@ var serviceContext = (function () {
callbacks$c.push(callbackId);
}
var require_context_module_1_30 = /*#__PURE__*/Object.freeze({
var require_context_module_1_32 = /*#__PURE__*/Object.freeze({
__proto__: null,
removeTabBarBadge: removeTabBarBadge$1,
showTabBarRedDot: showTabBarRedDot$1,
......@@ -12818,7 +12883,7 @@ var serviceContext = (function () {
callbacks$d.splice(callbacks$d.indexOf(callbackId), 1);
}
var require_context_module_1_31 = /*#__PURE__*/Object.freeze({
var require_context_module_1_33 = /*#__PURE__*/Object.freeze({
__proto__: null,
onWindowResize: onWindowResize,
offWindowResize: offWindowResize
......@@ -12845,22 +12910,24 @@ var serviceContext = (function () {
'./device/compass.js': require_context_module_1_13,
'./device/network.js': require_context_module_1_14,
'./device/theme.js': require_context_module_1_15,
'./media/preview-image.js': require_context_module_1_16,
'./media/recorder.js': require_context_module_1_17,
'./network/download-file.js': require_context_module_1_18,
'./network/request.js': require_context_module_1_19,
'./network/socket.js': require_context_module_1_20,
'./network/update.js': require_context_module_1_21,
'./network/upload-file.js': require_context_module_1_22,
'./ui/create-animation.js': require_context_module_1_23,
'./ui/create-intersection-observer.js': require_context_module_1_24,
'./ui/create-selector-query.js': require_context_module_1_25,
'./ui/keyboard.js': require_context_module_1_26,
'./ui/load-font-face.js': require_context_module_1_27,
'./ui/page-scroll-to.js': require_context_module_1_28,
'./ui/set-page-meta.js': require_context_module_1_29,
'./ui/tab-bar.js': require_context_module_1_30,
'./ui/window.js': require_context_module_1_31,
'./keyboard/get-selected-text-range.js': require_context_module_1_16,
'./keyboard/keyboard.js': require_context_module_1_17,
'./media/preview-image.js': require_context_module_1_18,
'./media/recorder.js': require_context_module_1_19,
'./network/download-file.js': require_context_module_1_20,
'./network/request.js': require_context_module_1_21,
'./network/socket.js': require_context_module_1_22,
'./network/update.js': require_context_module_1_23,
'./network/upload-file.js': require_context_module_1_24,
'./ui/create-animation.js': require_context_module_1_25,
'./ui/create-intersection-observer.js': require_context_module_1_26,
'./ui/create-media-query-observer.js': require_context_module_1_27,
'./ui/create-selector-query.js': require_context_module_1_28,
'./ui/load-font-face.js': require_context_module_1_29,
'./ui/page-scroll-to.js': require_context_module_1_30,
'./ui/set-page-meta.js': require_context_module_1_31,
'./ui/tab-bar.js': require_context_module_1_32,
'./ui/window.js': require_context_module_1_33,
};
var req = function req(key) {
......@@ -13013,6 +13080,9 @@ var serviceContext = (function () {
function onAppEnterForeground () {
const pages = getCurrentPages();
if (pages.length === 0) {
return
}
const page = pages[pages.length - 1];
const args = {
path: page.route,
......@@ -13109,11 +13179,29 @@ var serviceContext = (function () {
}
}
const requestMediaQueryObserverCallbacks = createCallbacks('requestMediaQueryObserver');
function onRequestMediaQueryObserver ({
reqId,
reqEnd,
res
}) {
const callback = requestMediaQueryObserverCallbacks.get(reqId);
if (callback) {
if (reqEnd) {
requestMediaQueryObserverCallbacks.pop(reqId);
return
}
callback(res);
}
}
subscribe('onPageScroll', createPageEvent('onPageScroll'));
subscribe('onReachBottom', createPageEvent('onReachBottom'));
subscribe('onRequestComponentInfo', onRequestComponentInfo);
subscribe('onRequestComponentObserver', onRequestComponentObserver);
subscribe('onRequestMediaQueryObserver', onRequestMediaQueryObserver);
}
function perf (type, startTime) {
......@@ -13523,12 +13611,12 @@ var serviceContext = (function () {
}
var tags = [
'uni-app',
'uni-layout',
'uni-content',
'uni-main',
'uni-left-window',
'uni-right-window',
'uni-app',
'uni-layout',
'uni-content',
'uni-main',
'uni-left-window',
'uni-right-window',
'uni-tabbar',
'uni-page',
'uni-page-head',
......@@ -13538,7 +13626,7 @@ var serviceContext = (function () {
'uni-actionsheet',
'uni-modal',
'uni-toast',
'uni-resize-sensor',
'uni-resize-sensor',
'uni-shadow-root',
'uni-ad',
......@@ -13581,7 +13669,8 @@ var serviceContext = (function () {
'uni-textarea',
'uni-video',
'uni-view',
'uni-web-view'
'uni-web-view',
'uni-match-media'
];
// 使用白名单过滤（前期有一批自定义组件使用了 uni-）
......@@ -13697,6 +13786,10 @@ var serviceContext = (function () {
return uni.createIntersectionObserver(this, options)
};
Vue.prototype.createMediaQueryObserver = function createMediaQueryObserver (options) {
return uni.createMediaQueryObserver(this, options)
};
Vue.prototype.selectComponent = function selectComponent (selector) {
return querySelector(this, parseSelector(selector))
};
......@@ -14391,7 +14484,7 @@ var serviceContext = (function () {
}
var vuePlugin = {
install(Vue, options) {
install (Vue, options) {
initVue(Vue);
initData(Vue);
......@@ -14399,18 +14492,21 @@ var serviceContext = (function () {
initPolyfill(Vue);
Vue.prototype.getOpenerEventChannel = function() {
return this.$root.$scope.eventChannel || new EventChannel()
Vue.prototype.getOpenerEventChannel = function () {
if (!this.$root.$scope.eventChannel) {
this.$root.$scope.eventChannel = new EventChannel();
}
return this.$root.$scope.eventChannel
};
Object.defineProperty(Vue.prototype, '$page', {
get() {
get () {
return this.$root.$scope.$page
}
});
// 兼容旧版本
Object.defineProperty(Vue.prototype, '$mp', {
get() {
get () {
return {
page: this.$root.$scope
}
......@@ -14418,9 +14514,9 @@ var serviceContext = (function () {
});
const oldMount = Vue.prototype.$mount;
Vue.prototype.$mount = function mount(el, hydrating) {
Vue.prototype.$mount = function mount (el, hydrating) {
if (this.mpType === 'app') {
this.$options.render = function() {};
this.$options.render = function () {};
if (weex.config.preload) { // preload
if (process.env.NODE_ENV !== 'production') {
console.log('[uni-app] preload app-service.js');
......@@ -14441,7 +14537,7 @@ var serviceContext = (function () {
return oldMount.call(this, el, hydrating)
};
Vue.prototype.$nextTick = function nextTick(cb) {
Vue.prototype.$nextTick = function nextTick (cb) {
const renderWatcher = this._watcher;
const callback = typeof cb === 'function';
const result = new Promise((resolve) => {
......
packages/uni-cli-shared/lib/tags.js
浏览文件 @ 79c041f3
......@@ -41,5 +41,5 @@ module.exports = {
video: ['app-plus', 'mp-weixin', 'h5'],
view: ['app-plus', 'mp-weixin', 'h5'],
'web-view': ['app-plus', 'mp-weixin'],
'match-media':['app-plus', 'mp-weixin', 'h5']
'match-media': ['app-plus', 'mp-weixin', 'h5']
}
packages/uni-h5/dist/index.css
浏览文件 @ 79c041f3
此差异已折叠。
packages/uni-h5/manifest.json
浏览文件 @ 79c041f3
......@@ -301,6 +301,14 @@
"/core/view/components/swiper-item/index.vue",
"SwiperItem"
],
[
"/core/view/components/movable-area/index.vue",
"MovableArea"
],
[
"/core/view/components/movable-view/index.vue",
"MovableView"
],
[
"/platforms/h5/components/system-routes/preview-image/index.vue",
"PreviewImage"
......@@ -460,11 +468,15 @@
[]
],
"hideKeyboard": [
"/platforms/h5/service/api/device/hide-keyboard.js",
"/platforms/h5/service/api/keyboard/keyboard.js",
[]
],
"onKeyboardHeightChange": [
"/core/service/api/ui/keyboard.js",
"/core/service/api/keyboard/keyboard.js",
[]
],
"getSelectedTextRange": [
"/core/service/api/keyboard/get-selected-text-range.js",
[]
],
"showToast": [
......@@ -732,6 +744,10 @@
]
]
],
"createMediaQueryObserver": [
"/core/service/api/ui/create-media-query-observer.js",
[]
],
"$emit": [
"/platforms/h5/service/api/base/event-bus.js",
[
......
packages/webpack-uni-pages-loader/lib/platforms/h5.js
浏览文件 @ 79c041f3
......@@ -154,7 +154,10 @@ const getPageComponents = function (inputDir, pagesJson) {
isTabBar,
tabBarIndex,
isQuit: isEntry || isTabBar,
windowTop
windowTop,
topWindow: pageStyle.topWindow,
leftWindow: pageStyle.leftWindow,
rightWindow: pageStyle.rightWindow
}
}).filter(pageComponents => !!pageComponents)
}
......@@ -211,7 +214,10 @@ const genPageRoutes = function (pageComponents) {
isEntry,
isTabBar,
windowTop,
tabBarIndex
tabBarIndex,
topWindow,
leftWindow,
rightWindow
}) => {
return `
{
......@@ -222,9 +228,8 @@ component: {
'Page',
{
props: Object.assign({
${isQuit ? 'isQuit:true,\n' : ''}
${isEntry ? 'isEntry:true,\n' : ''}
${isTabBar ? 'isTabBar:true,\n' : ''}
${isQuit ? 'isQuit:true,\n' : ''}${isEntry ? 'isEntry:true,\n' : ''}${isTabBar ? 'isTabBar:true,\n' : ''}
${topWindow === false ? 'topWindow:false,\n' : ''}${leftWindow === false ? 'leftWindow:false,\n' : ''}${rightWindow === false ? 'rightWindow:false,\n' : ''}
${isTabBar ? ('tabBarIndex:' + tabBarIndex) : ''}
},__uniConfig.globalStyle,${JSON.stringify(props)})
},
......@@ -238,7 +243,7 @@ component: {
},
meta:{${isQuit ? '\nid:' + (id++) + ',' : ''}
name:'${name}',
isNVue:${isNVue},
isNVue:${isNVue},${topWindow === false ? 'topWindow:false,\n' : ''}${leftWindow === false ? 'leftWindow:false,\n' : ''}${rightWindow === false ? 'rightWindow:false,\n' : ''}
pagePath:'${route}'${isQuit ? ',\nisQuit:true' : ''}${isEntry ? ',\nisEntry:true' : ''}${isTabBar ? ',\nisTabBar:true' : ''}${tabBarIndex !== -1 ? (',\ntabBarIndex:' + tabBarIndex) : ''},
windowTop:${windowTop}
}
......@@ -360,12 +365,20 @@ function filterPages (pagesJson, includes) {
function genLayoutComponentsCode (pagesJson) {
const code = []
const {
topWindow,
leftWindow,
rightWindow
} = pagesJson
if (topWindow && topWindow.path) {
code.push(
`import TopWindow from './${topWindow.path}';
${topWindow.style ? ('TopWindow.style=' + JSON.stringify(topWindow.style)) : ''}
Vue.component('VUniTopWindow',TopWindow);`
)
}
if (leftWindow && leftWindow.path) {
code.push(
`import LeftWindow from './${leftWindow.path}';
`import LeftWindow from './${leftWindow.path}';
${leftWindow.style ? ('LeftWindow.style=' + JSON.stringify(leftWindow.style)) : ''}
Vue.component('VUniLeftWindow',LeftWindow);`
)
......@@ -374,7 +387,7 @@ Vue.component('VUniLeftWindow',LeftWindow);`
if (rightWindow && rightWindow.path) {
code.push(
`
import RightWindow from './${rightWindow.path}';
import RightWindow from './${rightWindow.path}';
${rightWindow.style ? ('RightWindow.style=' + JSON.stringify(rightWindow.style)) : ''}
Vue.component('VUniRightWindow',RightWindow);`
)
......
src/core/helpers/tags.js
浏览文件 @ 79c041f3
......@@ -2,7 +2,8 @@ module.exports = [
'uni-app',
'uni-layout',
'uni-content',
'uni-main',
'uni-main',
'uni-top-window',
'uni-left-window',
'uni-right-window',
'uni-tabbar',
......
src/platforms/h5/components/app/layout.vue
浏览文件 @ 79c041f3
......@@ -3,15 +3,26 @@
v-if="responsive"
:class="{'uni-app--showlayout':showLayout}"
>
<!--TODO header-->
<uni-content>
<uni-main>
<uni-top-window
v-if="topWindow"
v-show="showLayout&&showTopWindow"
ref="topWindow"
:style="topWindowStyle"
>
<v-uni-top-window
ref="top"
@hook:mounted="onTopWindowInit"
/>
</uni-top-window>
<keep-alive :include="keepAliveInclude">
<router-view :key="routerKey" />
</keep-alive>
</uni-main>
<uni-left-window
v-if="leftWindow"
v-show="showLayout&&showLeftWindow"
ref="leftWindow"
:style="leftWindowStyle"
>
......@@ -22,6 +33,7 @@
</uni-left-window>
<uni-right-window
v-if="rightWindow"
v-show="showLayout&&showRightWindow"
ref="rightWindow"
:style="rightWindowStyle"
>
......@@ -89,14 +101,46 @@ export default {
return {
showLayout: true,
leftWindowStyle: '',
rightWindowStyle: ''
rightWindowStyle: '',
topWindowStyle: '',
showTopWindow: true,
showLeftWindow: true,
showRightWindow: true
}
},
watch: {
$route (newRoute, oldRoute) {
this.initShowWindow(newRoute)
},
showTopWindow (newVal, val) {
if (newVal) {
this.$nextTick(this.onTopWindowInit)
} else {
updateCssVar('--window-top', '0px')
}
},
showLeftWindow (newVal, val) {
if (newVal) {
this.$nextTick(this.onLeftWindowInit)
} else {
updateCssVar('--window-left', '0px')
}
},
showRightWindow (newVal, val) {
if (newVal) {
this.$nextTick(this.onRightWindowInit)
} else {
updateCssVar('--window-right', '0px')
}
}
},
beforeCreate () {
updateCssVar('--window-top', '0px')
updateCssVar('--window-left', '0px')
updateCssVar('--window-right', '0px')
},
created () {
this.topWindow = Vue.component('VUniTopWindow')
this.leftWindow = Vue.component('VUniLeftWindow')
this.rightWindow = Vue.component('VUniRightWindow')
if ( // 低版本不提供 responsive 支持
......@@ -104,7 +148,8 @@ export default {
uni.canIUse('css.var') &&
window.matchMedia
) {
this.responsive = Math.max.apply(null, sizes) > minWidth
// 存在 topWindow 时，视为始终要支持 responsive （如 pc-admin 的情况，需要在 top 中切换 left 或 right）
this.responsive = this.topWindow || Math.max.apply(null, sizes) > minWidth
if (this.responsive) {
if (this.leftWindow && this.leftWindow.options.style) {
this.leftWindowStyle = this.leftWindow.options.style
......@@ -115,8 +160,23 @@ export default {
this.initMediaQuery()
}
}
this.initShowWindow(this.$route)
},
methods: {
initShowWindow (newRoute) {
if (!this.responsive) {
return
}
if (this.topWindow) {
this.showTopWindow = newRoute.meta.topWindow !== false
}
if (this.leftWindow) {
this.showLeftWindow = newRoute.meta.leftWindow !== false
}
if (this.rightWindow) {
this.showRightWindow = newRoute.meta.rightWindow !== false
}
},
initMediaQuery () {
if (!window.matchMedia) {
return
......@@ -125,12 +185,21 @@ export default {
mediaQueryList.addListener((e) => {
this.showLayout = e.matches
this.$nextTick(() => {
this.topWindow && this.onTopWindowInit()
this.leftWindow && this.onLeftWindowInit()
this.rightWindow && this.onRightWindowInit()
})
})
this.showLayout = mediaQueryList.matches
},
onTopWindowInit () {
// TODO page header
if (this.topWindowStyle && this.topWindowStyle.width) {
updateCssVar('--window-top', this.$refs.topWindow.offsetHeight + 'px')
} else {
updateCssVar('--window-top', this.$refs.top.$el.offsetHeight + 'px')
}
},
onLeftWindowInit () {
if (this.leftWindowStyle && this.leftWindowStyle.width) {
updateCssVar('--window-left', this.$refs.leftWindow.offsetWidth + 'px')
......@@ -158,7 +227,6 @@ export default {
uni-main {
flex: 1;
overflow: auto;
}
uni-left-window {
......
src/platforms/h5/components/page/index.vue
浏览文件 @ 79c041f3
<template>
<uni-page :data-page="$route.meta.pagePath">
<page-head
v-if="navigationBar.type!=='none'"
v-if="!hasTopWindow && navigationBar.type!=='none'"
v-bind="navigationBar"
/>
<page-refresh
......@@ -32,6 +32,8 @@
}
</style>
<script>
import Vue from 'vue'
import {
upx2px
} from 'uni-helpers/index'
......@@ -159,9 +161,16 @@ export default {
default () {
return {}
}
},
topWindow: {
type: Boolean,
default: true
}
},
data () {
// 目前简单处理，存在topWindow时，始终不显示page head
const hasTopWindow = this.topWindow !== false && !!Vue.component('VUniTopWindow')
let navigationBar = {}
const titleNViewTypeList = {
none: 'default',
auto: 'transparent',
......@@ -198,7 +207,7 @@ export default {
NO: false
}
const navigationBar = mergeTitleNView({
navigationBar = mergeTitleNView({
loading: false,
backButton: !this.isQuit && !this.$route.meta.isQuit, // redirectTo,reLaunch时可能动态修改 meta.isQuit
backgroundColor: this.navigationBarBackgroundColor,
......@@ -231,6 +240,7 @@ export default {
refreshOptions.range = upx2px(refreshOptions.range)
return {
hasTopWindow,
navigationBar,
refreshOptions
}
......
src/platforms/h5/view/bridge/subscribe/index.js
浏览文件 @ 79c041f3
import Vue from 'vue'
import {
isPlainObject,
supportsPassive
......@@ -28,10 +30,14 @@ function updateCssVar (vm) {
const windowTopValue = navigationBarType === 'default' || navigationBarType === 'float' ? NAVBAR_HEIGHT : 0
const windowBottomValue = getApp().$children[0].showTabBar ? TABBAR_HEIGHT : 0
const envMethod = uni.canIUse('css.env') ? 'env' : (uni.canIUse('css.constant') ? 'constant' : '')
const windowTop = windowTopValue && envMethod ? `calc(${windowTopValue}px + ${envMethod}(safe-area-inset-top))` : `${windowTopValue}px`
const windowBottom = windowBottomValue && envMethod ? `calc(${windowBottomValue}px + ${envMethod}(safe-area-inset-bottom))` : `${windowBottomValue}px`
const windowTop = windowTopValue && envMethod ? `calc(${windowTopValue}px + ${envMethod}(safe-area-inset-top))`
: `${windowTopValue}px`
const windowBottom = windowBottomValue && envMethod
? `calc(${windowBottomValue}px + ${envMethod}(safe-area-inset-bottom))` : `${windowBottomValue}px`
const style = document.documentElement.style
style.setProperty('--window-top', windowTop)
if (!Vue.component('VUniTopWindow') || pageVm.topWindow === false) { // TODO 目前简单处理，只要包含topWindow，则不再更新--window-top
style.setProperty('--window-top', windowTop)
}
style.setProperty('--window-bottom', windowBottom)
console.debug(`${vm.$page.route}[${vm.$page.id}]：--window-top=${windowTop}`)
console.debug(`${vm.$page.route}[${vm.$page.id}]：--window-bottom=${windowBottom}`)
......@@ -85,4 +91,4 @@ export default function initSubscribe (subscribe) {
})
}
})
}
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或