From 35f5872c5c9a175c851f51db068b4b36df2e43e1 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Fri, 17 Jul 2020 19:48:38 +0800
Subject: [PATCH] feat: 新增Upload组件

---
 examples/router/routes.js               |   6 ++++++
 examples/views/docs/component/upload.md |  43 +++++++++++++++++++++++++++++++++++++++++++
 packages/select/index.vue               |   4 ++--
 packages/upload/image-viewer.vue        | 332 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/upload/index.vue               |  58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 441 insertions(+), 2 deletions(-)
 create mode 100644 examples/views/docs/component/upload.md
 create mode 100644 packages/upload/image-viewer.vue
 create mode 100644 packages/upload/index.vue

diff --git a/examples/router/routes.js b/examples/router/routes.js
index 3fdcbdc..4e4e892 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -30,6 +30,12 @@ const _components = [
         meta: { title: 'Select 选择器' },
         component: () => import('@/views/docs/component/select.md'),
       },
+      {
+        path: 'upload',
+        name: 'upload',
+        meta: { title: 'Upload 上传' },
+        component: () => import('@/views/docs/component/upload.md'),
+      },
     ],
   },
   {
diff --git a/examples/views/docs/component/upload.md b/examples/views/docs/component/upload.md
new file mode 100644
index 0000000..c02858f
--- /dev/null
+++ b/examples/views/docs/component/upload.md
@@ -0,0 +1,43 @@
+# Upload 上传
+
+文件上传，支持图片与文件
+
+## 基础用法
+
+默认为图片上传
+
+::: snippet 图片上传
+
+```html
+<template>
+  <div>
+    <z-upload v-model="model"></z-upload>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: '',
+    }
+  } 
+}
+</script>
+```
+
+:::
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+value | 值 | String | - | -
+
+## Events 事件
+
+事件名称|说明|回调参数
+-|-|-
+change | 改变选中 | 值，选中项数据
\ No newline at end of file
diff --git a/packages/select/index.vue b/packages/select/index.vue
index ffaf74c..132bacb 100644
--- a/packages/select/index.vue
+++ b/packages/select/index.vue
@@ -1,6 +1,6 @@
 <template>
   <el-select
-    class="zee__select"
+    class="zee-select"
     :disabled="disabled"
     :value-key="valueKey"
     :filterable="filterable"
@@ -234,7 +234,7 @@ export default {
 </script>
 
 <style lang="scss">
-.zee__select {
+.zee-select {
   .el-input__prefix {
     height: 100%;
     display: flex;
diff --git a/packages/upload/image-viewer.vue b/packages/upload/image-viewer.vue
new file mode 100644
index 0000000..4048a9a
--- /dev/null
+++ b/packages/upload/image-viewer.vue
@@ -0,0 +1,332 @@
+<template>
+  <transition name="viewer-fade">
+    <div tabindex="-1" ref="el-image-viewer__wrapper" class="el-image-viewer__wrapper" :style="{ 'z-index': zIndex }">
+      <div class="el-image-viewer__mask"></div>
+      <!-- CLOSE -->
+      <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
+        <i class="el-icon-circle-close"></i>
+      </span>
+      <!-- ARROW -->
+      <template v-if="!isSingle">
+        <span class="el-image-viewer__btn el-image-viewer__prev" :class="{ 'is-disabled': !infinite && isFirst }" @click="prev">
+          <i class="el-icon-arrow-left" />
+        </span>
+        <span class="el-image-viewer__btn el-image-viewer__next" :class="{ 'is-disabled': !infinite && isLast }" @click="next">
+          <i class="el-icon-arrow-right" />
+        </span>
+      </template>
+      <!-- ACTIONS -->
+      <div class="el-image-viewer__btn el-image-viewer__actions">
+        <div class="el-image-viewer__actions__inner">
+          <i class="el-icon-zoom-out el-image-viewer__actions-btn" @click="handleActions('zoomOut')"></i>
+          <i class="el-icon-zoom-in el-image-viewer__actions-btn" @click="handleActions('zoomIn')"></i>
+          <i class="el-image-viewer__actions__divider"></i>
+          <i class="el-image-viewer__actions-btn" :class="mode.icon" @click="toggleMode"></i>
+          <i class="el-image-viewer__actions__divider"></i>
+          <i class="el-icon-refresh-left el-image-viewer__actions-btn" @click="handleActions('anticlocelise')"></i>
+          <i class="el-icon-refresh-right el-image-viewer__actions-btn" @click="handleActions('clocelise')"></i>
+          <!-- 自定义修改 -->
+          <span class="el-radio__label">{{ index + 1 }} / {{ urlList.length }}</span>
+        </div>
+      </div>
+      <!-- CANVAS -->
+      <div class="el-image-viewer__canvas">
+        <template v-for="(url, i) in urlList">
+          <img
+            v-if="i === index"
+            ref="img"
+            class="el-image-viewer__img"
+            :key="url"
+            :src="currentImg"
+            :style="imgStyle"
+            @load="handleImgLoad"
+            @error="handleImgError"
+            @mousedown="handleMouseDown"
+          />
+        </template>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { on, off } from 'element-ui/src/utils/dom';
+import { rafThrottle, isFirefox } from 'element-ui/src/utils/util';
+
+const Mode = {
+  CONTAIN: {
+    name: 'contain',
+    icon: 'el-icon-full-screen',
+  },
+  ORIGINAL: {
+    name: 'original',
+    icon: 'el-icon-c-scale-to-original',
+  },
+};
+
+const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';
+
+export default {
+  name: 'elImageViewer',
+
+  props: {
+    urlList: {
+      type: Array,
+      default: () => [],
+    },
+    zIndex: {
+      type: Number,
+      default: 2000,
+    },
+    onSwitch: {
+      type: Function,
+      default: () => {},
+    },
+    onClose: {
+      type: Function,
+      default: () => {},
+    },
+    initialIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+
+  data() {
+    return {
+      index: this.initialIndex,
+      isShow: false,
+      infinite: true,
+      loading: false,
+      mode: Mode.CONTAIN,
+      transform: {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false,
+      },
+    };
+  },
+  computed: {
+    isSingle() {
+      return this.urlList.length <= 1;
+    },
+    isFirst() {
+      return this.index === 0;
+    },
+    isLast() {
+      return this.index === this.urlList.length - 1;
+    },
+    currentImg() {
+      return this.urlList[this.index];
+    },
+    imgStyle() {
+      const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;
+      const style = {
+        transform: `scale(${scale}) rotate(${deg}deg)`,
+        transition: enableTransition ? 'transform .3s' : '',
+        'margin-left': `${offsetX}px`,
+        'margin-top': `${offsetY}px`,
+      };
+      if (this.mode === Mode.CONTAIN) {
+        style.maxWidth = style.maxHeight = '100%';
+      }
+      return style;
+    },
+  },
+  watch: {
+    index: {
+      handler: function(val) {
+        this.reset();
+        this.onSwitch(val);
+      },
+    },
+    currentImg(val) {
+      this.$nextTick(_ => {
+        const $img = this.$refs.img[0];
+        if (!$img.complete) {
+          this.loading = true;
+        }
+      });
+    },
+  },
+  methods: {
+    hide() {
+      this.deviceSupportUninstall();
+      this.onClose();
+    },
+    deviceSupportInstall() {
+      this._keyDownHandler = rafThrottle(e => {
+        const keyCode = e.keyCode;
+        switch (keyCode) {
+          // ESC
+          case 27:
+            this.hide();
+            break;
+          // SPACE
+          case 32:
+            this.toggleMode();
+            break;
+          // LEFT_ARROW
+          case 37:
+            this.prev();
+            break;
+          // UP_ARROW
+          case 38:
+            this.handleActions('zoomIn');
+            break;
+          // RIGHT_ARROW
+          case 39:
+            this.next();
+            break;
+          // DOWN_ARROW
+          case 40:
+            this.handleActions('zoomOut');
+            break;
+        }
+      });
+      this._mouseWheelHandler = rafThrottle(e => {
+        const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
+        if (delta > 0) {
+          this.handleActions('zoomIn', {
+            zoomRate: 0.015,
+            enableTransition: false,
+          });
+        } else {
+          this.handleActions('zoomOut', {
+            zoomRate: 0.015,
+            enableTransition: false,
+          });
+        }
+      });
+      on(document, 'keydown', this._keyDownHandler);
+      on(document, mousewheelEventName, this._mouseWheelHandler);
+    },
+    deviceSupportUninstall() {
+      off(document, 'keydown', this._keyDownHandler);
+      off(document, mousewheelEventName, this._mouseWheelHandler);
+      this._keyDownHandler = null;
+      this._mouseWheelHandler = null;
+    },
+    handleImgLoad(e) {
+      this.loading = false;
+    },
+    handleImgError(e) {
+      this.loading = false;
+      e.target.alt = '加载失败';
+    },
+    handleMouseDown(e) {
+      if (this.loading || e.button !== 0) return;
+
+      const { offsetX, offsetY } = this.transform;
+      const startX = e.pageX;
+      const startY = e.pageY;
+      this._dragHandler = rafThrottle(ev => {
+        this.transform.offsetX = offsetX + ev.pageX - startX;
+        this.transform.offsetY = offsetY + ev.pageY - startY;
+      });
+      on(document, 'mousemove', this._dragHandler);
+      on(document, 'mouseup', ev => {
+        off(document, 'mousemove', this._dragHandler);
+      });
+
+      e.preventDefault();
+    },
+    reset() {
+      this.transform = {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false,
+      };
+    },
+    toggleMode() {
+      if (this.loading) return;
+
+      const modeNames = Object.keys(Mode);
+      const modeValues = Object.values(Mode);
+      const index = modeValues.indexOf(this.mode);
+      const nextIndex = (index + 1) % modeNames.length;
+      this.mode = Mode[modeNames[nextIndex]];
+      this.reset();
+    },
+    prev() {
+      if (this.isFirst && !this.infinite) return;
+      const len = this.urlList.length;
+      this.index = (this.index - 1 + len) % len;
+    },
+    next() {
+      if (this.isLast && !this.infinite) return;
+      const len = this.urlList.length;
+      this.index = (this.index + 1) % len;
+    },
+    handleActions(action, options = {}) {
+      if (this.loading) return;
+      const { zoomRate, rotateDeg, enableTransition } = {
+        zoomRate: 0.2,
+        rotateDeg: 90,
+        enableTransition: true,
+        ...options,
+      };
+      const { transform } = this;
+      switch (action) {
+        case 'zoomOut':
+          if (transform.scale > 0.2) {
+            transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));
+          }
+          break;
+        case 'zoomIn':
+          transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
+          break;
+        case 'clocelise':
+          transform.deg += rotateDeg;
+          break;
+        case 'anticlocelise':
+          transform.deg -= rotateDeg;
+          break;
+      }
+      transform.enableTransition = enableTransition;
+    },
+  },
+  mounted() {
+    this.deviceSupportInstall();
+    // add tabindex then wrapper can be focusable via Javascript
+    // focus wrapper so arrow key can't cause inner scroll behavior underneath
+    this.$refs['el-image-viewer__wrapper'].focus();
+  },
+};
+</script>
+
+<style lang="scss">
+.el-image-viewer__close {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.1);
+  transition: background-color 300ms;
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.8);
+  }
+}
+.el-image-viewer__prev,
+.el-image-viewer__next,
+.el-image-viewer__actions {
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: background-color 300ms;
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.8);
+  }
+}
+.el-image-viewer__actions {
+  cursor: auto !important;
+  &-btn {
+    cursor: pointer;
+  }
+}
+.el-image-viewer__img {
+  cursor: grab;
+  &:active {
+    cursor: grabbing;
+  }
+}
+</style>
diff --git a/packages/upload/index.vue b/packages/upload/index.vue
new file mode 100644
index 0000000..d82d6bc
--- /dev/null
+++ b/packages/upload/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="zee-upload">
+    <el-button type="text" @click="openViewer">查看图片</el-button>
+    <el-image-viewer :z-index="zIndex" :initial-index="imageIndex" v-if="showViewer" :on-close="closeViewer" :url-list="previewSrcList" />
+  </div>
+</template>
+
+<script>
+import ElImageViewer from './image-viewer';
+
+export default {
+  name: 'Upload',
+  components: {
+    ElImageViewer,
+  },
+  props: {
+    zIndex: {
+      type: Number,
+      default: 2000,
+    },
+  },
+  data() {
+    return {
+      showViewer: false,
+      src: 'https://zeyi-tms-test.oss-cn-hangzhou.aliyuncs.com/image/vehicle/e1612ad0-3c6f-465b-ac83-cec291d3013d.jpg',
+      previewSrcList: [
+        'https://zeyi-tms-test.oss-cn-hangzhou.aliyuncs.com/image/vehicle/48655e39-31cf-42ca-849d-c4a5245d005b.jpg',
+        'https://zeyi-tms-test.oss-cn-hangzhou.aliyuncs.com/image/vehicle/e1612ad0-3c6f-465b-ac83-cec291d3013d.jpg',
+        'https://zeyi-tms-test.oss-cn-hangzhou.aliyuncs.com/image/vehicle/4511c610-4f73-4f04-8e26-62e87d3cb5b1.jpg',
+      ],
+    };
+  },
+  computed: {
+    imageIndex() {
+      let previewIndex = 0;
+      const srcIndex = this.previewSrcList.indexOf(this.src);
+      if (srcIndex >= 0) {
+        previewIndex = srcIndex;
+      }
+      return previewIndex;
+    },
+  },
+  methods: {
+    closeViewer() {
+      this.showViewer = false;
+    },
+    openViewer() {
+      this.showViewer = true;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.zee-upload {
+  display: inline-flex;
+}
+</style>
--
libgit2 0.21.0