feat: app-v3 实现 cover-image cover-view

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

+<template>
+  <uni-cover-image
+    :src="src"
+    v-on="$listeners">
+    <div
+      ref="container"
+      class="uni-cover-image" />
+  </uni-cover-image>
+</template>
+<script>
+import native from '../../mixins/native'
+import cover from '../../mixins/cover'
+
+export default {
+  name: 'CoverImage',
+  mixins: [native, cover],
+  props: {
+    src: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      coverType: 'image'
+    }
+  },
+  computed: {
+    coverContent () {
+      return this.$getRealPath(this.src)
+    }
+  }
+}
+</script>
+
+<style>
+uni-cover-image {
+  display: block;
+  line-height: 1.2;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  pointer-events: auto;
+}
+
+uni-cover-image[hidden] {
+  display: none;
+}
+
+uni-cover-image .uni-cover-image {
+  width: 100%;
+  height: 100%;
+}
+</style>

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

+<template>
+  <uni-cover-view
+    v-on="$listeners">
+    <div
+      ref="container"
+      class="uni-cover-view"/>
+  </uni-cover-view>
+</template>
+<script>
+import native from '../../mixins/native'
+import cover from '../../mixins/cover'
+
+export default {
+  name: 'CoverView',
+  mixins: [native, cover],
+  props: {},
+  data () {
+    return {
+      coverType: 'text',
+      coverContent: ''
+    }
+  },
+  watch: {},
+  mounted () {
+    this._updateContent()
+    this.$watch('$slot', this._updateContent)
+  },
+  methods: {
+    _updateContent (val) {
+      const $slots = this.$slots.default || []
+      $slots.forEach(node => {
+        if (!node.tag) {
+          this.coverContent += node.text || ''
+        }
+      })
+    }
+  }
+}
+</script>
+<style>
+uni-cover-view {
+  display: block;
+  line-height: 1.2;
+  overflow: hidden;
+  white-space: nowrap;
+  pointer-events: auto;
+}
+
+uni-cover-view[hidden] {
+  display: none;
+}
+
+uni-cover-view .uni-cover-view {
+  width: 100%;
+  height: 100%;
+}
+</style>

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

@@ -156,13 +156,8 @@ export default {
       return obj
     }
   },
