From 6f5d6faf394705dc601d039bcdc874c82fcbdfe1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=AD=E8=83=9C=E5=BC=BA?= <guoshengqiang@live.com>
Date: Fri, 28 Dec 2018 12:02:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=9Acover-view=E3=80=81cover-image?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../h5/view/components/cover-image/index.vue  | 68 ++++++++++++++++++
 .../h5/view/components/cover-view/index.vue   | 72 ++++++++++++++++++-
 2 files changed, 138 insertions(+), 2 deletions(-)
 create mode 100644 src/platforms/h5/view/components/cover-image/index.vue

diff --git a/src/platforms/h5/view/components/cover-image/index.vue b/src/platforms/h5/view/components/cover-image/index.vue
new file mode 100644
index 000000000..98c7db289
--- /dev/null
+++ b/src/platforms/h5/view/components/cover-image/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <uni-cover-image
+    :src="src"
+    v-on="$listeners">
+    <div
+      class="uni-cover-image">
+      <img
+        v-if="src"
+        :src="$getRealPath(src)"
+        @load="_load"
+        @error="_error">
+    </div>
+  </uni-cover-image>
+</template>
+<script>
+export default {
+  name: 'CoverImage',
+  props: {
+    src: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    _load ($event) {
+      this.$trigger('load', $event)
+    },
+    _error ($event) {
+      this.$trigger('error', $event)
+    }
+  }
+}
+</script>
+
+<style>
+uni-cover-image {
+  display: block;
+  line-height: 1.2;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+}
+
+uni-cover-image img {
+  width: 100%;
+  height: 100%;
+}
+
+uni-cover-image[hidden] {
+  display: none;
+}
+
+uni-cover-image .uni-cover-image {
+  width: 100%;
+  height: 100%;
+  text-overflow: inherit;
+  overflow: inherit;
+  white-space: nowrap;
+  -webkit-align-items: inherit;
+  align-items: inherit;
+  -webkit-justify-content: inherit;
+  justify-content: inherit;
+  -webkit-flex-direction: inherit;
+  flex-direction: inherit;
+  font-size: 0;
+  display: inherit;
+}
+</style>
diff --git a/src/platforms/h5/view/components/cover-view/index.vue b/src/platforms/h5/view/components/cover-view/index.vue
index d4852cf43..990b1f9d9 100644
--- a/src/platforms/h5/view/components/cover-view/index.vue
+++ b/src/platforms/h5/view/components/cover-view/index.vue
@@ -1,8 +1,76 @@
 <template>
-  <uni-cover-view/>
+  <uni-cover-view
+    :scroll-top="scrollTop"
+    v-on="$listeners">
+    <div
+      ref="content"
+      class="uni-cover-view">
+      <slot/>
+    </div>
+  </uni-cover-view>
 </template>
 <script>
 export default {
-  name: 'CoverView'
+  name: 'CoverView',
+  props: {
+    scrollTop: {
+      type: [String, Number],
+      default: 0
+    }
+  },
+  watch: {
+    scrollTop (val) {
+      this.setScrollTop(val)
+    }
+  },
+  mounted () {
+    this.setScrollTop(this.scrollTop)
+  },
+  methods: {
+    setScrollTop (val) {
+      var content = this.$refs.content
+      if (getComputedStyle(content).overflowY === 'scroll') {
+        content.scrollTop = this._upx2pxNum(val)
+      }
+    },
+    _upx2pxNum (val) {
+      if (/\d+[ur]px$/i.test(val)) {
+        val.replace(/\d+[ur]px$/i, text => {
+          return uni.upx2px(parseFloat(text))
+        })
+      }
+      return parseFloat(val) || 0
+    }
+  }
 }
 </script>
+<style>
+uni-cover-view {
+  display: block;
+  line-height: 1.2;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+uni-cover-view[hidden] {
+  display: none;
+}
+
+uni-cover-view .uni-cover-view {
+  width: 100%;
+  height: 100%;
+  text-overflow: inherit;
+  overflow: hidden;
+  white-space: inherit;
+  -webkit-align-items: inherit;
+  align-items: inherit;
+  -webkit-justify-content: inherit;
+  justify-content: inherit;
+  -webkit-flex-direction: inherit;
+  flex-direction: inherit;
+  -webkit-flex-wrap: inherit;
+  flex-wrap: inherit;
+  display: inherit;
+  overflow: inherit;
+}
+</style>
-- 
GitLab