iov-design 2.15.24 → 2.15.26

package/packages/select/src/select.vue

@@ -129,9 +129,7 @@
         </el-scrollbar>
         <template v-if="emptyText && (!allowCreate || loading || (allowCreate && options.length === 0 ))">
           <slot name="empty" v-if="$slots.empty"></slot>
-          <p class="el-select-dropdown__empty" v-else>
-            {{ emptyText }}
-          </p>
+          <el-empty v-else :description="emptyText" :type="0" image-size="60"></el-empty>
         </template>
       </el-select-menu>
     </transition>
@@ -147,6 +145,7 @@
   import ElOption from './option.vue';
   import ElTag from 'iov-design/packages/tag';
   import ElScrollbar from 'iov-design/packages/scrollbar';
+  import ElEmpty from 'iov-design/packages/empty';
   import debounce from 'throttle-debounce/debounce';
   import Clickoutside from 'iov-design/src/utils/clickoutside';
   import { addResizeListener, removeResizeListener } from 'iov-design/src/utils/resize-event';
@@ -237,10 +236,9 @@
 
       collapseTagSize() {
         const sizeMap = {
-          '': 'medium',
-          large: 'medium',
-          medium: 'small',
-          small: 'mini',
+          large: '',
+          medium: 'medium',
+          small: 'small',
           mini: 'mini'
         };
         return sizeMap[this.selectSize];
@@ -255,7 +253,8 @@
       ElSelectMenu,
       ElOption,
       ElTag,
-      ElScrollbar
+      ElScrollbar,
+      ElEmpty
     },
 
     directives: { Clickoutside },
@@ -653,13 +652,11 @@
       resetTagsLeft() {
         this.$nextTick(() => {
           const prefixLabel = this.$el.querySelector('.el-input-group__prefix-label');
-          if (prefixLabel) {
-            const style = prefixLabel && window.getComputedStyle(prefixLabel);
-            const width = +(style.width.replace(/px/, ''));
-            const paddingLeft = +(style.paddingLeft.replace(/px/, ''));
-            const paddingRight = +(style.paddingRight.replace(/px/, ''));
-            this.tagsLeft = (width + paddingLeft + paddingRight) + 'px';
-          }
+          const prefix = this.$el.querySelector('.el-input__prefix');
+          const inputInner = this.$el.querySelector('.el-input__inner');
+          const prefixLabelWidth = prefixLabel && Math.round(prefixLabel.getBoundingClientRect().width) || 0;
+          const inputPaddingLeft = prefixLabel || prefix ? Math.round(window.getComputedStyle(inputInner).paddingLeft.replace(/px/, '')) : 0;
+          this.tagsLeft = (prefixLabelWidth + inputPaddingLeft) + 'px';
         });
       },
 
