vdesign-ui 0.1.22 → 0.1.24

package/dist/components/title/index.vue

@@ -11,7 +11,7 @@
         <div class="vd-title--right" v-if="guideText || arrow || $slots.right">
             <slot name="right">
                 <span v-if="guideText" :class="textRightClasses">{{ guideText }}</span>
-                <vd-icon v-if="arrow" class="vd-title-arrow" name="ar_icon_nav_back"></vd-icon>
+                <vd-icon v-if="arrow" class="vd-title-arrow" name="icon_btn_next"></vd-icon>
             </slot>
         </div>
     </div>

package/dist/components/upload/index.vue

@@ -1,220 +1,98 @@
 <template>
-  <div class="vd-upload" :class="{ 'vd-upload--block': (block && listData.length === 0) }">
+  <div class="vd-upload" :class="{ 'vd-upload--block': block }">
     <div class="vd-upload__wrapper">
       <div class="vd-upload__uploader" :class="{ 'vd-upload__uploader--text': text }">
-        <vd-icon name="icon_btn_photo" class="vd-upload__icon"></vd-icon>
+        <vd-icon :name="photo" class="vd-upload__icon"></vd-icon>
         <p class="vd-upload__text" v-if="text">{{ text }}</p>
-        <input type="file" class="vd-upload__input" accept="image/*,.pdf" :multiple="multiple" @change="onChange"
+        <input type="file" ref="input" class="vd-upload__input" :accept="accept" @change="onChange"
           :disabled="disabled">
       </div>
-      <div class="vd-upload__preview" v-for="item in listData" :key="item.id" :class="fileCls(item.type)">
-        <div class="vd-upload__preview-img" v-if="item.type.startsWith('image')" @click="onPreview(item)">
-          <img :src="item.url" />
-        </div>
-        <div class="vd-upload__preview-word" v-if="item.type === 'application/pdf'">PDF</div>
-        <div class="vd-upload__preview-delete" @click="onDelete($event, item)" v-if="deletable">
-          <vd-icon name="icon_btn_close" class="vd-upload__preview-delete-icon"></vd-icon>
-        </div>
-      </div>
-    </div>
-    <div class="vd-image-preview" v-if="isPreview" @click="closePreview">
-      <div class="vd-image-preview__item" v-for="item in listData" :key="item.id" v-show="curNum === item.id"><img
-          :src="item.url" /></div>
     </div>
   </div>
 </template>
 
 <script>
