hy-app 0.2.5 → 0.2.7

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

@@ -1,80 +1,84 @@
-import { CSSProperties } from "vue";
+import { CSSProperties } from 'vue'
 
 export default interface HyIconProps {
   /**
    * @description 图标名称，见示例图标集
    * */
-  name: string | HyIconConfig;
+  name: string | HyIconConfig
   /**
    * @description 图标颜色
    * */
-  color?: string;
+  color?: string
   /**
    * @description 图标字体大小，单位px （默认 '16px' ）
    * */
-  size?: string | number;
+  size?: string | number
   /**
    * @description 是否显示粗体 （默认 false ）
    * */
-  bold?: boolean;
+  bold?: boolean
   /**
    * @description 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
    * */
-  index?: string | number;
+  index?: string | number
   /**
    * @description 自定义扩展前缀，方便用户扩展自己的图标库 （默认 'hy-icon' ）
    * */
-  customPrefix?: string;
+  customPrefix?: string
   /**
    * @description 图标右侧的label文字
    * */
-  label?: string;
+  label?: string
   /**
    * @description label相对于图标的位置，只能right或bottom （默认 'right' ）
    * */
-  labelPos?: "right" | "bottom";
+  labelPos?: 'right' | 'bottom'
   /**
    * @description label字体大小，单位px （默认 '15px' ）
    * */
-  labelSize?: string | number;
+  labelSize?: string | number
   /**
    * @description 图标右侧的label文字颜色
    * */
-  labelColor?: string;
+  labelColor?: string
   /**
    * @description label与图标的距离，单位px （默认 '3px' ）
    * */
-  space?: string | number;
+  space?: string | number
   /**
    * @description 图片的mode
    * */
-  imgMode?: string;
+  imgMode?: string
   /**
    * @description 显示图片小图标时的宽度
    * */
-  width?: string | number;
+  width?: string | number
   /**
    * @description 显示图片小图标时的高度
    * */
-  height?: string | number;
+  height?: string | number
   /**
    * @description 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途  （默认 0 ）
    * */
-  top?: number | string;
+  top?: number | string
   /**
    * @description 是否阻止事件传播 （默认 false ）
    * */
-  stop?: boolean;
+  stop?: boolean
   /**
    * @description 是否旋转 （默认 false ）
    * */
-  isRotate?: boolean;
+  isRotate?: boolean
   /**
    * @description 图标圆角
    * */
-  round?: string | number;
+  round?: string | number
   /**
    * @description 自定义样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+  /**
+   * @description 自定义类名
+   * */
+  customClass?: string
 }

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

@@ -1,15 +1,6 @@
 <template>
-  <HyTransition
-    mode="fade"
-    :show="show"
-    :style="transStyle"
-    :duration="fade ? 1000 : 0"
-  >
-    <view
-      class="hy-image box-border"
-      @tap="clickHandler"
-      :style="[wrapStyle, backgroundStyle]"
-    >
+  <HyTransition mode="fade" :show="show" :style="transStyle" :duration="fade ? 1000 : 0">
+    <view class="hy-image box-border" @tap="clickHandler" :style="[wrapStyle, backgroundStyle]">
       <image
         v-if="!isError"
         :src="src"
@@ -18,11 +9,11 @@
         @load="onLoadHandler"
         :show-menu-by-longpress="showMenuByLongPress"
         :lazy-load="lazyLoad"
-        class="hy-image__image"
+        :class="['hy-image__url', indistinct && 'hy-image__indistinct']"
         :style="{
           width: addUnit(width),
           height: addUnit(height),
-          borderRadius: shape == 'circle' ? '10000px' : addUnit(radius),
+          borderRadius: shape == 'circle' ? '1000px' : addUnit(radius),
         }"
       ></image>
       <view
@@ -36,7 +27,7 @@
         }"
       >
         <slot name="loading">
-          <HyIcon :name="loadingIcon"></HyIcon>
+          <HyLoading :name="loadingIcon"></HyLoading>
         </slot>
       </view>
       <view
@@ -47,7 +38,7 @@
         }"
       >
         <slot name="error">
-          <HyIcon :name="errorIcon"></HyIcon>
+          <HyIcon :name="errorIcon" size="30"></HyIcon>
         </slot>
       </view>
     </view>
@@ -56,34 +47,27 @@
 
 <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,
-  type CSSProperties,
-  onMounted,
-  ref,
-  toRefs,
-  watch,
-} from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import { addUnit, getPx } from "../../utils";
+import { computed, type CSSProperties, onMounted, ref, toRefs, watch } from 'vue'
+import defaultProps from './props'
+import type IProps from './typing'
+import { addUnit, getPx } from '../../utils'
 
 // 组件