@@ -673,18 +670,13 @@
         if (this.collapseTags && !this.filterable) return;
         this.$nextTick(() => {
           if (!this.$refs.reference) return;
-          let inputChildNodes = this.$refs.reference.$el.childNodes;
-          // 兼容input组件多加了一层el-input-group__inner
-          Array.from(inputChildNodes).find(child => {
-            if (child && child.classList && child.classList.contains('el-input-group__inner')) {
-              inputChildNodes = child;
-            }
-          });
-          // let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
+          const inputInner = this.$el.querySelector('.el-input__inner');
+          const groupPrefix = this.$el.querySelector('.el-input-group--prefix');
+          const input = groupPrefix || inputInner;
           const tags = this.$refs.tags;
           const tagsHeight = tags ? Math.round(tags.getBoundingClientRect().height) : 0;
           const sizeInMap = this.initialInputHeight || 36;
-          inputChildNodes.style.height = this.selected.length === 0
+          input.style.height = this.selected.length === 0
             ? sizeInMap + 'px'
             : Math.max(
               tags ? (tagsHeight + (tagsHeight > sizeInMap ? 6 : 0)) : 0,

package/packages/table/src/table.vue

@@ -51,9 +51,11 @@
         class="el-table__empty-block"
         ref="emptyBlock"
         :style="emptyBlockStyle">
-        <span class="el-table__empty-text" >
-          <slot name="empty">{{ emptyText || t('el.table.emptyText') }}</slot>
-        </span>
+        <div class="el-table__empty-text" >
+          <slot name="empty">
+            <el-empty ref="emptyText" @loaded="onEmptyText" :description="emptyText || t('el.table.emptyText')" :type="1" :image-size="['medium','small','mini'].includes(size) ? 86 : 108"></el-empty>
+          </slot>
+        </div>
       </div>
       <div
         v-if="$slots.append"
@@ -215,6 +217,7 @@
 
 <script type="text/babel">
   import ElCheckbox from 'iov-design/packages/checkbox';
+  import ElEmpty from 'iov-design/packages/empty';
   import { debounce, throttle } from 'throttle-debounce';
   import { addResizeListener, removeResizeListener } from 'iov-design/src/utils/resize-event';
   import Mousewheel from 'iov-design/src/directives/mousewheel';
@@ -346,7 +349,8 @@
       TableHeader,
       TableFooter,
       TableBody,
-      ElCheckbox
+      ElCheckbox,
+      ElEmpty
     },
 
     methods: {
@@ -500,6 +504,10 @@
 
       toggleAllSelection() {
         this.store.commit('toggleAllSelection');
+      },
+
+      onEmptyText() {
+        this.emptyTextHeight = this.$refs.emptyText.$el.offsetHeight;
       }
 
     },
@@ -587,7 +595,7 @@
 
       emptyBlockStyle() {
         if (this.data && this.data.length) return null;
-        let height = '100%';
+        let height = this.emptyTextHeight + 'px';
         if (this.layout.appendHeight) {
           height = `calc(100% - ${this.layout.appendHeight}px)`;
         }
@@ -708,7 +716,9 @@
         },
         // 是否拥有多级表头
         isGroup: false,
-        scrollPosition: 'left'
+        scrollPosition: 'left',
+        // 暂无数据高度
+        emptyTextHeight: 0
       };
     }
   };

package/packages/theme-chalk/src/button.scss

