hy-app 0.3.0 → 0.3.2

package/components/hy-image/hy-image.vue

@@ -1,5 +1,10 @@
 <template>
-  <HyTransition mode="fade" :show="show" :style="transStyle" :duration="fade ? 1000 : 0">
+  <HyTransition
+    mode="fade"
+    :show="show"
+    :style="transStyle"
+    :duration="fade ? 1000 : 0"
+  >
     <view
       :class="['hy-image', 'box-border', customClass]"
       @tap="clickHandler"
@@ -51,50 +56,61 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-image',
+  name: "hy-image",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, toRefs, watch } from 'vue'
-import type { PropType, CSSProperties } from 'vue'
-import type { IImageEmits } from './typing'
-import { addUnit, getPx } from '../../utils'
-import { IconConfig } from '../../config'
+import { computed, onMounted, ref, watch } from "vue";
+import type { PropType, CSSProperties } from "vue";
+import type { IImageEmits } from "./typing";
+import { addUnit, getPx } from "../../utils";
+import { IconConfig } from "../../config";
 // 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
-import HyTransition from '../hy-transition/hy-transition.vue'
-import HyLoading from '../hy-loading/hy-loading.vue'
+import HyIcon from "../hy-icon/hy-icon.vue";
+import HyTransition from "../hy-transition/hy-transition.vue";
+import HyLoading from "../hy-loading/hy-loading.vue";
+import type {
+  ImageOnErrorEvent,
+  ImageOnLoadEvent,
+} from "@uni-helper/uni-types";
 
 /**
  * uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
  * @displayName hy-image
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 图片地址 */
-  src: String,
-  /** 裁剪模式，见官网说明 */
+  src: {
+    type: String,
+    default: "",
+    required: true,
+  },
+  /**
+   * 裁剪模式，见官网说明
+   * @values scaleToFill,aspectFit,aspectFill,widthFix,heightFix,top,bottom,center,left,right,top left,top right,bottom left,bottom right
+   * */
   mode: {
     type: String,
-    default: 'aspectFill',
+    default: "aspectFill",
   },
   /** 宽度，单位任意，如果为数值，则为px单位 */
   width: {
     type: [String, Number],
-    default: '',
+    default: "",
   },
   /** 高度，单位任意，如果为数值，则为px单位 */
   height: {
     type: [String, Number],
-    default: '',
+    default: "",
   },
   /**
    * 图片形状
@@ -102,7 +118,7 @@ const props = defineProps({
    * */
   shape: {
     type: String,
-    default: 'square',
+    default: "square",
   },
   /** 圆角值，单位任意，如果为数值，则为px单位 */
   radius: {
@@ -172,126 +188,134 @@ const props = defineProps({
   },
   /** 自定义外部类名 */
   customClass: String,
-})
-const {
-  customStyle,
-  duration,
-  src,
-  width,
-  height,
-  mode,
-  shape,
-  radius,
-  bgColor,
-  previewImage,
-  indistinct,
-} = toRefs(props)
-const emit = defineEmits<IImageEmits>()
+});
+const emit = defineEmits<IImageEmits>();
 
 // 图片是否加载错误，如果是，则显示错误占位图
-const isError = ref(false)
+const isError = ref(false);
 // 初始化组件时，默认为加载中状态
-const loading = ref(true)
+const loading = ref(true);
 // 不透明度，为了实现淡入淡出的效果
-const opacity = ref(1)
+const opacity = ref(1);
 // 过渡时间，因为props的值无法修改，故需要一个中间值
-const durationTime = ref(duration.value)
+const durationTime = ref(props.duration);
 // 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
-const backgroundStyle = ref({})
+const backgroundStyle = ref({});
 // 用于fade模式的控制组件显示与否
