hy-app 0.2.13 → 0.2.15

package/components/hy-notice-bar/hy-notice-bar.vue

@@ -44,48 +44,126 @@
 </template>
 
 <script lang="ts">
+/**
+ * 该组件用于滚动通告场景，有多种模式可供选择
+ * @displayName hy-notice-bar
+ */
+defineOptions({})
 export default {
   name: 'hy-notice-bar',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { ref, toRefs } from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
+import { ref, toRefs } from 'vue'
+import type { INoticeBarEmits } from './typing'
+import { IconConfig } from '../../config'
+
 // 组件
-import HyRowNotice from "./hy-row-notice.vue";
-import HyColumnNotice from "./hy-column-notice.vue";
+import HyRowNotice from './hy-row-notice.vue'
+import HyColumnNotice from './hy-column-notice.vue'
 
-const show = ref(true);
+const show = ref(true)
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { mode, linkType, url } = toRefs(props);
-const emit = defineEmits(["click", "close"]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = defineProps({
+  /** 显示的内容，数组 */
+  text: {
+    type: [String, Array],
+    default: [],
+  },
+  /**
+   * 通告滚动模式，row-横向滚动，column-竖向滚动
+   * @values row,column
+   * */
+  direction: {
+    type: String,
+    default: 'row',
+  },
+  /** direction = row时，是否使用步进形式滚动  */
+  step: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否显示左侧的音量图标 */
+  icon: {
+    type: String,
+    default: IconConfig.NOTIFICATION_FILL,
+  },
+  /**
+   * 通告模式，link-显示右箭头，closable-显示右侧关闭图标
+   * @values link,closable
+   * */
+  mode: String,
+  /** 文字颜色，各图标也会使用文字颜色 */
+  color: String,
+  /** 背景颜色 */
+  bgColor: String,
+  /** 水平滚动时的滚动速度，即每秒滚动多少px(px)，这有利于控制文字无论多少时，都能有一个恒定的速度 */
+  speed: {
+    type: Number,
+    default: 80,
+  },
+  /** 字体大小，单位px */
+  fontSize: {
+    type: [String, Number],
+    default: 14,
+  },
+  /** 滚动一个周期的时间长，单位ms */
+  duration: {
+    type: Number,
+    default: 2000,
+  },
+  /** 是否禁止用手滑动切换 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序 */
+  disableTouch: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 分布
+   * @values flex-start,flex-start,center
+   * */
+  justifyContent: {
+    type: String,
+    default: 'flex-start',
+  },
+  /**
+   * 跳转类型
+   * @values navigateTo,redirectTo,switchTab,reLaunch
+   * */
+  linkType: {
+    type: String,
+    default: 'navigateTo',
+  },
+  /** 跳转地址 */
+  url: String,
+})
+const { mode, linkType, url } = toRefs(props)
+const emit = defineEmits<INoticeBarEmits>()
 
 /**
  * @description 点击通告栏
  * */
 const click = (index: number) => {
-  emit("click", index);
-  if (url.value && linkType.value && mode.value === "link") {
-    (uni as any)[linkType.value]({ url: url.value });
+  emit('click', index)
+  if (url.value && linkType.value && mode.value === 'link') {
+    ;(uni as any)[linkType.value]({ url: url.value })
   }
-};
+}
 /**
  * @description 点击关闭按钮
  * */
 const close = () => {
-  show.value = false;
-  emit("close");
-};
+  show.value = false
+  emit('close')
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-notice-bar/typing.d.ts

@@ -1,66 +1,71 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
-export type NoticeBarModeVo = "closable" | "link" | "";
+export type NoticeBarModeVo = 'closable' | 'link' | ''
 
 export default interface HyNoticeBarProps {
   /**
    * @description 显示的内容，数组
    * */
-  text: string[] | string;
+  text: string[] | string
   /**
    * @description 通告滚动模式，row-横向滚动，column-竖向滚动 ( 默认 'row' )
    * */
-  direction?: HyApp.DirectionType;
+  direction?: HyApp.DirectionType
   /**
    * @description direction = row时，是否使用步进形式滚动  ( 默认 false )
    * */
-  step?: boolean;
+  step?: boolean
   /**
    * @description 是否显示左侧的音量图标 ( 默认 'volume' )
    * */
-  icon?: string | HyIconConfig;
+  icon?: string | HyIconConfig
   /**
    * @description 通告模式，link-显示右箭头，closable-显示右侧关闭图标
    * */
-  mode?: NoticeBarModeVo;
+  mode?: NoticeBarModeVo
   /**
    * @description 文字颜色，各图标也会使用文字颜色 ( 默认 '#f9ae3d' )
    * */
-  color?: string;
+  color?: string
   /**
    * @description 背景颜色 ( 默认 '#fdf6ec' )
    * */
-  bgColor?: string;
+  bgColor?: string
   /**
    * @description 水平滚动时的滚动速度，即每秒滚动多少px(px)，这有利于控制文字无论多少时，都能有一个恒定的速度 ( 默认 80 )
    * */
-  speed?: number;
+  speed?: number
   /**
    * @description 字体大小 ( 默认 14 )
    * */
-  fontSize?: number | string;
+  fontSize?: number | string
   /**
    * @description 滚动一个周期的时间长，单位ms ( 默认 2000 )
    * */
-  duration?: number;
+  duration?: number
   /**
    * @description 是否禁止用手滑动切换 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序（默认34） ( 默认 true )
    * */
-  disableTouch?: boolean;
+  disableTouch?: boolean
   /**
    * @description 分布
    * */
-  justifyContent?: HyApp.JustifyContentType;
+  justifyContent?: HyApp.JustifyContentType
   /**
    * @description 跳转类型
    * */
-  linkType?: HyApp.NavigationType;
+  linkType?: HyApp.NavigationType
   /**
    * @description 跳转地址
    * */
-  url?: string;
+  url?: string
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export interface INoticeBarEmits {
+  (e: 'click', index: number): void
+  (e: 'close'): void
 }

package/components/hy-notify/hy-notify.vue

@@ -1,8 +1,7 @@
 <template>
   <hy-transition mode="slide-down" :customStyle="containerStyle" :show="open">
     <view
-      class="hy-notify"
-      :class="[`hy-notify--${tmpConfig?.type}`]"
+      :class="['hy-notify', `hy-notify--${tmpConfig?.type}`, customClass]"
       :style="[backgroundColor, customStyle]"
     >
       <hy-status-bar v-if="tmpConfig?.safeAreaInsetTop"></hy-status-bar>
@@ -22,36 +21,90 @@
             fontSize: addUnit(tmpConfig?.fontSize),
             color: tmpConfig?.color,
           }"
-          >{{ tmpConfig?.message }}</text
         >
+          {{ tmpConfig?.message }}
+        </text>
       </view>
     </view>
   </hy-transition>
 </template>
 
 <script lang="ts">
+/**
+ * 一般用于页面顶部向下滑出一个提示，尔后自动收起的场景。
+ * @displayName hy-notify
+ */
+defineOptions({})
 export default {
-  name: "hy-notify",
+  name: 'hy-notify',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: "shared",
+    styleIsolation: 'shared',
   },
-};
+}
 </script>
 
 <script setup lang="ts">