+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 HyTransition from "../hy-transition/hy-transition.vue";
-import HyIcon from "../hy-icon/hy-icon.vue";
-
-const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = withDefaults(defineProps<IProps>(), defaultProps)
 const {
   customStyle,
   duration,
@@ -95,133 +79,114 @@ const {
   radius,
   bgColor,
   previewImage,
-} = toRefs(props);
-const emit = defineEmits(["click", "error", "load"]);
+  indistinct,
+} = toRefs(props)
+const emit = defineEmits(['click', 'error', 'load'])
 
 // 图片是否加载错误，如果是，则显示错误占位图
-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(duration.value)
 // 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
-const backgroundStyle = ref({});
+const backgroundStyle = ref({})
 // 用于fade模式的控制组件显示与否
-const show = ref(false);
+const show = ref(false)
 
 watch(
   () => src.value,
   (newValue) => {
     if (!newValue) {
       // 如果传入null或者''，或者false，或者undefined，标记为错误状态
-      isError.value = true;
+      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 || width.value == '100%' || mode.value != 'heightFix') {
+    style.width = addUnit(width.value)
   } 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 || height.value == '100%' || mode.value != 'widthFix') {
+    style.height = addUnit(height.value)
   } 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 || width.value == '100%' || mode.value != 'heightFix') {
+    style.width = addUnit(width.value)
   } 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 || height.value == '100%' || mode.value != 'widthFix') {
+    style.height = addUnit(height.value)
   } else {
-    style.height = "fit-content";
+    style.height = 'fit-content'
   }
   // 如果是显示圆形，设置一个很多的半径值即可
-  style.borderRadius =
-    shape.value == "circle" ? "10000px" : addUnit(radius.value);
+  style.borderRadius = shape.value == 'circle' ? '10000px' : addUnit(radius.value)
   // 如果设置圆角，必须要有hidden，否则可能圆角无效
-  style.overflow = getPx(radius.value) > 0 ? "hidden" : "visible";
+  style.overflow = getPx(radius.value) > 0 ? 'hidden' : 'visible'
 
-  return Object.assign(style, customStyle.value);
-});
+  return Object.assign(style, customStyle.value)
+})
 
 onMounted(() => {
-  show.value = true;
-});
+  show.value = true
+})
 
 const clickHandler = () => {
-  emit("click");
+  emit('click')
 
   if (previewImage.value) {
     uni.previewImage({
       urls: [src.value],
-    });
+    })
   }
-};
+}
 
 /**
  * @description 图片加载失败
  * */
 const onErrorHandler = (err: Event) => {
-  loading.value = false;
-  isError.value = true;
-  emit("error", err);
-};
+  loading.value = false
+  isError.value = true
+  emit('error', err)
+}
 
 /**
  * @description 图片加载成功
  * */
 const onLoadHandler = (e: Event) => {
-  loading.value = false;
-  isError.value = false;
-  emit("load", e);
-  removeBgColor();
-};
+  loading.value = false
+  isError.value = false
+  emit('load', e)
+  removeBgColor()
+}
 
 const removeBgColor = () => {
   // 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
   backgroundStyle.value = {
-    backgroundColor: bgColor.value || "",
-  };
-};
+    backgroundColor: bgColor.value || '',
+  }
+}
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-image/index.scss

@@ -4,14 +4,31 @@
 @include b(image) {
   position: relative;
   transition: opacity 0.5s ease-in-out;
+  width: 250px;
+  height: 200px;
 
-  &__image {
+  @include e(url) {
     width: 100%;
     height: 100%;
   }
+  @include e(indistinct) {
+    position: relative;
+    @include pseudo(after) {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.2); /* 半透明背景 */
+      backdrop-filter: blur(6px); /* 磨砂效果 */
+      filter: blur(6px);
+      -webkit-filter: blur(6px); /* 兼容 iOS */
+      z-index: 999;
+    }
+  }
 
-  &__loading,
-  &__error {
+  @include e(loading, error) {
     position: absolute;
     top: 0;
     left: 0;
@@ -22,6 +39,5 @@
     justify-content: center;
     background-color: $hy-background--empty;
     color: $hy-text-color--grey;
-    font-size: 46px;
   }
-}
+}

package/components/hy-image/props.ts

@@ -1,12 +1,12 @@
-import type IProps from "./typing";
-import { IconConfig } from "../../config";
+import type IProps from './typing'
+import { IconConfig } from '../../config'
 
 const defaultProps: IProps = {
-  src: "",
-  mode: "aspectFill",
-  width: "200",
-  height: "150",
-  shape: "square",
+  src: '',
+  mode: 'aspectFill',
+  width: '',
+  height: '',
+  shape: 'square',
   radius: 0,
   lazyLoad: true,
   showMenuByLongPress: true,
@@ -17,8 +17,9 @@ const defaultProps: IProps = {
   fade: true,
   webp: false,
   duration: 500,
-  bgColor: "",
+  bgColor: '',
+  indistinct: false,
   previewImage: false,
-};
+}
 
-export default defaultProps;
+export default defaultProps

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

@@ -1,76 +1,80 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 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
   /**
    * @description 是否预览图片  (默认 false )
    * */
-  previewImage?: boolean;
+  previewImage?: boolean
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
 }