vant

utils/dist/image/index.d.ts

@@ -0,0 +1 @@
+export {};

utils/dist/image/index.js

@@ -0,0 +1,98 @@
+import { addUnit, isDef } from '../common/utils';
+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],
+    classes: ['custom-class', 'loading-class', 'error-class', 'image-class'],
+    props: {
+        src: String,
+        round: Boolean,
+        width: {
+            type: null,
+            observer: 'setStyle'
+        },
+        height: {
+            type: null,
+            observer: 'setStyle'
+        },
+        radius: null,
+        lazyLoad: Boolean,
+        useErrorSlot: Boolean,
+        useLoadingSlot: Boolean,
+        showMenuByLongpress: Boolean,
+        fit: {
+            type: String,
+            value: 'fill',
+            observer: 'setMode'
+        },
+        showError: {
+            type: Boolean,
+            value: true
+        },
+        showLoading: {
+            type: Boolean,
+            value: true
+        }
+    },
+    data: {
+        error: false,
+        loading: true
+    },
+    watch: {
+        src() {
+            this.setData({
+                error: false,
+                loading: true
+            });
+        }
+    },
+    mounted() {
+        this.setMode();
+        this.setStyle();
+    },
+    methods: {
+        setMode() {
+            this.setData({
+                mode: FIT_MODE_MAP[this.data.fit],
+            });
+        },
+        setStyle() {
+            const { width, height, radius } = this.data;
+            let style = '';
+            if (isDef(width)) {
+                style += `width: ${addUnit(width)};`;
+            }
+            if (isDef(height)) {
+                style += `height: ${addUnit(height)};`;
+            }
+            if (isDef(radius)) {
+                style += 'overflow: hidden;';
+                style += `border-radius: ${addUnit(radius)};`;
+            }
+            this.setData({ style });
+        },
+        onLoad(event) {
+            this.setData({
+                loading: false
+            });
+            this.$emit('load', event.detail);
+        },
+        onError(event) {
+            this.setData({
+                loading: false,
+                error: true
+            });
+            this.$emit('error', event.detail);
+        },
+        onClick(event) {
+            this.$emit('click', event.detail);
+        }
+    }
+});

utils/dist/image/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index",
+    "van-loading": "../loading/index"
+  }
+}

utils/dist/image/index.wxml

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

utils/dist/image/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-image{position:relative;display:inline-block}.van-image--round{overflow:hidden;border-radius:50%}.van-image--round .van-image__img{border-radius:inherit}.van-image__error,.van-image__img,.van-image__loading{display:block;width:100%;height:100%}.van-image__error,.van-image__loading{position:absolute;top:0;left:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;color:#969799;color:var(--image-placeholder-text-color,#969799);font-size:14px;font-size:var(--image-placeholder-font-size,14px);background-color:#f7f8fa;background-color:var(--image-placeholder-background-color,#f7f8fa)}