fix(ImagePreview): support single page preview

heyui · Aug 9, 2019 · 7f04d04 · 7f04d04
1 parent d782070
commit 7f04d04
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 51 deletions.
diff --git a/doc/components/demos/imagepreview/imagepreview1.vue b/doc/components/demos/imagepreview/imagepreview1.vue
@@ -1,26 +1,25 @@
 <template>
   <div>
-    <Button @click="openPreview(0)">打开图片预览</Button>
-    <p>
-      <ImagePreview :datas="datas" @click="openPreview"/>
-    </p>
+    <Button @click="openPreview1">预览单张图片</Button>
+    <Button @click="openPreview2">预览多张图片</Button>
   </div>
 </template>
 <script>
 export default {
   data() {
-    const link = 'https://lokeshdhakar.com/projects/lightbox2/images/';
-    return {
-      datas: [
-        { thumbUrl: `${link}thumb-4.jpg`, url: `${link}image-4.jpg` },
-        { thumbUrl: `https://5b0988e595225.cdn.sohucs.com/images/20170905/f6a2c1dafab944d2a75b9798c8ea0f7d.png`, url: `https://5b0988e595225.cdn.sohucs.com/images/20170905/f6a2c1dafab944d2a75b9798c8ea0f7d.png` },
-        { thumbUrl: `${link}thumb-6.jpg`, url: `${link}image-6.jpg` }
-      ]
-    };
+    return {};
   },
   methods: {
-    openPreview(index = 0, data) {
-      this.$ImagePreview(this.datas, index);
+    openPreview1() {
+      // 兼容 1.24.2+
+      this.$ImagePreview(`https://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg`);
+    },
+    openPreview2() {
+      this.$ImagePreview([
+        `https://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg`,
+        `https://5b0988e595225.cdn.sohucs.com/images/20170905/f6a2c1dafab944d2a75b9798c8ea0f7d.png`,
+        `https://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg`
+      ], 0);
     }
   }
 };

diff --git a/doc/components/demos/imagepreview/imagepreview2.vue b/doc/components/demos/imagepreview/imagepreview2.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
-    <p><ImagePreview :datas="datas" @click="openPreview"/></p>
+    <p>单张预览支持 1.24.2+</p>
+    <p><ImagePreview datas="https://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" @click="openPreview1"/></p>
     <p><ImagePreview :width="70" :borderRadius="4" :datas="datas" @click="openPreview"/></p>
     <p><ImagePreview :width="80" :borderRadius="5" :distance="15" :datas="datas" @click="openPreview"/></p>
   </div>
@@ -11,15 +12,18 @@ export default {
     const link = 'https://lokeshdhakar.com/projects/lightbox2/images/';
     return {
       datas: [
-        { thumbUrl: `${link}thumb-4.jpg`, url: `${link}image-4.jpg` },
-        { thumbUrl: `${link}thumb-5.jpg`, url: `${link}image-5.jpg` },
-        { thumbUrl: `${link}thumb-6.jpg`, url: `${link}image-6.jpg` }
+        `${link}image-4.jpg`,
+        `${link}image-5.jpg`,
+        `${link}image-6.jpg`
       ]
     };
   },
   methods: {
     openPreview(index = 0, data) {
       this.$ImagePreview(this.datas, index);
+    },
+    openPreview1(data) {
+      this.$ImagePreview(data);
     }
   }
 };

diff --git a/doc/components_en/demos/imagepreview/imagepreview1.vue b/doc/components_en/demos/imagepreview/imagepreview1.vue
@@ -1,26 +1,25 @@
 <template>
   <div>
-    <Button @click="openPreview(0)">Open image preview</Button>
-    <p>
-      <ImagePreview :datas="datas" @click="openPreview"/>
-    </p>
+    <Button @click="openPreview1">Preview a single picture</Button>
+    <Button @click="openPreview2">Preview multiple pictures</Button>
   </div>
 </template>
 <script>
 export default {
   data() {
-    const link = 'https://lokeshdhakar.com/projects/lightbox2/images/';
-    return {
-      datas: [
-        { thumbUrl: `${link}thumb-4.jpg`, url: `${link}image-4.jpg` },
-        { thumbUrl: `${link}thumb-5.jpg`, url: `${link}image-5.jpg` },
-        { thumbUrl: `${link}thumb-6.jpg`, url: `${link}image-6.jpg` }
-      ]
-    };
+    return {};
   },
   methods: {
-    openPreview(index = 0, data) {
-      this.$ImagePreview(this.datas, index);
+    openPreview1() {
+      // compatible 1.24.2+
+      this.$ImagePreview(`https://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg`);
+    },
+    openPreview2() {
+      this.$ImagePreview([
+        `https://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg`,
+        `https://5b0988e595225.cdn.sohucs.com/images/20170905/f6a2c1dafab944d2a75b9798c8ea0f7d.png`,
+        `https://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg`
+      ], 0);
     }
   }
 };

diff --git a/doc/components_en/demos/imagepreview/imagepreview2.vue b/doc/components_en/demos/imagepreview/imagepreview2.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
-    <p><ImagePreview :datas="datas" @click="openPreview"/></p>
+    <p>Single preview support 1.24.2+</p>
+    <p><ImagePreview datas="https://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" @click="openPreview1"/></p>
     <p><ImagePreview :width="70" :borderRadius="4" :datas="datas" @click="openPreview"/></p>
     <p><ImagePreview :width="80" :borderRadius="5" :distance="15" :datas="datas" @click="openPreview"/></p>
   </div>
@@ -11,15 +12,18 @@ export default {
     const link = 'https://lokeshdhakar.com/projects/lightbox2/images/';
     return {
       datas: [
-        { thumbUrl: `${link}thumb-4.jpg`, url: `${link}image-4.jpg` },
-        { thumbUrl: `${link}thumb-5.jpg`, url: `${link}image-5.jpg` },
-        { thumbUrl: `${link}thumb-6.jpg`, url: `${link}image-6.jpg` }
+        `${link}image-4.jpg`,
+        `${link}image-5.jpg`,
+        `${link}image-6.jpg`
       ]
     };
   },
   methods: {
     openPreview(index = 0, data) {
       this.$ImagePreview(this.datas, index);
+    },
+    openPreview1(data) {
+      this.$ImagePreview(data);
     }
   }
 };

