add: set windows style apis

lib/apis.js

@@ -171,7 +171,10 @@ const ui = [
   'showRightWindow',
   'hideTopWindow',
   'hideLeftWindow',
-  'hideRightWindow'
+  'hideRightWindow',
+  'setTopWindowStyle',
+  'setLeftWindowStyle',
+  'setRightWindowStyle'
 ]
 
 const event = [

src/platforms/h5/components/app/layout.vue

 <template>
-  <uni-layout
-    v-if="responsive"
-    :class="{'uni-app--showlayout':showLayout,'uni-app--showtopwindow':showTopWindow,'uni-app--showleftwindow':showLeftWindow,'uni-app--showrightwindow':showRightWindow}"
+  <uni-layout
+    v-if="responsive"
+    :class="{'uni-app--showlayout':showLayout,'uni-app--showtopwindow':showTopWindow,'uni-app--showleftwindow':showLeftWindow,'uni-app--showrightwindow':showRightWindow}"
   >
-    <uni-top-window
-      v-if="topWindow"
-      v-show="showTopWindow || apiShowTopWindow"
+    <uni-top-window
+      v-if="topWindow"
+      v-show="showTopWindow || apiShowTopWindow"
     >
-      <div
-        ref="topWindow"
-        class="uni-top-window"
-        :style="topWindowStyle"
+      <div
+        ref="topWindow"
+        class="uni-top-window"
+        :style="topWindowStyle"
       >
-        <v-uni-top-window
-          ref="top"
-          :navigation-bar-title-text="navigationBarTitleText"
+        <v-uni-top-window
+          ref="top"
+          :navigation-bar-title-text="navigationBarTitleText"
           v-bind="bindWindow"
-          @hook:mounted="onTopWindowInit"
+          @hook:mounted="onTopWindowInit"
         />
       </div>
-      <div
-        class="uni-top-window--placeholder"
-        :style="{height:topWindowHeight}"
+      <div
+        class="uni-top-window--placeholder"
+        :style="{height:topWindowHeight}"
       />
     </uni-top-window>
     <uni-content>
@@ -30,52 +30,52 @@
           <router-view :key="routerKey" />
         </keep-alive>
       </uni-main>
-      <uni-left-window
-        v-if="leftWindow"
-        v-show="showLeftWindow || apiShowLeftWindow"
-        ref="leftWindow"
+      <uni-left-window
+        v-if="leftWindow"
+        v-show="showLeftWindow || apiShowLeftWindow"
+        ref="leftWindow"
         :data-show="apiShowLeftWindow"
-        :style="leftWindowStyle"
+        :style="leftWindowStyle"
       >
-        <div
-          v-if="apiShowLeftWindow"
-          class="uni-mask"
-          @click="apiShowLeftWindow = false"
+        <div
+          v-if="apiShowLeftWindow"
+          class="uni-mask"
+          @click="apiShowLeftWindow = false"
         />
         <div class="uni-left-window">
-          <v-uni-left-window
-            ref="left"
-            v-bind="bindWindow"
-            @hook:mounted="onLeftWindowInit"
+          <v-uni-left-window
+            ref="left"
+            v-bind="bindWindow"
+            @hook:mounted="onLeftWindowInit"
           />
         </div>
       </uni-left-window>
-      <uni-right-window
-        v-if="rightWindow"
-        v-show="showRightWindow || apiShowRightWindow"
-        ref="rightWindow"
+      <uni-right-window
+        v-if="rightWindow"
+        v-show="showRightWindow || apiShowRightWindow"
+        ref="rightWindow"
         :data-show="apiShowRightWindow"
-        :style="rightWindowStyle"
+        :style="rightWindowStyle"
       >
-        <div
-          v-if="apiShowRightWindow"
-          class="uni-mask"
-          @click="apiShowRightWindow = false"
+        <div
+          v-if="apiShowRightWindow"
+          class="uni-mask"
+          @click="apiShowRightWindow = false"
         />
         <div class="uni-right-window">
-          <v-uni-right-window
-            ref="right"
-            v-bind="bindWindow"
-            @hook:mounted="onRightWindowInit"
+          <v-uni-right-window
+            ref="right"
+            v-bind="bindWindow"
+            @hook:mounted="onRightWindowInit"
           />
         </div>
       </uni-right-window>
     </uni-content>
     <!--TODO footer-->
   </uni-layout>
-  <keep-alive
-    v-else
-    :include="keepAliveInclude"
+  <keep-alive
+    v-else
+    :include="keepAliveInclude"
   >
     <router-view :key="routerKey" />
   </keep-alive>
@@ -274,6 +274,15 @@ export default {
         }
       }
     },
+    setWindowStyle (type, style) {
+      if (!this[type + 'Window']) {
+        return type + 'Window not found'
+      }
+      if (style) {
+        this[type + 'WindowStyle'] = style
+        this.$nextTick(this['on' + capitalize(type) + 'WindowInit'])
+      }
+    },
     initMaxWidth () {
       window.addEventListener('resize', () => {
         this.checkMaxWidth()
@@ -438,4 +447,4 @@ export default {
     z-index: 998;
     overflow: hidden;
   }
-</style>
+</style>

src/platforms/h5/service/api/ui/windows.js

@@ -25,7 +25,7 @@ export function showTopWindow () {
 
 export function hideTopWindow () {
   return showWindow('top', false)
-}
+}
 
 export function showLeftWindow () {
   return showWindow('left', true)
@@ -40,4 +40,31 @@ export function showRightWindow () {
 
 export function hideRightWindow () {
   return showWindow('right', false)
-}
+}
+
+function setWindowStyle (type, style) {
+  const api = 'set' + capitalize(type) + 'WindowStyle'
+  const app = getApp()
+  if (!app) {
+    return {
+      errMsg: `${api}:fail app not ready`
+    }
+  }
+  const msg = app.$children[0].$refs.layout.setWindowStyle(type, style)
+  if (msg) {
+    return {
+      errMsg: `${api}:fail ${msg}`
+    }
+  }
+  return {}
+}
+
+export function setTopWindowStyle (style) {
+  return setWindowStyle('top', style)
+}
+export function setLeftWindowStyle (style) {
+  return setWindowStyle('left', style)
+}
+export function setRightWindowStyle (style) {
+  return setWindowStyle('right', style)
+}