-const show = ref(false)
+const show = ref(false);
 
 watch(
-  () => src.value,
+  () => props.src,
   (newValue) => {
     if (!newValue) {
       // 如果传入null或者''，或者false，或者undefined，标记为错误状态
-      isError.value = true
-      loading.value = false
+      isError.value = true;
+      loading.value = false;
     } else {
-      isError.value = false
-      loading.value = true
+      isError.value = false;
+      loading.value = true;
     }
   },
   { immediate: true },
-)
+);
 
 const transStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {}
-  if (loading.value || isError.value || width.value == '100%' || mode.value != 'heightFix') {
-    style.width = addUnit(width.value)
+  const style: CSSProperties = {};
+  if (
+    loading.value ||
+    isError.value ||
+    props.width == "100%" ||
+    props.mode != "heightFix"
+  ) {
+    style.width = addUnit(props.width);
   } else {
-    style.width = 'fit-content'
+    style.width = "fit-content";
   }
-  if (loading.value || isError.value || height.value == '100%' || mode.value != 'widthFix') {
-    style.height = addUnit(height.value)
+  if (
+    loading.value ||
+    isError.value ||
+    props.height == "100%" ||
+    props.mode != "widthFix"
+  ) {
+    style.height = addUnit(props.height);
   } else {
-    style.height = 'fit-content'
+    style.height = "fit-content";
   }
-  return style
-})
+  return style;
+});
 
 const wrapStyle = computed(() => {
-  const style: CSSProperties = {}
-  if (loading.value || isError.value || width.value == '100%' || mode.value != 'heightFix') {
-    style.width = addUnit(width.value)
+  const style: CSSProperties = {};
+  if (
+    loading.value ||
+    isError.value ||
+    props.width == "100%" ||
+    props.mode != "heightFix"
+  ) {
+    style.width = addUnit(props.width);
   } else {
-    style.width = 'fit-content'
+    style.width = "fit-content";
   }
-  if (loading.value || isError.value || height.value == '100%' || mode.value != 'widthFix') {
-    style.height = addUnit(height.value)
+  if (
+    loading.value ||
+    isError.value ||
+    props.height == "100%" ||
+    props.mode != "widthFix"
+  ) {
+    style.height = addUnit(props.height);
   } else {
-    style.height = 'fit-content'
+    style.height = "fit-content";
   }
   // 如果是显示圆形，设置一个很多的半径值即可
-  style.borderRadius = shape.value == 'circle' ? '10000px' : addUnit(radius.value)
+  style.borderRadius =
+    props.shape == "circle" ? "10000px" : addUnit(props.radius);
   // 如果设置圆角，必须要有hidden，否则可能圆角无效
-  style.overflow = getPx(radius.value) > 0 ? 'hidden' : 'visible'
+  style.overflow = getPx(props.radius) > 0 ? "hidden" : "visible";
 
-  return Object.assign(style, customStyle.value)
-})
+  return Object.assign(style, props.customStyle);
+});
 
 onMounted(() => {
-  show.value = true
-})
+  show.value = true;
+});
 
 const clickHandler = () => {
-  emit('click')
+  emit("click");
 
-  if (previewImage.value) {
+  if (props.previewImage) {
     uni.previewImage({
-      urls: [src.value],
-    })
+      urls: [props.src],
+    });
   }
-}
+};
 
 /**
  * @description 图片加载失败
  * */
-const onErrorHandler = (err: Event) => {
-  loading.value = false
-  isError.value = true
-  emit('error', err)
-}
+const onErrorHandler = (err: ImageOnErrorEvent) => {
+  loading.value = false;
+  isError.value = true;
+  emit("error", err);
+};
 
 /**
  * @description 图片加载成功
  * */
-const onLoadHandler = (e: Event) => {
-  loading.value = false
-  isError.value = false
-  emit('load', e)
-  removeBgColor()
-}
+const onLoadHandler = (e: ImageOnLoadEvent) => {
+  loading.value = false;
+  isError.value = false;
+  emit("load", e);
+  removeBgColor();
+};
 
 const removeBgColor = () => {
   // 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
   backgroundStyle.value = {
-    backgroundColor: bgColor.value || '',
-  }
-}
+    backgroundColor: props.bgColor,
+  };
+};
 </script>
 
 <style scoped lang="scss">