-import type IProps from "./typing";
-import defaultProps from "./props";
-import { computed, type CSSProperties, ref } from "vue";
-import { addUnit } from "../../utils";
+import type IProps from './typing'
+import { computed, ref } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import { IconConfig } from '../../config'
+
+import { addUnit } from '../../utils'
 // 组件
-import HyTransition from "../hy-transition/hy-transition.vue";
-import HyStatusBar from "../hy-status-bar/hy-status-bar.vue";
-import HyIcon from "../hy-icon/hy-icon.vue";
-import { IconConfig } from "@/package";
+import HyTransition from '../hy-transition/hy-transition.vue'
+import HyStatusBar from '../hy-status-bar/hy-status-bar.vue'
+import HyIcon from '../hy-icon/hy-icon.vue'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 到顶部的距离 */
+  top: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * 主题
+   * @values primary,success,warning,error,info
+   * */
+  type: {
+    type: String,
+    default: 'primary',
+  },
+  /** 字体颜色 */
+  color: {
+    type: String,
+    default: '#FFFFFF',
+  },
+  /** 背景颜色 */
+  bgColor: String,
+  /** 图标名称 */
+  icon: String,
+  /** 展示的文字内容 */
+  message: String,
+  /** 展示时长，为0时不消失，单位ms */
+  duration: {
+    type: Number,
+    default: 3000,
+  },
+  /** 字体大小 */
+  fontSize: {
+    type: [Number, String],
+    default: 15,
+  },
+  /** 是否留出顶部安全距离 */
+  safeAreaInsetTop: {
+    type: Boolean,
+    default: false,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
 
 const config = ref<IProps>({
   // 到顶部的距离
@@ -70,100 +123,99 @@ const config = ref<IProps>({
   fontSize: props.fontSize,
   // 是否留出顶部安全距离（状态栏高度）
   safeAreaInsetTop: props.safeAreaInsetTop,
-});
-const tmpConfig = ref<IProps>({});
-const open = ref(false);
-let timer: ReturnType<typeof setTimeout>;
+})
+const tmpConfig = ref<IProps>({})
+const open = ref(false)
+let timer: ReturnType<typeof setTimeout>
 
 /**
  * @description 容器样式
  * */
 const containerStyle = computed(() => {
-  let top = 0;
+  let top = 0
   if (tmpConfig.value.top === 0) {
     // #ifdef H5
     // H5端，导航栏为普通元素，需要将组件移动到导航栏的下边沿
     // H5的导航栏高度为44px
-    top = 44;
+    top = 44
     // #endif
   }
   const style: CSSProperties = {
     top: addUnit(tmpConfig.value.top === 0 ? top : tmpConfig.value.top),
     // 因为组件底层为hy-transition组件，必须将其设置为fixed定位
     // 让其出现在导航栏底部
-    position: "fixed",
+    position: 'fixed',
     left: 0,
     right: 0,
     zIndex: 10076,
-  };
-  return style;
-});
+  }
+  return style
+})
 /**
  * @description 组件背景颜色
  */
 const backgroundColor = computed(() => {
-  const style: CSSProperties = {};
+  const style: CSSProperties = {}
   if (tmpConfig.value.bgColor) {
-    style.backgroundColor = tmpConfig.value.bgColor;
+    style.backgroundColor = tmpConfig.value.bgColor
   }
-  return style;
-});
+  return style
+})
 
 /**
  * @description 默认主题下的图标
  * */
 const icon = computed(() => {
-  let icon;
+  let icon
   switch (tmpConfig.value.type) {
-    case "success":
-      return IconConfig.SUCCESS;
-    case "error":
-      return IconConfig.CLOSE_CIRCLE;
-    case "warning":
-      return IconConfig.NOTICE;
+    case 'success':
+      return IconConfig.SUCCESS
+    case 'error':
+      return IconConfig.CLOSE_CIRCLE
+    case 'warning':
+      return IconConfig.NOTICE
     default:
-      return icon;
+      return icon
   }
-});
+})
 
 const show = (options: IProps) => {
   // 不将结果合并到this.config变量，避免多次调用hy-toast，前后的配置造成混乱
-  tmpConfig.value = Object.assign(config.value, options);
+  tmpConfig.value = Object.assign(config.value, options)
   // 任何定时器初始化之前，都要执行清除操作，否则可能会造成混乱
-  clearTimer();
-  open.value = true;
+  clearTimer()
+  open.value = true
   if (tmpConfig.value.duration && tmpConfig.value.duration! > 0) {
     timer = setTimeout(() => {
-      open.value = false;
+      open.value = false
       // 倒计时结束，清除定时器，隐藏toast组件
-      clearTimer();
+      clearTimer()
       // 判断是否存在callback方法，如果存在就执行
-      typeof tmpConfig.value.complete === "function" &&
-        tmpConfig.value.complete();
-    }, tmpConfig.value.duration);
+      typeof tmpConfig.value.complete === 'function' && tmpConfig.value.complete()
+    }, tmpConfig.value.duration)
   }
-};
+}
 /**
  * @description 关闭notify
  * */
 const close = () => {
-  clearTimer();
-};
+  clearTimer()
+}
 /**
  * @description 清除定时任务
  * */
 const clearTimer = () => {
-  open.value = false;
+  open.value = false
   // 清除定时器
-  clearTimeout(timer);
-};
+  clearTimeout(timer)
+}
 
 defineExpose({
   show,
   close,
-});
+})
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@import './index.scss';
 </style>