feat: 初步完成图片组件

components/pi-img/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <view
+    class="pi-img pi-w-100P pi-align-center"
+    :style="[imageStyle, customStyle]"
+    :class="[customClass]"
+  >
+    <image
+      :src="src"
+      :mode="mode"
+      :lazy-load="lazyLoad"
+      :style="[imageStyle]"
+      @error="handleError"
+      @load="handleLoad"
+    />
+    <view class="pi-abso-center">
+      <slot v-if="$slots.loading" name="loading" />
+      <pi-loading
+        v-else
+        :show="loading"
+        :type="loadingType"
+        :color="loadingColor"
+        :size="loadingSize"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import { getConfig } from '../../config'
+import { createCustomPropsByConfig } from '../../mixin/component-custom'
+const TAG = 'PiImg'
+const { img } = getConfig()
+
+export default {
+  name: TAG,
+  // 混入自定义样式customStyle和customClass
+  mixins: [createCustomPropsByConfig(img)],
+  props: {
+    // 图片地址（默认值：''）
+    src: {
+      type: String,
+      default: img.src
+    },
+    // 裁剪模式（默认值：'widthFix'）
+    mode: {
+      type: String,
+      default: img.mode
+    },
+    // 宽度（默认值：'100%'）
+    width: {
+      type: [String, Number],
+      default: img.width
+    },
+    // 高度（默认值：'auto'）
+    height: {
+      type: [String, Number],
+      default: img.height
+    },
+    // 图片形状，circle-圆形，square-方形（默认值：'square'）
+    shape: {
+      type: String,
+      default: img.shape,
+      validator: function(value) {
+        return ['square', 'circle'].includes(value)
+      }
+    },
+    // shape为square的时候设置（默认值：'8rpx'）
+    borderRadius: {
+      type: [String, Number],
+      default: img.borderRadius
+    },
+    // 是否懒加载（默认值：'true'）
+    lazyLoad: {
+      type: Boolean,
+      default: img.lazyLoad
+    },
+    // 开启长按图片显示识别微信小程序码菜单（默认值：'true'）
+    showMenuByLongpress: {
+      type: Boolean,
+      default: img.showMenuByLongpress
+    },
+    // 是否显示加载中的图标或者自定义的slot（默认值：'true'）
+    showLoading: {
+      type: Boolean,
+      default: img.showLoading
+    },
+    // 加载中颜色（默认值：'#c1c1c1'）
+    loadingColor: {
+      type: String,
+      default: img.loadingColor
+    },
+    // 类型： spinner 菊花 circle 圆环（默认值：'spinner'）
+    loadingType: {
+      type: String,
+      default: img.loadingType,
+      validator: function(value) {
+        return ['spinner', 'circle'].includes(value)
+      }
+    },
+    // 尺寸，默认38rpx
+    loadingSize: {
+      type: [String, Number],
+      default: img.loadingSize
+    },
+    // 是否显示加载中的图标或者自定义的slot（默认值：true）
+    showError: {
+      type: Boolean,
+      default: img.showError
+    },
+    // 默认不解析 webP 格式，只支持网络资源（默认值：false）
+    webp: {
+      type: Boolean,
+      default: img.webp
+    }
+  },
+  data() {
+    return {
+      // 初始化组件时，默认为加载中状态
+      loading: true,
+      // 图片是否加载错误，如果是，则显示错误占位图
+      error: false
+    }
+  },
+  computed: {
+    imageStyle() {
+      return {
+        overflow: 'hidden',
+        width: this.$pi.common.addUnit(this.width),
+        height: this.$pi.common.addUnit(this.height),
+        borderRadius: this.shape === 'circle' ? '50%' : this.$pi.common.addUnit(this.borderRadius)
+      }
+    }
+  },
+  methods: {
+    handleError() {
+      this.error = true
+      this.loading = false
+    },
+    handleLoad() {
+      this.error = false
+      this.loading = false
+      this.$emit('load')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pi-img {
+  position: relative;
+  min-height: 50%;
+}
+</style>

components/pi-loading/index.vue

@@ -5,7 +5,7 @@
     :style="[customStyle, { color: color }]"
     :class="[customClass, vertical ? vertical : '']"
   >
-    <view v-if="type === 'circular'" class="loading-circular" :style="[cricleStyle]" />
+    <view v-if="type === 'circle'" class="loading-circle" :style="[cricleStyle]" />
     <view v-if="type === 'spinner'" class="loading-spinner" :style="[cricleStyle]">
       <view v-for="line of 12" :key="line" />
     </view>
@@ -34,12 +34,12 @@ export default {
       type: String,
       default: loading.color
     },
-    // 类型： spinner 菊花 circular 圆环
+    // 类型： spinner 菊花 circle 圆环
     type: {
       type: String,
       default: loading.type,
       validator: function(value) {
-        return ['spinner', 'circular'].includes(value)
+        return ['spinner', 'circle'].includes(value)
       }
     },
     // 尺寸，默认38rpx
@@ -107,7 +107,7 @@ export default {
     }
   }
 }
-.loading-circular {
+.loading-circle {
   display: inline-block;
   width: 28rpx;
   height: 28rpx;

config/img.js

@@ -0,0 +1,18 @@
+export default {
+  customClass: '', // 自定义样式类，字符串形式（''）
+  customStyle: {}, // 自定义样式，对象形式（默认值：{}）
+  src: '', // 图片地址（默认值：''）
+  mode: 'widthFix', // 裁剪模式（默认值：'widthFix'）
+  width: '100%', // 宽度（默认值：'100%'）
+  height: 'auto', // 高度（默认值：'auto'）
+  shape: 'square', // 图片形状，circle-圆形，square-方形（默认值：'square'）
+  borderRadius: 8, // shape为square的时候设置（默认值：'8rpx'）
+  lazyLoad: true, // 是否懒加载（默认值：'true'）
+  showMenuByLongpress: true, // 开启长按图片显示识别微信小程序码菜单（默认值：'true'）
+  showLoading: true, // 是否显示加载中的图标或者自定义的slot（默认值：'true'）
+  loadingColor: '#c1c1c1', // 加载中颜色（默认值：'#c1c1c1'）
+  loadingType: 'spinner', // 类型： spinner 菊花 circle 圆环（默认值：'spinner'）
+  loadingSize: 32, // 尺寸，默认32rpx
+  showError: true, // 是否显示加载中的图标或者自定义的slot（默认值：true）
+  webp: false // 默认不解析 webP 格式，只支持网络资源（默认值：false）
+}

config/loading.js

@@ -1,8 +1,8 @@
 export default {
   customClass: '', // 自定义样式类，字符串形式（''）
   customStyle: {}, // 自定义样式，对象形式（默认值：{}）
-  color: '#c1c1c1', // j颜色
-  type: 'spinner', // 类型： spinner 菊花 circular 圆环
+  color: '#c1c1c1', // 颜色
+  type: 'spinner', // 类型： spinner 菊花 circle 圆环
   size: 32, // 尺寸，默认32rpx
   vertical: false, // 是否垂直排列
   textSize: '28rpx', // 文字尺寸，默认28rpx