@@ -135,7 +135,7 @@
   @include m(primary) {
     @include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-background-color-hover, $--button-primary-background-color-active, $--button-primary-background-color-disabled);
     @include when(plain) {
-      @include button-plain($--color-primary-6, $--color-primary-1, $--color-primary-5, $--color-primary-1, $--color-primary-7, $--color-primary-1, $--color-primary-3, $--color-white)
+      @include button-plain($--color-primary-6, $--color-primary-1, $--color-primary-3, $--color-primary-5, $--color-primary-1, $--color-primary-5, $--color-primary-7, $--color-primary-1, $--color-primary-7, $--color-primary-3, $--color-primary-1, $--color-primary-2)
     }
     @include when(dashed) {
       @include button-dashed($--color-primary-6, $--color-primary-1, $--color-primary-5, $--color-primary-1, $--color-primary-7, $--color-primary-1, $--color-primary-3, $--color-white)
@@ -147,7 +147,7 @@
   @include m(success) {
     @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-background-color-hover, $--button-success-background-color-active, $--button-success-background-color-disabled);
     @include when(plain) {
-      @include button-plain($--color-success-6, $--color-success-1, $--color-success-5, $--color-success-1, $--color-success-7, $--color-success-1, $--color-success-3, $--color-white)
+      @include button-plain($--color-success-6, $--color-success-1, $--color-success-3, $--color-success-5, $--color-success-1, $--color-success-5, $--color-success-7, $--color-success-1, $--color-success-7, $--color-success-3, $--color-success-1, $--color-success-2)
     }
     @include when(dashed) {
       @include button-dashed($--color-success-6, $--color-success-1, $--color-success-5, $--color-success-1, $--color-success-7, $--color-success-1, $--color-success-3, $--color-white)
@@ -159,7 +159,7 @@
   @include m(warning) {
     @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-background-color-hover, $--button-warning-background-color-active, $--button-warning-background-color-disabled);
     @include when(plain) {
-      @include button-plain($--color-warning-6, $--color-warning-1, $--color-warning-5, $--color-warning-1, $--color-warning-7, $--color-warning-1, $--color-warning-3, $--color-white)
+      @include button-plain($--color-warning-6, $--color-warning-1, $--color-warning-3, $--color-warning-5, $--color-warning-1, $--color-warning-5, $--color-warning-7, $--color-warning-1, $--color-warning-7, $--color-warning-3, $--color-warning-1, $--color-warning-2)
     }
     @include when(dashed) {
       @include button-dashed($--color-warning-6, $--color-warning-1, $--color-warning-5, $--color-warning-1, $--color-warning-7, $--color-warning-1, $--color-warning-3, $--color-white)
@@ -171,7 +171,7 @@
   @include m(danger) {
     @include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-background-color-hover, $--button-danger-background-color-active, $--button-danger-background-color-disabled);
     @include when(plain) {
-      @include button-plain($--color-danger-6, $--color-danger-1, $--color-danger-5, $--color-danger-1, $--color-danger-7, $--color-danger-1, $--color-danger-3, $--color-white)
+      @include button-plain($--color-danger-6, $--color-danger-1, $--color-danger-3, $--color-danger-5, $--color-danger-1, $--color-danger-5, $--color-danger-7, $--color-danger-1, $--color-danger-7, $--color-danger-3, $--color-danger-1, $--color-danger-2)
     }
     @include when(dashed) {
       @include button-dashed($--color-danger-6, $--color-danger-1, $--color-danger-5, $--color-danger-1, $--color-danger-7, $--color-danger-1, $--color-danger-3, $--color-white)
@@ -183,7 +183,7 @@
   @include m(info) {
     @include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-background-color-hover, $--button-info-background-color-active, $--button-info-background-color-disabled);
     @include when(plain) {
-      @include button-plain($--color-fill-6, $--color-fill-1, $--color-fill-5, $--color-fill-1, $--color-fill-7, $--color-fill-1, $--color-fill-3, $--color-white)
+      @include button-plain($--color-fill-6, $--color-fill-1, $--color-fill-3, $--color-fill-5, $--color-fill-1, $--color-fill-5, $--color-fill-7, $--color-fill-1, $--color-fill-7, $--color-fill-3, $--color-fill-1, $--color-fill-2)
     }
     @include when(dashed) {
       @include button-dashed($--color-fill-6, $--color-fill-1, $--color-fill-5, $--color-fill-1, $--color-fill-7, $--color-fill-1, $--color-fill-3, $--color-white)

package/packages/theme-chalk/src/cascader.scss

@@ -55,19 +55,36 @@
     }
   }
 
+  .el-tag {
+    height: $--input-height - 8px;
+    line-height: $--input-height - 8px;
+  }
+
   @include m(medium) {
     font-size: $--input-medium-font-size;
     line-height: $--input-medium-height;
+    .el-tag--medium {
+      height: $--input-medium-height - 8px;
+      line-height: $--input-medium-height - 8px;
+    }
   }
 
   @include m(small) {
     font-size: $--input-small-font-size;
     line-height: $--input-small-height;
+    .el-tag--small {
+      height: $--input-small-height - 8px;
+      line-height: $--input-small-height - 8px;
+    }
   }
 
   @include m(mini) {
     font-size: $--input-mini-font-size;
     line-height: $--input-mini-height;
+    .el-tag--mini {
+      height: $--input-mini-height - 8px;
+      line-height: $--input-mini-height - 8px;
+    }
   }
 
   @include when(disabled) {
@@ -100,6 +117,8 @@
     line-height: normal;
     text-align: left;
     box-sizing: border-box;
+    z-index: 3;
+    pointer-events: none;
 
     .el-tag {
       display: inline-flex;
@@ -108,6 +127,7 @@
       margin: 2px 0 2px 6px;
       text-overflow: ellipsis;
       color: $--color-text-6;
+      pointer-events: auto;
 
       &.is-disabled {
         color: $--color-text-3;

package/packages/theme-chalk/src/common/var.scss

@@ -854,10 +854,10 @@ $--avatar-small-size: 28px !default;
 
 /* Empty
 -------------------------- */
-$--empty-padding: 40px 0 !default;
+$--empty-padding: 12px 0 16px !default;
 $--empty-image-width: 160px !default;
-$--empty-description-margin-top: 20px !default;
-$--empty-bottom-margin-top: 20px !default;
+$--empty-description-margin-top: 0 !default;
+$--empty-bottom-margin-top: 16px !default;
 
 /* Descriptions
 -------------------------- */

package/packages/theme-chalk/src/empty.scss

@@ -20,22 +20,16 @@
       vertical-align: top;
       object-fit: contain;
     }
-
-    svg {
-      fill: $--svg-monochrome-grey;
-      width: 100%;
-      height: 100%;
-      vertical-align: top;
-    }
   }
 
   @include e(description) {
     margin-top: $--empty-description-margin-top;
 
-    p {
+    .description-text {
       margin: 0;
-      font-size: $--font-size-base;
-      color: $--color-text-secondary;
+      padding: 0;
+      font-size: 12px;
+      color: $--color-text-2;
     }
   }
 

package/packages/theme-chalk/src/input.scss

@@ -157,7 +157,13 @@
       box-shadow: $--input-box-shadow;
     }
   }
-
+  @include e((prefix, suffix)) {
+    .el-input__icon {
+      line-height: $--input-height - 2px;
+      display: flex;
+      align-items: center;
+    }
+  }
   @include e(suffix) {
     padding-left: 8px;
     position: absolute;
@@ -434,9 +440,6 @@
     &.is-disabled {
       background-color: $--input-disabled-fill;
     }
-    .el-input__icon {
-      line-height: $--input-height - 2px;
-    }
     .el-input__inner,
     &:focus {
       margin: 0 auto;
@@ -455,7 +458,7 @@
     }
   }
   @include e((prefix-label, suffix-label)) {
-    color: $--color-text-3;
+    color: $--color-text-4;
     position: relative;
     padding: 0 0 0 12px;
     white-space: nowrap;

package/packages/theme-chalk/src/mixins/_button.scss

@@ -1,19 +1,19 @@
 @import "../common/var";
-@mixin button-plain($color, $background-color, $color-hover, $background-color-hover, $color-active, $background-color-active, $color-disabled, $background-color-disabled) {
+@mixin button-plain($color, $background-color, $border-color, $color-hover, $background-color-hover, $border-color-hover, $color-active, $background-color-active, $border-color-active, $color-disabled, $background-color-disabled, $border-color-disabled) {
   background: $background-color;
-  border-color: $color;
+  border-color: $border-color;
   color: $color;
 
   &:hover {
     background: $background-color-hover;
-    border-color: $color-hover;
+    border-color: $border-color-hover;
     color: $color-hover;
   }
 
   &:active,
   &.is-active {
     background: $background-color-active;
-    border-color: $color-active;
+    border-color: $border-color-active;
     color: $color-active;
     outline: none;
   }
@@ -24,7 +24,7 @@
     &:focus,
     &:active {
       background-color: $background-color-disabled;
-      border-color: $color-disabled;
+      border-color: $border-color-disabled;
       color: $color-disabled;
     }
   }

package/packages/theme-chalk/src/radio.scss

@@ -149,6 +149,11 @@
     line-height: $--radio-bordered-height;
     transition: background-color ease .3s;
 
+    &:hover {
+      color: $--color-primary-5;
+      background: $--color-primary-2;
+    }
+
     &.is-checked {
       background: $--color-primary-2;
       .el-radio__label {

package/packages/theme-chalk/src/select.scss

@@ -38,7 +38,7 @@
     }
     & .el-select__caret {
       padding-right: 0;
-      color: $--select-input-color;
+      color: $--color-fill-5;
       font-size: $--select-icon-size;
       transition: transform .3s;
       transform: rotateZ(180deg);
@@ -144,23 +144,6 @@
     text-overflow: ellipsis;
   }
 
-  @include m(large) {
-    .el-tag--medium {
-      height: 28px;
-    }
-  }
-  @include m(medium) {
-    .el-tag--small {
-      height: 24px;
-    }
-  }
-  @include m(mini) {
-    .el-tag--mini {
-      height: 18px;
-    }
-  }
-
-
   &.is-disabled {
     .el-tag {
       &.el-tag--info {
@@ -178,13 +161,31 @@
     max-width: 100%;
     align-items: center;
     pointer-events: auto;
+    height: $--input-height - 8px;
+    line-height: $--input-height - 8px;
     &.el-tag--info {
       background: $--color-fill-2;
       color: $--color-text-6;
       border: 0 none;
     }
-    &.el-tag--medium {
-      height: 28px;
+  }
+
+  @include m(medium) {
+    .el-tag--medium {
+      height: $--input-medium-height - 8px;
+      line-height: $--input-medium-height - 8px;
+    }
+  }
+  @include m(small) {
+    .el-tag--small {
+      height: $--input-small-height - 8px;
+      line-height: $--input-small-height - 8px;
+    }
+  }
+  @include m(mini) {
+    .el-tag--mini {
+      height: $--input-mini-height - 8px;
+      line-height: $--input-mini-height - 8px;
     }
   }
 }

package/packages/theme-chalk/src/table.scss

@@ -18,7 +18,6 @@
 
   // 数据为空
   @include e(empty-block) {
-    min-height: 60px;
     text-align: center;
     width: 100%;
     display: flex;
@@ -29,9 +28,12 @@
   @include e(empty-text) {
     // min-height doesn't work in IE10 and IE11 https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
     // set empty text line height up to contrainer min-height as workaround.
-    line-height: 60px;
     width: 50%;
-    color: $--color-text-secondary;
+    color: $--color-text-2;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    pointer-events: none;
   }
 
   // 展开行
@@ -321,12 +323,26 @@
     .el-table__cell {
       border-right: 0 none;
     }
+    .el-table__row {
+      &:last-child {
+        td {
+          border-bottom: 0 none;
+        }
+      }
+    }
   }
 
   @include m(hidden) {
     visibility: hidden;
   }
 
+  &:hover {
+    .el-table__fixed,
+    .el-table__fixed-right {
+      // 滚动条在有固定列上无法选中的问题
+      pointer-events: none;
+    }
+  }
   @include e((fixed, fixed-right)) {
     position: absolute;
     top: 0;
@@ -334,6 +350,9 @@
     overflow-x: hidden;
     overflow-y: hidden;
     box-shadow: $--table-fixed-box-shadow;
+    .cell {
+      pointer-events: auto;
+    }
 
     &::before {
       content: '';
@@ -341,8 +360,8 @@
       left: 0;
       bottom: 0;
       width: 100%;
-      height: 1px;
-      background-color: $--border-color-lighter;
+      // height: 1px;
+      // background-color: $--border-color-lighter;
       z-index: 4;
     }
   }
@@ -430,7 +449,7 @@
 
   @include e(body-wrapper) {
     overflow: hidden;
-    position: relative;
+    position: initial;
 
     @include when(scrolling-none) {
       ~ .el-table__fixed,

package/src/index.js

@@ -212,7 +212,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.15.24',
+  version: '2.15.26',
   locale: locale.use,
   i18n: locale.i18n,
   install,

package/src/locale/lang/zh-CN.js

@@ -61,7 +61,7 @@ export default {
     select: {
       loading: '加载中',
       noMatch: '无匹配数据',
-      noData: '无数据',
+      noData: '暂无数据',
       placeholder: '请选择'
     },
     cascader: {
@@ -100,7 +100,7 @@ export default {
     },
     transfer: {
       noMatch: '无匹配数据',
-      noData: '无数据',
+      noData: '暂无数据',
       titles: ['列表 1', '列表 2'],
       filterPlaceholder: '请输入搜索内容',
       noCheckedFormat: '共 {total} 项',

package/packages/empty/src/img-empty.vue

@@ -1,132 +0,0 @@
-<template>
-  <svg
-    viewBox="0 0 79 86"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-  >
-    <defs>
-      <linearGradient
-        :id="`linearGradient-1-${id}`"
-        x1="38.8503086%"
-        y1="0%"
-        x2="61.1496914%"
-        y2="100%"
-      >
-        <stop stop-color="#FCFCFD" offset="0%" />
-        <stop stop-color="#EEEFF3" offset="100%" />
-      </linearGradient>
-      <linearGradient
-        :id="`linearGradient-2-${id}`"
-        x1="0%"
-        y1="9.5%"
-        x2="100%"
-        y2="90.5%"
-      >
-        <stop stop-color="#FCFCFD" offset="0%" />
-        <stop stop-color="#E9EBEF" offset="100%" />
-      </linearGradient>
-      <rect
-        :id="`path-3-${id}`"
-        x="0"
-        y="0"
-        width="17"
-        height="36"
-      />
-    </defs>
-    <g
-      id="Illustrations"
-      stroke="none"
-      stroke-width="1"
-      fill="none"
-      fill-rule="evenodd"
-    >
-      <g id="B-type" transform="translate(-1268.000000, -535.000000)">
-        <g id="Group-2" transform="translate(1268.000000, 535.000000)">
-          <path
-            id="Oval-Copy-2"
-            d="M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z"
-            fill="#F7F8FC"
-          />
-          <polygon
-            id="Rectangle-Copy-14"
-            fill="#E5E7E9"
-            transform="translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) "
-            points="13 58 53 58 42 45 2 45"
-          />
-          <g
-            id="Group-Copy"
-            transform="translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)"
-          >
-            <polygon
-              id="Rectangle-Copy-10"
-              fill="#E5E7E9"
-              transform="translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) "
-              points="2.84078316e-14 3 18 3 23 7 5 7"
-            />
-            <polygon id="Rectangle-Copy-11" fill="#EDEEF2" points="-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43" />
-            <rect
-              id="Rectangle-Copy-12"
-              :fill="`url(#linearGradient-1-${id})`"
-              transform="translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) "
-              x="38"
-              y="7"
-              width="17"
-              height="36"
-            />
-            <polygon
-              id="Rectangle-Copy-13"
-              fill="#F8F9FB"
-              transform="translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) "
-              points="24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12"
-            />
-          </g>
-          <rect
-            id="Rectangle-Copy-15"
-            :fill="`url(#linearGradient-2-${id})`"
-            x="13"
-            y="45"
-            width="40"
-            height="36"
-          />
-          <g id="Rectangle-Copy-17" transform="translate(53.000000, 45.000000)">
-            <mask :id="`mask-4-${id}`" fill="white">
-              <use :xlink:href="`#path-3-${id}`" />
-            </mask>
-            <use
-              id="Mask"
-              fill="#E0E3E9"
-              transform="translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) "
-              :xlink:href="`#path-3-${id}`"
-            />
-            <polygon
-              id="Rectangle-Copy"
-              fill="#D5D7DE"
-              :mask="`url(#mask-4-${id})`"
-              transform="translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) "
-              points="7 0 24 0 20 18 -1.70530257e-13 16"
-            />
-          </g>
-          <polygon
-            id="Rectangle-Copy-18"
-            fill="#F8F9FB"
-            transform="translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) "
-            points="62 45 79 45 70 58 53 58"
-          />
-        </g>
-      </g>
-    </g>
-  </svg>
-</template>
-
-<script>
-let id = 0;
-export default {
-  name: 'ImgEmpty',
-  data() {
-    return {
-      id: ++id
-    };
-  }
-};
-</script>