-@import './index.scss';
+@import "./index.scss";
 </style>

package/components/hy-image/typing.d.ts

@@ -1,89 +1,93 @@
-import type { CSSProperties } from 'vue'
+import type { CSSProperties } from "vue";
+import type {
+  ImageOnErrorEvent,
+  ImageOnLoadEvent,
+} from "@uni-helper/uni-types";
 
 export default interface HyImageProps {
   /**
    * @description 图片地址
    * */
-  src?: string
+  src?: string;
   /**
    * @description 裁剪模式，见官网说明 （默认 'aspectFill' ）
    * */
-  mode?: HyApp.ImageModeVo
+  mode?: HyApp.ImageModeVo;
   /**
    * @description 宽度，单位任意，如果为数值，则为px单位 （默认 '300' ）
    * */
-  width?: string | number
+  width?: string | number;
   /**
    * @description 高度，单位任意，如果为数值，则为px单位 （默认 '225' ）
    * */
-  height?: string | number
+  height?: string | number;
   /**
    * @description 图片形状，circle-圆形，square-方形 （默认 'square' ）
    * */
-  shape?: HyApp.ShapeType
+  shape?: HyApp.ShapeType;
   /**
    * @description 圆角值，单位任意，如果为数值，则为px单位 （默认 0 ）
    * */
-  radius?: number | string
+  radius?: number | string;
   /**
    * @description 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效 （默认 true ）
    * */
-  lazyLoad?: boolean
+  lazyLoad?: boolean;
   /**
    * @description 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效 （默认 true ）
    * */
-  showMenuByLongPress?: boolean
+  showMenuByLongPress?: boolean;
   /**
    * @description 加载中的图标，或者小图片 （默认 'photo' ）
    * */
-  loadingIcon?: string
+  loadingIcon?: string;
   /**
    * @description 加载失败的图标，或者小图片 （默认 'error-circle' ）
    * */
-  errorIcon?: string
+  errorIcon?: string;
   /**
    * @description 是否显示加载中的图标或者自定义的slot （默认 true ）
    * */
-  showLoading?: boolean
+  showLoading?: boolean;
   /**
    * @description 是否显示加载错误的图标或者自定义的slot （默认 true ）
    * */
-  showError?: boolean
+  showError?: boolean;
   /**
    * @description 是否需要淡入效果 （默认 true ）
    * */
-  fade?: boolean
+  fade?: boolean;
   /**
    * @description 只支持网络资源，只对微信小程序有效 （默认 false ）
    * */
-  webp?: boolean
+  webp?: boolean;
   /**
    * @description 搭配fade参数的过渡时间，单位ms （默认 500 ）
    * */
-  duration?: number
+  duration?: number;
   /**
    * @description 背景颜色，用于深色页面加载图片时，为了和背景色融合  (默认 '#f3f4f6' )
    * */
-  bgColor?: string
+  bgColor?: string;
   /**
    * @description 是否模糊图片  (默认 false )
    * */
-  indistinct?: boolean
+  indistinct?: boolean;
   /**
    * @description 是否预览图片  (默认 false )
    * */
-  previewImage?: boolean
+  previewImage?: boolean;
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties
+  customStyle?: CSSProperties;
 }
 
 export interface IImageEmits {
   /** 点击触发 */
-  (e: 'click'): void
+  (e: "click"): void;
   /** 图片加载错误触发 */
-  (e: 'error', err: Event): void
+  (e: "error", err: ImageOnErrorEvent): void;
   /** 图片加载中触发 */
-  (e: 'load', event: Event): void
+  (e: "load", event: ImageOnLoadEvent): void;
 }