diff --git a/src/components/image-preview/imagepreview.vue b/src/components/image-preview/imagepreview.vue
@@ -1,10 +1,18 @@
 <template>
   <div class="h-image-preview-list" :style="listStyles">
-    <div :style="itemStyles(data)" v-for="(data, index) of datas" :key="index" @click="click(index, data)" class="h-image-preview-item"></div>
+    <div :style="itemStyles(data)" v-for="(data, index) of computedList" :key="index" @click="click(index, data)" class="h-image-preview-item"></div>
   </div>
 </template>
 <script>
-
+import utils from 'heyui/src/utils/utils';
+const genObject = function (data) {
+  if (utils.isString(data)) {
+    return { url: data };
+  } else if (utils.isObject(data)) {
+    return { url: data.thumbUrl || data.url };
+  }
+  return { url: null };
+};
 export default {
   name: 'hImagePreview',
   props: {
@@ -17,21 +25,21 @@ export default {
       default: 10
     },
     datas: {
-      type: [Array],
+      type: [Array, String],
       default: () => ([])
     },
     borderRadius: {
       type: Number,
       default: 3
     }
   },
-  data() {
-    return {
-    };
-  },
   methods: {
     click(index, value) {
-      this.$emit('click', index, value);
+      if (this.isSingle) {
+        this.$emit('click', this.datas);
+      } else {
+        this.$emit('click', index, value);
+      }
     },
     itemStyles(data) {
       return {
@@ -40,7 +48,7 @@ export default {
         'margin-right': `${this.distance}px`,
         'margin-bottom': `${this.distance}px`,
         'border-radius': `${this.borderRadius}px`,
-        'background-image': `url(${data.thumbUrl || data.url})`
+        'background-image': `url(${data.url})`
       };
     }
   },
@@ -50,6 +58,19 @@ export default {
         'margin-right': `-${this.distance}px`,
         'margin-bottom': `-${this.distance}px`
       };
+    },
+    isSingle() {
+      return utils.isString(this.datas);
+    },
+    computedList() {
+      if (this.isSingle) {
+        return [genObject(this.datas)];
+      } else if (utils.isArray(this.datas)) {
+        return this.datas.map(item => {
+          return genObject(item);
+        });
+      }
+      return [];
     }
   }
 };

diff --git a/src/plugins/image-preview/image-preview-modal.vue b/src/plugins/image-preview/image-preview-modal.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="h-image-preview" :style="previewStyle">
-    <span class="h-image-preview-index"> {{showIndex + 1}} / {{datas.length}} </span>
+    <span class="h-image-preview-index" v-if="isShowIndex"> {{showIndex + 1}} / {{computedDatas.length}} </span>
     <span v-if="showIndex != 0" class="h-image-preview-icon h-image-preview-left-icon" @click="change(showIndex - 1)"><i class="h-icon-left"></i></span>
     <transition name="fade">
       <img :src="previewFile.url" v-show="!changeing" ref="img" @load="initStyle" class="h-image-preview-image" :alt="previewFile.name"/>
     </transition>
     <slot :data="previewFile" name="item" :index="index"></slot>
-    <span v-if="showIndex != datas.length - 1" class="h-image-preview-icon h-image-preview-right-icon" @click="change(showIndex + 1)"><i class="h-icon-right"></i></span>
+    <span v-if="showIndex != computedDatas.length - 1" class="h-image-preview-icon h-image-preview-right-icon" @click="change(showIndex + 1)"><i class="h-icon-right"></i></span>
     <Loading :loading="changeing"></Loading>
   </div>
 </template>
@@ -23,7 +23,7 @@ export default {
       default: false
     },
     datas: {
-      type: [Array],
+      type: [Array, String],
       default: () => ([])
     },
     index: {
@@ -70,7 +70,7 @@ export default {
       }, 300);
     },
     change(index) {
-      if (index < 0 || index > this.datas.length - 1) {
+      if (index < 0 || index > this.computedDatas.length - 1) {
         return false;
       }
       this.changeing = true;
@@ -80,10 +80,10 @@ export default {
       }, 300);
     },
     updatePreview() {
-      if (this.datas.length == 0 || this.isShow === false) {
+      if (this.computedDatas.length == 0 || this.isShow === false) {
         return {};
       }
-      let data = this.datas[this.showIndex];
+      let data = this.computedDatas[this.showIndex];
       let previewFile = utils.isString(data) ? { url: data } : data;
       if (previewFile.url == this.previewFile.url) {
         this.$nextTick(() => {
@@ -103,6 +103,17 @@ export default {
         height: `${this.height}px`,
         width: `${this.width}px`
       };
+    },
+    computedDatas() {
+      if (utils.isString(this.datas)) {
+        return [this.datas];
+      } else if (utils.isArray(this.datas)) {
+        return this.datas;
+      }
+      return [];
+    },
+    isShowIndex() {
+      return !utils.isString(this.datas);
     }
   },
   components: {