iov-design 2.15.46 → 2.15.47

package/packages/upload/src/index.vue

@@ -1,5 +1,7 @@
 <script>
 import UploadList from './upload-list';
+import UploadFile from './upload-file';
+import UploadPicture from './upload-picture';
 import Upload from './upload';
 import ElProgress from 'iov-design/packages/progress';
 import Migrating from 'iov-design/src/mixins/migrating';
@@ -14,6 +16,8 @@ export default {
   components: {
     ElProgress,
     UploadList,
+    UploadFile,
+    UploadPicture,
     Upload
   },
 
@@ -103,6 +107,11 @@ export default {
     onExceed: {
       type: Function,
       default: noop
+    },
+    background: Boolean,
+    size: {
+      type: String,
+      default: 'medium'
     }
   },
 
@@ -267,13 +276,53 @@ export default {
 
   render(h) {
     let uploadList;
-
+    let uploadFile = (
+      <UploadFile
+        disabled={this.uploadDisabled}
+        listType={this.listType}
+        files={this.uploadFiles}
+        width={this.width}
+        height={this.height}
+        size={this.size}
+        on-remove={this.handleRemove}
+        handlePreview={this.onPreview}>
+        {
+          (props) => {
+            if (this.$scopedSlots.file) {
+              return this.$scopedSlots.file({
+                file: props.file
+              });
+            }
+          }
+        }
+      </UploadFile>
+    );
+    let uploadPicture = (
+      <UploadPicture
+        disabled={this.uploadDisabled}
+        listType={this.listType}
+        files={this.uploadFiles}
+        size={this.size}
+        on-remove={this.handleRemove}
+        handlePreview={this.onPreview}>
+        {
+          (props) => {
+            if (this.$scopedSlots.file) {
+              return this.$scopedSlots.file({
+                file: props.file
+              });
+            }
+          }
+        }
+      </UploadPicture>
+    );
     if (this.showFileList) {
       uploadList = (
         <UploadList
           disabled={this.uploadDisabled}
           listType={this.listType}
           files={this.uploadFiles}
+          size={this.size}
           on-remove={this.handleRemove}
           handlePreview={this.onPreview}>
           {
@@ -293,6 +342,7 @@ export default {
       props: {
         type: this.type,
         drag: this.drag,
+        size: this.size,
         action: this.action,
         multiple: this.multiple,
         'before-upload': this.beforeUpload,
@@ -302,6 +352,7 @@ export default {
         data: this.data,
         accept: this.accept,
         fileList: this.uploadFiles,
+        showFileList: this.showFileList,
         autoUpload: this.autoUpload,
         listType: this.listType,
         disabled: this.uploadDisabled,
@@ -318,18 +369,35 @@ export default {
       ref: 'upload-inner'
     };
 
-    const trigger = this.$slots.trigger || this.$slots.default;
-    const uploadComponent = <upload {...uploadData}>{trigger}</upload>;
+    const hideUploadInput = !this.showFileList && this.listType === 'picture-card' && this.limit === 1;
+    let slotDefault = this.$slots.default;
+    if (this.drag) {
+      // 拖动文件上传
+      if (this.limit === 1 && !this.showFileList) {
+        slotDefault = this.uploadFiles.length > 0
+          ? uploadFile
+          : [this.$slots.default, this.$slots.tip];
+      } else {
+        slotDefault = [this.$slots.default, this.$slots.tip];
+      }
+    } else if (hideUploadInput) {
+      // 单个图片上传(不显示图片墙)
+      slotDefault = [ uploadPicture, this.$slots.default];
+    } else {
+      slotDefault = this.$slots.default;
+    }
 
+    const trigger = this.$slots.trigger || slotDefault;
+    const uploadComponent = <upload {...uploadData}>{trigger}</upload>;
     return (
-      <div>
+      <div class={{ 'el-upload--wrap': true, 'el-upload-bg': this.background }}>
         { this.listType === 'picture-card' ? uploadList : ''}
         {
           this.$slots.trigger
             ? [uploadComponent, this.$slots.default]
             : uploadComponent
         }
-        {this.$slots.tip}
+        { !this.drag && this.$slots.tip }
         { this.listType !== 'picture-card' ? uploadList : ''}
       </div>
     );

package/packages/upload/src/upload-file.vue

@@ -0,0 +1,90 @@
+<template>
+  <ul
+    :class="[
+      'el-upload-list',
+      'el-upload-list--' + listType,
+      { 'is-disabled': disabled }
+    ]"
+  >
+    <li
+      v-for="file in files"
+      :class="['el-upload-list__item', 'is-' + file.status, focusing ? 'focusing' : '']"
+      :key="file.uid"
+      tabindex="0"
+      @focus="focusing = true"
+      @blur="focusing = false"
+      @click="focusing = false"
+    >
+      <slot :file="file">
+        <div class="el-upload-list__file">
+          <div v-if="file.status === 'success'" class="el-upload-list__item-name">
+            <span v-if="['picture-card', 'picture'].includes(listType)" class="el-upload-list__item-thumbnail">
+              <el-image :src="file.url" :preview-src-list="[file.url]" fit="contain">
+                <i slot="placeholder" class="el-image__placeholder"></i>
+                <i slot="error" class="el-image__error"></i>
+              </el-image>
+            </span>
+            <i v-else-if="['text'].includes(listType)" class="el-upload-list__icon" @click="handleClick(file)" :style="iconStyle(file.name)"></i>
+            <div class="el-upload-list__name" @click="handleClick(file)">
+              <span class="file-name">{{file.name}}</span>
+            </div>
+            <el-button v-if="size === 'medium'" class="el-upload__btn" round size="small" slot="trigger">重新上传</el-button>
+          </div>
+          <div v-if="file.status === 'uploading'" class="el-upload-list__item-status-label">
+            <el-progress
+              :percentage="file.percentage"
+              :stroke-width="2"
+              :show-text="false"
+              type="line"
+              color="#3F57FF"
+              define-back-color="#F2F3F5"
+              class="el-upload-progress"
+            />
+            <span class="el-upload-progress__text">文件上传中</span>
+          </div>
+        </div>
+        <i class="el-upload__remove iov-icon-close-mini" v-if="!disabled" @click.stop="$emit('remove', file)"></i>
+      </slot>
+    </li>
+  </ul>
+</template>
+<script>
+  import ElProgress from 'iov-design/packages/progress';
+  import { iconStyle } from './utils';
+  export default {
+    name: 'ElUploadFile',
+    data() {
+      return {
+        focusing: false,
+        iconStyle
+      };
+    },
+    components: { ElProgress },
+
+    props: {
+      files: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      size: String,
+      width: String,
+      height: String,
+      handlePreview: Function,
+      listType: String
+    },
+    methods: {
+      parsePercentage(val) {
+        return parseInt(val, 10);
+      },
+      handleClick(file) {
+        this.handlePreview && this.handlePreview(file);
+      }
+    }
+  };
+</script>

package/packages/upload/src/upload-list.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition-group
+  <ul
     tag="ul"
     :class="[
       'el-upload-list',
@@ -10,71 +10,72 @@
   >
     <li
       v-for="file in files"
-      :class="['el-upload-list__item', 'is-' + file.status, focusing ? 'focusing' : '']"
+      :class="['el-upload-list__item', 'el-upload-list__item-' + size, 'is-' + file.status, focusing ? 'focusing' : '']"
       :key="file.uid"
       tabindex="0"
-      @keydown.delete="!disabled && $emit('remove', file)"
       @focus="focusing = true"
       @blur="focusing = false"
       @click="focusing = false"
     >
       <slot :file="file">
-        <img
-          class="el-upload-list__item-thumbnail"
-          v-if="file.status !== 'uploading' && ['picture-card', 'picture'].indexOf(listType) > -1"
-          :src="file.url" alt=""
-        >
-        <a class="el-upload-list__item-name" @click="handleClick(file)">
-          <i class="el-icon-document"></i>{{file.name}}
-        </a>
-        <label class="el-upload-list__item-status-label">
-          <i :class="{
-            'el-icon-upload-success': true,
-            'el-icon-circle-check': listType === 'text',
-            'el-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1
-          }"></i>
-        </label>
-        <i class="el-icon-close" v-if="!disabled" @click="$emit('remove', file)"></i>
-        <i class="el-icon-close-tip" v-if="!disabled">{{ t('el.upload.deleteTip') }}</i> <!--因为close按钮只在li:focus的时候 display, li blur后就不存在了，所以键盘导航时永远无法 focus到 close按钮上-->
-        <el-progress
-          v-if="file.status === 'uploading'"
-          :type="listType === 'picture-card' ? 'circle' : 'line'"
-          :stroke-width="listType === 'picture-card' ? 6 : 2"
-          :percentage="parsePercentage(file.percentage)">
-        </el-progress>
-        <span class="el-upload-list__item-actions" v-if="listType === 'picture-card'">
-          <span
-            class="el-upload-list__item-preview"
-            v-if="handlePreview && listType === 'picture-card'"
-            @click="handlePreview(file)"
-          >
-            <i class="el-icon-zoom-in"></i>
-          </span>
-          <span
-            v-if="!disabled"
-            class="el-upload-list__item-delete"
-            @click="$emit('remove', file)"
-          >
-            <i class="el-icon-delete"></i>
-          </span>
+        <div class="el-upload-list__file">
+          <div class="el-upload-list__item-name" @click="handleClick(file)">
+            <span v-if="['picture-card', 'picture'].includes(listType)" class="el-upload-list__item-thumbnail">
+              <el-image :src="file.url" :preview-src-list="handlePreview ? [] : [file.url]" fit="contain">
+                <i slot="placeholder" class="el-image__placeholder"></i>
+                <i slot="error" class="el-image__error"></i>
+              </el-image>
+            </span>
+            <i v-else-if="['text'].includes(listType)" class="el-upload-list__icon" :style="iconStyle(file.name)"></i>
+            <div v-if="['text', 'picture'].includes(listType)" class="el-upload-list__name">
+              <span class="file-name">{{file.name}}</span>
+            </div>
+          </div>
+          <div v-if="['text', 'picture'].includes(listType)" class="el-upload-list__item-status-label">
+            <el-progress
+              v-if="file.status === 'uploading'"
+              :percentage="file.percentage"
+              :width="14"
+              :stroke-width="7"
+              :show-text="false"
+              type="circle"
+              stroke-linecap="butt"
+              class="el-upload-progress"
+            />
+            <i v-else-if="file.status === 'success'" class="el-upload-success iov-icon-success"></i>
+          </div>
+          <div v-else-if="['picture-card'].includes(listType) && file.status === 'uploading'"  class="el-upload-list__item-status-label">
+            <el-progress
+              :percentage="file.percentage"
+              :stroke-width="2"
+              :show-text="false"
+              type="line"
+              color="#3F57FF"
+              define-back-color="#F2F3F5"
+              class="el-upload-progress"
+            />
+            <span class="el-upload-progress__text">上传中</span>
+          </div>
+        </div>
+        <i class="iov-icon-delete" v-if="!disabled && ['text', 'picture'].includes(listType)" @click="$emit('remove', file)"></i>
+        <span class="el-upload-list__item-actions" v-if="listType === 'picture-card' && file.status === 'success'">
+          <i v-if="handlePreview" @click.stop="handlePreview(file)" class="el-upload-list__item-preview iov-icon-eye"></i>
+          <i v-if="!disabled" class="el-upload-list__item-delete iov-icon-delete" @click.stop="$emit('remove', file)"></i>
+          <i v-if="!disabled" class="el-upload-list__item-update iov-icon-update"></i>
         </span>
       </slot>
     </li>
-  </transition-group>
+  </ul>
 </template>
 <script>
-  import Locale from 'iov-design/src/mixins/locale';
   import ElProgress from 'iov-design/packages/progress';
-
+  import { iconStyle } from './utils';
   export default {
-
     name: 'ElUploadList',
-
-    mixins: [Locale],
-
     data() {
       return {
-        focusing: false
+        focusing: false,
+        iconStyle
       };
     },
     components: { ElProgress },
@@ -90,7 +91,8 @@
         type: Boolean,
         default: false
       },
-      handlePreview: Function,
+      size: String,
+      handlePreview: null,
       listType: String
     },
     methods: {

package/packages/upload/src/upload-picture.vue

@@ -0,0 +1,90 @@
+<template>
+  <ul
+    tag="ul"
+    :class="[
+      'el-upload-list',
+      'el-upload-list--' + listType,
+      { 'is-disabled': disabled }
+    ]"
+    name="el-list"
+  >
+    <li
+      v-for="file in files"
+      :class="['el-upload-list__item', 'el-upload-list__item-' + size, 'is-' + file.status, focusing ? 'focusing' : '']"
+      :key="file.uid"
+      tabindex="0"
+      @focus="focusing = true"
+      @blur="focusing = false"
+      @click="focusing = false"
+    >
+      <slot :file="file">
+        <div class="el-upload-list__file">
+          <div v-if="file.status === 'success'" class="el-upload-list__item-name" @click="handleClick(file)">
+            <span class="el-upload-list__item-thumbnail">
+              <el-image :src="file.url" :preview-src-list="handlePreview ? [] : [file.url]" fit="contain">
+                <i slot="placeholder" class="el-image__placeholder"></i>
+                <i slot="error" class="el-image__error"></i>
+              </el-image>
+            </span>
+          </div>
+          <div v-if="file.status === 'uploading'" class="el-upload-list__item-status-label">
+            <el-progress
+              :percentage="file.percentage"
+              :stroke-width="2"
+              :show-text="false"
+              type="line"
+              color="#3F57FF"
+              define-back-color="#F2F3F5"
+              class="el-upload-progress"
+            />
+            <span class="el-upload-progress__text">上传中</span>
+          </div>
+        </div>
+        <span class="el-upload-list__item-actions" v-if="file.status === 'success'">
+          <i v-if="handlePreview" @click="handlePreview(file)" class="el-upload-list__item-preview iov-icon-eye"></i>
+          <i v-if="!disabled" class="el-upload-list__item-delete iov-icon-delete" @click.stop="$emit('remove', file)"></i>
+          <i v-if="!disabled" class="el-upload-list__item-update iov-icon-update"></i>
+        </span>
+      </slot>
+    </li>
+  </ul>
+</template>
+<script>
+  import ElProgress from 'iov-design/packages/progress';
+  import { iconStyle } from './utils';
+
+  export default {
+    name: 'ElUploadPicture',
+    data() {
+      return {
+        focusing: false,
+        iconStyle
+      };
+    },
+    components: { ElProgress },
+
+    props: {
+      files: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      size: String,
+      handlePreview: Function,
+      listType: String
+    },
+    methods: {
+      parsePercentage(val) {
+        return parseInt(val, 10);
+      },
+      handleClick(file) {
+        this.handlePreview && this.handlePreview(file);
+      }
+    }
+  };
+</script>