feat: cover 组件支持嵌套

src/platforms/app-plus/view/components/ad/index.vue

@@ -73,53 +73,55 @@ export default {
     }
   },
   mounted () {
-    this._adId = 'AdView-' + this._newGUID()
-    const adStyle = Object.assign({
-      id: this._adId
-    }, this.position)
-    const adView = this.adView = plus.ad.createAdView(adStyle)
-    adView.interceptTouchEvent(false)
-    plus.webview.currentWebview().append(adView)
-    if (this.hidden) {
-      adView.hide()
-    }
-    this.$watch('attrs', () => {
-      this._request()
-    }, {
-      deep: true
-    })
-    this.$watch('position', () => {
-      this.adView && this.adView.setStyle(this.position)
-    }, {
-      deep: true
-    })
-    // 模板渲染有效
-    adView.setDislikeListener && adView.setDislikeListener((data) => {
-      this.adView && this.adView.close()
-      this.$refs.container.style.height = '0px'
-
-      this._updateView()
+    this._onParentReady(() => {
+      this._adId = 'AdView-' + this._newGUID()
+      const adStyle = Object.assign({
+        id: this._adId
+      }, this.position)
+      const adView = this.adView = plus.ad.createAdView(adStyle)
+      adView.interceptTouchEvent(false)
+      plus.webview.currentWebview().append(adView)
+      if (this.hidden) {
+        adView.hide()
+      }
+      this.$watch('attrs', () => {
+        this._request()
+      }, {
+        deep: true
+      })
+      this.$watch('position', () => {
+        this.adView && this.adView.setStyle(this.position)
+      }, {
+        deep: true
+      })
+      // 模板渲染有效
+      adView.setDislikeListener && adView.setDislikeListener((data) => {
+        this.adView && this.adView.close()
+        this.$refs.container.style.height = '0px'
 
-      this.$trigger('close', {}, data)
-    })
-    adView.setRenderingListener && adView.setRenderingListener((data) => {
-      if (data.result === 0) {
-        this.$refs.container.style.height = data.height + 'px'
         this._updateView()
-      } else {
-        this.$trigger('error', {}, {
-          errCode: data.result
-        })
-      }
-    })
-    adView.setAdClickedListener((data) => {
-      this.$trigger('adclicked', {}, data)
-    })
 
-    this._callbackId = this.$page.id + this._adId
-    UniViewJSBridge.subscribe(this._callbackId, this._handleAdData.bind(this))
+        this.$trigger('close', {}, data)
+      })
+      adView.setRenderingListener && adView.setRenderingListener((data) => {
+        if (data.result === 0) {
+          this.$refs.container.style.height = data.height + 'px'
+          this._updateView()
+        } else {
+          this.$trigger('error', {}, {
+            errCode: data.result
+          })
+        }
+      })
+      adView.setAdClickedListener((data) => {
+        this.$trigger('adclicked', {}, data)
+      })
+
+      this._callbackId = this.$page.id + this._adId
+      UniViewJSBridge.subscribe(this._callbackId, this._handleAdData.bind(this))
 
-    this._request()
+      this._request()
+    })
   },
   beforeDestroy () {
     this.adView && this.adView.close()

src/platforms/app-plus/view/components/cover-view/index.vue

@@ -15,12 +15,17 @@ export default {
   render (createElement) {
     let coverContent = ''
     const $slots = this.$slots.default || []
-    $slots.forEach(node => {
-      if (!node.tag) {
-        coverContent += node.text || ''
-      }
-    })
-    this.coverContent = coverContent
+    const _slots = $slots.filter(node => node.tag)
+    if (!_slots.length) {
+      $slots.forEach(node => {
+        if (!node.tag) {
+          coverContent += node.text || ''
+        }
+      })
+      this.coverContent = coverContent
+    } else {
+      coverContent = _slots
+    }
     return createElement('uni-cover-view', {
       on: {
         on: this.$listeners
@@ -28,7 +33,7 @@ export default {
     }, [createElement('div', {
       ref: 'container',
       staticClass: 'uni-cover-view'
-    }, [coverContent])])
+    }, [].concat(coverContent))])
   }
 }
 </script>