-const prefixCls = 'vd-upload';
 export default {
   name: 'vd-upload',
-  model: {
-    prop: 'fileList'
-  },
+  inheritAttrs: false,
   props: {
-    uploaded: {
-      type: Boolean,
-      default: false
-    },
-    preview: {
-      type: Boolean,
-      default: true
-    },
-    block: {
-      type: Boolean,
-      default: false
-    },
-    text: {
+    photo: {
       type: String,
-      default: ''
-    },
-    fileList: {
-      type: Array,
-      default: () => []
-    },
-    deletable: {
-      type: Boolean,
-      default: true
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * 文件读取前钩子函数
-     */
-    beforeRead: {
-      type: Function,
-      default: () => () => true
-    },
-    /**
-     * 文件读取完钩子函数
-     */
-    afterRead: {
-      type: Function,
-      default: () => () => true
-    },
-    /**
-     * 文件删除前钩子函数
-     */
-    beforeDelete: {
-      type: Function,
-      default: () => () => true
-    },
-    maxCount: {
-      type: Number,
-      default: 1000
+      default: 'icon_btn_photo'
+    },
+    text: String,
+    block: Boolean,
+    disabled: Boolean,
+    beforeRead: Function,
+    afterRead: Function,
+    accept: {
+      type: String,
+      default: 'image/*'
     },
     maxSize: {
       type: Number,
-      default: 6 * 1024 * 1024
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-  },
-  data() {
-    return {
-      listData: this.fileList,
-      curNum: 1,
-      isPreview: false
-    }
-  },
-  watch: {
-    /**
-     * 监听列表数据
-     */
-    fileList: {
-      handler(value) {
-        this.listData = value
-      },
-      deep: true
+      default: Number.MAX_VALUE
     }
   },
+
   methods: {
-    fileCls(file) {
-      if (file === 'application/pdf') {
-        return [`${prefixCls}__preview--pdf`];
-      } else {
-        return [];
+    onChange(event) {
+      let { files } = event.target;
+      if (this.disabled || !files.length) {
+        return;
       }
-    },
-    onDelete(e, item) {
-      e.stopPropagation()
-      const { disabled, beforeDelete, listData } = this
-      /**
-       * 判断是否允许删除文件
-       */
-      if (!disabled && beforeDelete(item) !== false) {
-        /**
-         * 索引
-         */
-        let i = 0
-        /**
-         * 循环遍历数组定位下标位置
-         */
-        for (; i < listData.length; i++) {
-          /**
-           * 判断 id 是否相等
-           */
-          if (listData[i].id === item.id) break
-        }
-        /**
-         * 删除
-         */
-        listData.splice(i, 1)
-        this.$emit('input', listData)
-        this.$emit('on-change', listData)
+
+      files = files.length === 1 ? files[0] : [].slice.call(files, 0);
+      if (!files || (this.beforeRead && !this.beforeRead(files))) {
+        return;
       }
-    },
-    onChange(e) {
-      const { beforeRead, afterRead, maxSize, maxCount, listData } = this
-      /**
-       * 获取不超过 maxCount 文件
-       */
-      const files = Object.values(e.target.files).slice(0, maxCount)
 
-      /**
-       * 判断是否允许读取文件
-       */
-      if (beforeRead(files) !== false) {
-        /**
-         * 循环遍历添加数据
-         */
-        const arr = []
-        files.forEach(elem => {
-          /**
-           * 判断大小是否小于或等于 maxSize
-           */
-          if (elem.size <= maxSize) {
-            /**
-             * 数组长度
-             */
-            const len = listData.length
-            /**
-             * 获取 id
-             */
-            const id = len === 0 ? 1 : listData[len - 1].id + 1
-            /**
-             * 创建 blob 预览图片地址
-             */
-            const url = window.URL.createObjectURL(elem)
+      if (Array.isArray(files)) {
+        Promise.all(files.map(this.readFile)).then(contents => {
+          let oversize = false;
+          const payload = files.map((file, index) => {
+            if (file.size > this.maxSize) {
+              oversize = true;
+            }
 
-            const type = e.target.files[0].type;
-            /**
-             * 添加进数组
-             */
-            listData.push({ id, url, type })
-            arr.push(elem)
-          }
-        })
-        /**
-         * 符合规则的图片数组
-         */
-        if (arr.length > 0) {
-          afterRead(arr)
-          this.$emit('change', listData)
-          this.$emit('num-changed', this.curNum);
-        }
-      }
-    },
-    onPreview({ id }) {
-      const { disabled, preview } = this
-      /**
-       * 判断是否允许预览
-       */
-      if (!disabled && preview) {
-        this.curNum = id
-        /**
-         * 打开图片预览
-         */
-        this.isPreview = true
+            return {
+              file: files[index],
+              content: contents[index]
+            };
+          });
+
+          this.onAfterRead(payload, oversize);
+        });
+      } else {
+        this.readFile(files).then(content => {
+          this.onAfterRead(
+            { file: files, content },
+            files.size > this.maxSize
+          );
+        });
       }
     },
-    closePreview() {
-      this.isPreview = false
+
+    readFile(file) {
+      return new Promise(resolve => {
+        const reader = new FileReader();
+
+        reader.onload = event => {
+          resolve(event.target.result);
+        };
+        reader.readAsDataURL(file);
+
+      });
     },
+
+    onAfterRead(files, oversize) {
+      if (oversize) {
+        this.$emit('oversize', files);
+      } else {
+        this.afterRead && this.afterRead(files);
+        this.$refs.input && (this.$refs.input.value = '');
+      }
+    }
   }
 }
 </script>

package/dist/token.css

@@ -903,9 +903,9 @@ html{
 }
 
 html[theme="dark"]{
---divider-small:0.5;
 --divider-medium:1;
 --divider-large:3;
+--divider-small:0.5;
 --height-super-small:28;
 --height-extra-small:32;
 --height-small:36;
@@ -1382,9 +1382,9 @@ html[theme="dark"]{
 --color-trade-account_head_card_ar-bg:#09825a;
 }
 html{
---divider-small:0.5;
 --divider-medium:1;
 --divider-large:3;
+--divider-small:0.5;
 --height-super-small:28;
 --height-extra-small:32;
 --height-small:36;