chore(Image): remove unused scale-down fit (#2406)

packages/image/README.md

@@ -14,7 +14,7 @@
 
 ### 基础用法
 
-基础用法与[原生](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)image一致，可以设置`src`、`width`、`height`等原生属性
+基础用法与原生 [image]((https://developers.weixin.qq.com/miniprogram/dev/component/image.html)) 标签一致，可以设置`src`、`width`、`height`等原生属性
 
 ```html
 <van-image
@@ -103,9 +103,9 @@
 | lazy-load | 是否懒加载 | `boolean` | `false` | - |
 | show-error | 是否展示图片加载失败提示 | `boolean` | `true` | - |
 | show-loading | 是否展示图片加载中提示 | `boolean` | `true` | - |
-| show-menu-by-longpress | 开启长按图片显示识别小程序码菜单 | `boolean` | `false` | - |
+| use-error-slot | 是否使用 error 插槽 | `boolean` | `false` | - |
-| use-loading-slot | 是否使用了loading slot | `boolean` | `false` | - |
+| use-loading-slot | 是否使用 loading 插槽 | `boolean` | `false` | - |
-| use-error-slot | 是否使用了error slot | `boolean` | `false` | - |
+| show-menu-by-longpress | 是否开启长按图片显示识别小程序码菜单 | `boolean` | `false` | - |
 
 ### 图片填充模式
 
@@ -115,7 +115,6 @@
 | cover | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 |
 | fill | 拉伸图片，使图片填满元素 |
 | none | 保持图片原有尺寸 |
-| scale-down | 由于小程序原生不支持这个属性，所以暂时和contain保持一致 |
 
 ### Events
 

packages/image/index.ts

@@ -3,6 +3,13 @@ import { VantComponent } from '../common/component';
 import { button } from '../mixins/button';
 import { openType } from '../mixins/open-type';
 
+const FIT_MODE_MAP = {
+  none: 'center',
+  fill: 'scaleToFill',
+  cover: 'aspectFill',
+  contain: 'aspectFit'
+};
+
 VantComponent({
   mixins: [button, openType],
 
@@ -10,14 +17,17 @@ VantComponent({
 
   props: {
     src: String,
+    round: Boolean,
     width: String,
     height: String,
+    lazyLoad: Boolean,
+    useErrorSlot: Boolean,
+    useLoadingSlot: Boolean,
+    showMenuByLongpress: Boolean,
     fit: {
       type: String,
       value: 'fill'
     },
-    round: Boolean,
-    lazyLoad: Boolean,
     showError: {
       type: Boolean,
       value: true
@@ -25,34 +35,19 @@ VantComponent({
     showLoading: {
       type: Boolean,
       value: true
-    },
+    }
-    showMenuByLongpress: Boolean,
-
-    // 受小程序slot限制所需要的属性
-    useLoadingSlot: Boolean,
-    useErrorSlot: Boolean,
   },
 
   data: {
-    fitWeapp: 'aspectFit',
+    error: false,
-    FIT_MODE_MAP: {
+    loading: true
-      contain: 'aspectFit',
-      cover: 'aspectFill',
-      fill: 'scaleToFill',
-      none: 'center',
-
-      // TODO: 这个没有原生的属性，需要后面实现，暂时先用contain;
-      'scale-down': 'aspectFit'
-    },
-    loading: true,
-    error: false
   },
 
   watch: {
     src() {
       this.setData({
-        loading: true,
+        error: false,
-        error: false
+        loading: true
       });
     }
   },
@@ -63,11 +58,9 @@ VantComponent({
 
   methods: {
     init() {
-      const { FIT_MODE_MAP, fit } = this.data;
-
       this.setData({
-        mode: FIT_MODE_MAP[fit],
+        mode: FIT_MODE_MAP[this.data.fit],
-        style: this.getStyle(),
+        style: this.getStyle()
       });
     },
 
@@ -97,7 +90,7 @@ VantComponent({
     onError(event) {
       this.setData({
         loading: false,
-        error: true,
+        error: true
       });
 
       this.$emit('error', event.detail);
@@ -105,6 +98,6 @@ VantComponent({
 
     onClick(event) {
       this.$emit('click', event.detail);
-    },
+    }
   }
 });

packages/image/index.wxml

@@ -1,16 +1,16 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
 <view
-  class="custom-class {{ utils.bem('image', { round })}}"
   style="{{ style }}"
+  class="custom-class {{ utils.bem('image', { round })}}"
   bind:tap="onClick"
 >
   <image
     wx:if="{{ !error }}"
-    class="image-class van-image__img"
-    mode="{{ mode }}"
     src="{{ src }}"
+    mode="{{ mode }}"
     lazy-load="{{ lazyLoad }}"
+    class="image-class van-image__img"
     show-menu-by-longpress="{{ showMenuByLongpress }}"
     bind:load="onLoad"
     bind:error="onError"
@@ -20,28 +20,14 @@
     wx:if="{{ loading && showLoading }}"
     class="loading-class van-image__loading"
   >
-    <slot
+    <slot wx:if="{{ useLoadingSlot }}" name="loading" />
-      wx:if="{{ useLoadingSlot }}"
+    <van-icon wx:else name="photo-o" size="22" />
-      name="loading"
-    />
-    <van-icon
-      wx:else
-      name="photo-o"
-      size="22"
-    />
   </view>
   <view
     wx:if="{{ error && showError }}"
     class="error-class van-image__error"
   >
-    <slot
+    <slot wx:if="{{ useErrorSlot }}" name="error" />
-      wx:if="{{ useErrorSlot }}"
+    <van-icon wx:else name="warning-o" size="22" />
-      name="error"
-    />
-    <van-icon
-      wx:else
-      name="warning-o"
-      size="22"
-    />
   </view>
 </view>