-  watch: {
-    hidden (val) {
-      this.video && this.video[val ? 'hide' : 'show']()
-    }
-  },
   mounted () {
-    const video = this.video = plus.video.createVideoPlayer('video' + Date.now(), Object.assign({}, this.attrs, this.style))
+    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()
@@ -170,9 +165,12 @@ export default {
     this.$watch('attrs', () => {
       this.video && this.video.setStyles(this.attrs)
     }, { deep: true })
-    this.$watch('style', () => {
-      this.video && this.video.setStyles(this.style)
+    this.$watch('position', () => {
+      this.video && this.video.setStyles(this.position)
     }, { deep: true })
+    this.$watch('hidden', (val) => {
+      this.video && this.video[val ? 'hide' : 'show']()
+    })
     events.forEach(key => {
       video.addEventListener(key, (data = {}) => {
         this.$trigger(key, {}, data)

src/platforms/app-plus/view/framework/plugins/data.js

@@ -69,7 +69,7 @@ function broadcast (vm, componentName, eventName, ...params) {
   })
 }
 
-const NATIVE_COMPONENTS = ['Camera', 'LivePlayer', 'LivePusher', 'Map', 'Video']
+const NATIVE_COMPONENTS = ['Camera', 'LivePlayer', 'LivePusher', 'Map', 'Video', 'CoverView', 'CoverImage']
 
 function updateView () {
   const pages = getCurrentPages()

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

+const base = ['padding', 'borderRadius', 'borderColor', 'borderWidth', 'backgroundColor']
+const text = ['color', 'textAlign', 'lineHeight', 'fontSize', 'fontWeight', 'textOverflow']
+const image = []
+let index = 0
+
+export default {
+  name: 'Cover',
+  data () {
+    return {
+      style: {}
+    }
+  },
+  computed: {
+    viewPosition () {
+      const position = {}
+      for (const key in this.position) {
+        let val = this.position[key]
+        let valNumber = parseFloat(val)
+        let parentValNumber = parseFloat(this.$parent.position[key])
+        if (key === 'top' || key === 'left') {
+          val = Math.max(valNumber, parentValNumber) + 'px'
+        } else if (key === 'width' || key === 'height') {
+          const base = key === 'width' ? 'left' : 'left'
+          const parentStart = parseFloat(this.$parent.position[base])
+          const viewStart = parseFloat(this.position[base])
+          const diff1 = Math.max(parentStart - viewStart, 0)
+          const diff2 = Math.max((viewStart + valNumber) - (parentStart + parentValNumber), 0)
+          val = Math.max(valNumber - diff1 - diff2, 0) + 'px'
+        }
+        position[key] = val
+      }
+      return position
+    },
+    tags () {
+      const position = this._getTagPosition()
+      const style = this.style
+      return [
+        {
+          tag: 'rect',
+          position,
+          rectStyles: {
+            color: style.backgroundColor,
+            radius: style.borderRadius,
+            borderColor: style.borderColor,
+            borderWidth: style.borderWidth
+          }
+        },
+        this.coverType === 'image' ? {
+          tag: 'img',
+          position,
+          src: this.coverContent
+        } : {
+          tag: 'font',
+          position,
+          textStyles: {
+            align: style.textAlign,
+            color: style.color,
+            decoration: 'none',
+            lineSpacing: (parseFloat(style.lineHeight) - parseFloat(style.fontSize)) + 'px',
+            margin: style.padding,
+            overflow: style.textOverflow,
+            size: style.fontSize,
+            weight: style.fontWeight,
+            whiteSpace: style.whiteSpace
+          },
+          text: this.coverContent
+        }
+      ]
+    }
+  },
+  mounted () {
+    this._updateStyle()
+    const $parent = this.$parent
+    if ($parent.isNative) {
+      if ($parent._isMounted) {
+        this._onCanInsert()
+      } else {
+        $parent.onCanInsertCallbacks.push(() => {
+          this._onCanInsert()
+        })
+      }
+      this.$watch('hidden', (val) => {
+        this.cover && this.cover[val ? 'hide' : 'show']()
+      })
+      this.$watch('viewPosition', (val) => {
+        this.cover && this.cover.setStyle(val)
+      }, { deep: true })
+      this.$watch('tags', () => {
+        const cover = this.cover
+        if (cover) {
+          cover.reset()
+          cover.draw(this.tags)
+        }
+      }, { deep: true })
+      this.$on('uni-view-update', this._requestStyleUpdate)
+    }
+  },
+  beforeDestroy () {
+    if (this.$parent.isNative) {
+      this.cover && this.cover.close()
+      delete this.cover
+    }
+  },
+  methods: {
+    _onCanInsert () {
+      const cover = this.cover = new plus.nativeObj.View(`cover-${Date.now()}-${index++}`, this.viewPosition, this.tags)
+      plus.webview.currentWebview().append(cover)
+      if (this.hidden) {
+        cover.hide()
+      }
+      cover.addEventListener('click', () => {
+        this.$trigger('click', {}, {})
+      })
+    },
+    _getTagPosition () {
+      const position = {}
+      for (const key in this.position) {
+        let val = this.position[key]
+        if (key === 'top' || key === 'left') {
+          val = Math.min((parseFloat(val) - parseFloat(this.$parent.position[key])), 0) + 'px'
+        }
+        position[key] = val
+      }
+      return position
+    },
+    _updateStyle () {
+      const style = getComputedStyle(this.$el)
+      base.concat(text, image).forEach(key => {
+        this.style[key] = style[key]
+      })
+    },
+    _requestStyleUpdate () {
+      if (this._styleUpdateRequest) {
+        cancelAnimationFrame(this._styleUpdateRequest)
+      }
+      this._styleUpdateRequest = requestAnimationFrame(() => {
+        delete this._styleUpdateRequest
+        this._updateStyle()
+      })
+    }
+  }
+}

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

-import {
-  listeners
-} from 'uni-mixins'
-
 export default {
   name: 'Native',
-  mixins: [listeners],
   data () {
     return {
-      style: {
+      position: {
         top: '0px',
         left: '0px',
         width: '0px',
         height: '0px',
         position: 'static'
       },
-      hidden: false,
-      tags: []
+      hidden: false
     }
   },
+  created () {
+    this.isNative = true
+    this.onCanInsertCallbacks = []
+  },
   mounted () {
-    this._updateStyle()
+    this._updatePosition()
     this.$nextTick(() => {
-      if (this.tags.length) {
-        const view = this.view = plus.nativeObj.View('view' + Date.now(), this.style, this.tags)
-        plus.webview.currentWebview().append(view)
-        if (this.hidden) {
-          view.hide()
-        }
-      }
+      this.onCanInsertCallbacks.forEach(callback => callback())
     })
-  },
-  beforeDestroy () {
-    this.view && this.view.close()
-    delete this.view
-  },
-  listeners: {
-    '@view-update': '_requestUpdate'
+    this.$on('uni-view-update', this._requestPositionUpdate)
   },
   methods: {
-    insertTextView () {
-
-    },
-    updateTextView () {
-
-    },
-    removeTextView () {
-
-    },
-    insertImageView () {
-
-    },
-    updateImageView () {
-
-    },
-    removeImageView () {
-
-    },
-    _updateStyle () {
-      const rect = this.$refs.container.getBoundingClientRect()
-      this.hidden = false;
-      ['top', 'left', 'width', 'height'].forEach(key => {
-        let val = rect[key]
-        val = key === 'top' ? val + (document.documentElement.scrollTop || document.body.scrollTop || 0) : val
-        if (!val && (key === 'width' || key === 'height')) {
-          this.hidden = true
-        }
-        this.style[key] = val + 'px'
-      })
-    },
-    _requestUpdate () {
-      if (this._animationFrame) {
-        cancelAnimationFrame(this._animationFrame)
-      }
-      if (this._isMounted) {
-        this._animationFrame = requestAnimationFrame(() => {
-          delete this._animationFrame
-          this._updateStyle()
+    _updatePosition () {
+      const rect = (this.$refs.container || this.$el).getBoundingClientRect()
+      this.hidden = rect.width === 0 || rect.height === 0
+      if (!this.hidden) {
+        ['top', 'left', 'width', 'height'].forEach(key => {
+          let val = rect[key]
+          val = key === 'top' ? val + (document.documentElement.scrollTop || document.body.scrollTop || 0) : val
+          this.position[key] = val + 'px'
         })
       }
+    },
+    _requestPositionUpdate () {
+      if (this._positionUpdateRequest) {
+        cancelAnimationFrame(this._positionUpdateRequest)
+      }
+      this._positionUpdateRequest = requestAnimationFrame(() => {
+        delete this._positionUpdateRequest
+        this._updatePosition()
+      })
     }
   }
 }