@@ -48,5 +53,6 @@ uni-cover-view[hidden] {
 uni-cover-view .uni-cover-view {
   width: 100%;
   height: 100%;
+  visibility: hidden;
 }
 </style>

src/platforms/app-plus/view/components/map/index.vue

@@ -189,34 +189,36 @@ export default {
     }
   },
   mounted () {
-    const mapStyle = Object.assign({}, this.attrs, this.position)
-    if (this.latitude && this.longitude) {
-      mapStyle.center = new plus.maps.Point(this.longitude, this.latitude)
-    }
-    const map = this.map = plus.maps.create(this.$page.id + '-map-' + (this.id || Date.now()), mapStyle)
-    map.__markers__ = []
-    map.__markers_map__ = {}
-    map.__lines__ = []
-    map.__circles__ = []
-    map.setZoom(parseInt(this.scale))
-    plus.webview.currentWebview().append(map)
-    if (this.hidden) {
-      map.hide()
-    }
-    this.$watch('position', () => {
-      this.map && this.map.setStyles(this.position)
-    }, {
-      deep: true
+    this._onParentReady(() => {
+      const mapStyle = Object.assign({}, this.attrs, this.position)
+      if (this.latitude && this.longitude) {
+        mapStyle.center = new plus.maps.Point(this.longitude, this.latitude)
+      }
+      const map = this.map = plus.maps.create(this.$page.id + '-map-' + (this.id || Date.now()), mapStyle)
+      map.__markers__ = []
+      map.__markers_map__ = {}
+      map.__lines__ = []
+      map.__circles__ = []
+      map.setZoom(parseInt(this.scale))
+      plus.webview.currentWebview().append(map)
+      if (this.hidden) {
+        map.hide()
+      }
+      this.$watch('position', () => {
+        this.map && this.map.setStyles(this.position)
+      }, {
+        deep: true
+      })
+      map.onclick = (e) => {
+        this.$trigger('click', {}, e)
+      }
+      map.onstatuschanged = (e) => {
+        this.$trigger('regionchange', {}, {})
+      }
+      this._addMarkers(this.markers)
+      this._addMapLines(this.polyline)
+      this._addMapCircles(this.circles)
     })
-    map.onclick = (e) => {
-      this.$trigger('click', {}, e)
-    }
-    map.onstatuschanged = (e) => {
-      this.$trigger('regionchange', {}, {})
-    }
-    this._addMarkers(this.markers)
-    this._addMapLines(this.polyline)
-    this._addMapCircles(this.circles)
   },
   beforeDestroy () {
     this.map && this.map.close()

src/platforms/app-plus/view/components/video/index.vue

@@ -197,30 +197,32 @@ export default {
     }
   },
   mounted () {
-    const video = this.video = plus.video.createVideoPlayer('video' + Date.now(), Object.assign({}, this.attrs, this.position))
-    plus.webview.currentWebview().append(video)
-    if (this.hidden) {
-      video.hide()
-    }
-    this.$watch('attrs', () => {
-      this.video && this.video.setStyles(this.attrs)
-    }, { deep: true })
-    this.$watch('position', () => {
-      this.video && this.video.setStyles(this.position)
-    }, { deep: true })
-    this.$watch('hidden', (val) => {
-      const video = this.video
-      if (video) {
-        video[val ? 'hide' : 'show']()
-        // iOS 隐藏状态设置 setStyles 不生效
-        if (!val) {
-          video.setStyles(this.position)
-        }
+    this._onParentReady(() => {
+      const video = this.video = plus.video.createVideoPlayer('video' + Date.now(), Object.assign({}, this.attrs, this.position))
+      plus.webview.currentWebview().append(video)
+      if (this.hidden) {
+        video.hide()
       }
-    })
-    events.forEach(key => {
-      video.addEventListener(key, (e) => {
-        this.$trigger(key, {}, { ...e.detail })
+      this.$watch('attrs', () => {
+        this.video && this.video.setStyles(this.attrs)
+      }, { deep: true })
+      this.$watch('position', () => {
+        this.video && this.video.setStyles(this.position)
+      }, { deep: true })
+      this.$watch('hidden', (val) => {
+        const video = this.video
+        if (video) {
+          video[val ? 'hide' : 'show']()
+          // iOS 隐藏状态设置 setStyles 不生效
+          if (!val) {
+            video.setStyles(this.position)
+          }
+        }
+      })
+      events.forEach(key => {
+        video.addEventListener(key, (e) => {
+          this.$trigger(key, {}, { ...e.detail })
+        })
       })
     })
   },

src/platforms/app-plus/view/components/web-view/index.vue

@@ -93,15 +93,17 @@ export default {
     }
   },
   mounted () {
-    this.htmlId = WEBVIEW_ID_PREFIX + this.$page.id
-    insertHTMLWebView({
-      htmlId: this.htmlId
-    })
-    updateHTMLWebView({
-      src: this.$getRealPath(this.src),
-      webviewStyles: this.webviewStyles
+    this._onParentReady(() => {
+      this.htmlId = WEBVIEW_ID_PREFIX + this.$page.id
+      insertHTMLWebView({
+        htmlId: this.htmlId
+      })
+      updateHTMLWebView({
+        src: this.$getRealPath(this.src),
+        webviewStyles: this.webviewStyles
+      })
+      UniViewJSBridge.publishHandler(WEBVIEW_INSERTED, {}, this.$page.id)
     })
-    UniViewJSBridge.publishHandler(WEBVIEW_INSERTED, {}, this.$page.id)
   },
   beforeDestroy () {
     removeHTMLWebView()

src/platforms/app-plus/view/mixins/cover.js

@@ -8,7 +8,8 @@ export default {
   name: 'Cover',
   data () {
     return {
-      style: {}
+      style: {},
+      parentPosition: {}
     }
   },
   computed: {
@@ -17,12 +18,12 @@ export default {
       for (const key in this.position) {
         let val = this.position[key]
         const valNumber = parseFloat(val)
-        const parentValNumber = parseFloat(this._nativeParent.position[key])
+        const parentValNumber = parseFloat(this.parentPosition[key])
         if (key === 'top' || key === 'left') {
           val = Math.max(valNumber, parentValNumber) + 'px'
         } else if (key === 'width' || key === 'height') {
           const base = key === 'width' ? 'left' : 'top'
-          const parentStart = parseFloat(this._nativeParent.position[base])
+          const parentStart = parseFloat(this.parentPosition[base])
           const viewStart = parseFloat(this.position[base])
           const diff1 = Math.max(parentStart - viewStart, 0)
           const diff2 = Math.max((viewStart + valNumber) - (parentStart + parentValNumber), 0)
@@ -91,16 +92,10 @@ export default {
     this._nativeParent = $parent
   },
   mounted () {
-    this._updateStyle()
-    const $nativeParent = this._nativeParent
-    if ($nativeParent.isNative) {
-      if ($nativeParent._isMounted) {
-        this._onCanInsert()
-      } else {
-        $nativeParent.onCanInsertCallbacks.push(() => {
-          this._onCanInsert()
-        })
-      }
+    this._onParentReady((parentPosition) => {
+      this.parentPosition = this._nativeParent.position || parentPosition
+      this._updateStyle()
+      this._onCanInsert()
       this.$watch('hidden', (val) => {
         this.cover && this.cover[val ? 'hide' : 'show']()
       })
@@ -115,7 +110,7 @@ export default {
         }
       }, { deep: true })
       this.$on('uni-view-update', this._requestStyleUpdate)
-    }
+    })
   },
   beforeDestroy () {
     if (this._nativeParent.isNative) {
@@ -139,7 +134,7 @@ export default {
       for (const key in this.position) {
         let val = this.position[key]
         if (key === 'top' || key === 'left') {
-          val = Math.min((parseFloat(val) - parseFloat(this._nativeParent.position[key])), 0) + 'px'
+          val = Math.min((parseFloat(val) - parseFloat(this.parentPosition[key])), 0) + 'px'
         }
         position[key] = val
       }

src/platforms/app-plus/view/mixins/native.js

@@ -26,15 +26,23 @@ export default {
       hidden: false
     }
   },
+  provide () {
+    return {
+      parentOnDraw: this._onDraw
+    }
+  },
+  inject: {
+    parentOnDraw: { default: null }
+  },
   created () {
     this.isNative = true
     this.onCanInsertCallbacks = []
+    this.onDrawCallbacks = []
   },
   mounted () {
     this._updatePosition()
-    this.$nextTick(() => {
-      this.onCanInsertCallbacks.forEach(callback => callback())
-    })
+    this.onCanInsertCallbacks.forEach(callback => callback())
+    this.onCanInsertCallbacks = null
     this.$on('uni-view-update', this._requestPositionUpdate)
   },
   methods: {
@@ -60,6 +68,40 @@ export default {
         delete this._positionUpdateRequest
         this._updatePosition()
       })
+    },
+    _onParentReady (parentReadyCallback) {
+      const callback = (parentPosition) => {
+        parentReadyCallback(parentPosition)
+        this.onDrawCallbacks.forEach(callback => callback(this.position))
+        this.onDrawCallbacks = null
+      }
+      this._onSelfReady(() => {
+        if (this.parentOnDraw) {
+          this.parentOnDraw(callback)
+        } else {
+          callback({
+            top: '0px',
+            left: '0px',
+            width: Number.MAX_SAFE_INTEGER + 'px',
+            height: Number.MAX_SAFE_INTEGER + 'px',
+            position: 'static'
+          })
+        }
+      })
+    },
+    _onSelfReady (callback) {
+      if (this.onCanInsertCallbacks) {
+        this.onCanInsertCallbacks.push(callback)
+      } else {
+        callback()
+      }
+    },
+    _onDraw (callback) {
+      if (this.onDrawCallbacks) {
+        this.onDrawCallbacks.push(callback)
+      } else {
+        callback(this.position)
+      }
     }
   }
 }