hy-app 0.2.5 → 0.2.7

package/components/hy-float-button/hy-float-button.vue

@@ -10,6 +10,9 @@
       },
       `hy-float-button__${shape}`,
     ]"
+    @touchmove.stop.prevent="handleTouchMove"
+    @touchstart="handleTouchStart"
+    @touchend="handleTouchEnd"
   >
     <view
       :class="['hy-float-button__container']"
@@ -72,7 +75,8 @@ import { computed, type CSSProperties, getCurrentInstance, onMounted, ref, toRef
 import type IProps from './typing'
 import type { MenusType } from './typing'
 import defaultProps from './props'
-import { addUnit, getPx, getRect, getWindowInfo, guid } from '../../utils'
+import { addUnit, getPx, getRect, guid, isH5 } from '../../utils'
+import { HyApp } from '../../typing/modules/common'
 
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
@@ -82,8 +86,7 @@ const props = withDefaults(defineProps<IProps>(), defaultProps)
 const {
   menus,
   customStyle,
-  left,
-  bottom,
+  gap,
   zIndex,
   bgColor,
   text,
@@ -91,6 +94,9 @@ const {
   size,
   fixed,
   direction,
+  draggable,
+  position,
+  expandable,
 } = toRefs(props)
 const emit = defineEmits(['click', 'clickItem'])
 
@@ -103,7 +109,94 @@ const btnSize: AnyObject = {
 const open = ref(false)
 const rotate = computed(() => (open.value && !text.value ? '45deg' : '0deg'))
 const soleId = `hy-float-button__${guid()}`
-const showLeft = ref(false)
+const fabSize = reactive({ width: 0, height: 0 }) // 悬浮按钮大小
+const screen = reactive({ width: 0, height: 0 })
+const currentCoordinate = reactive({
+  top: 0,
+  left: 0,
+})
+// 按下时坐标相对于元素的偏移量
+const touchOffset = reactive({ x: 0, y: 0 })
+const attractTransition = ref<boolean>(false)
+const fabDirection = ref<HyApp.LeftRightType>('left')
+const fabDirection2 = ref<HyApp.TopBottomType>('top')
+const bounding = reactive({
+  minLeft: 10,
+  minTop: 10,
+  maxLeft: 380,
+  maxTop: 680,
+})
+
+onMounted(async () => {
+  await getFatRect()
+  await getBounding()
+  initPosition()
+})
+
+watch(
+  () => position.value,
+  () => initPosition(),
+)
+
+/**
+ * @description 初始化距离
+ * */
+const initPosition = () => {
+  const { minLeft, minTop, maxLeft, maxTop } = bounding
+  const centerY = (maxTop + minTop) / 2
+  const centerX = (maxLeft + minLeft) / 2
+
+  switch (position.value) {
+    case 'left-top':
+      currentCoordinate.top = minTop
+      currentCoordinate.left = minLeft
+      fabDirection.value = 'left'
+      fabDirection2.value = 'top'
+      break
+    case 'right-top':
+      currentCoordinate.top = minTop
+      currentCoordinate.left = maxLeft
+      fabDirection.value = 'right'
+      fabDirection2.value = 'top'
+      break
+    case 'left-bottom':
+      currentCoordinate.top = maxTop
+      currentCoordinate.left = minLeft
+      fabDirection.value = 'left'
+      fabDirection2.value = 'bottom'
+      break
+    case 'right-bottom':
+      currentCoordinate.top = maxTop
+      currentCoordinate.left = maxLeft
+      fabDirection.value = 'right'
+      fabDirection2.value = 'bottom'
+      break
+    case 'left-center':
+      currentCoordinate.top = centerY
+      currentCoordinate.left = minLeft
+      fabDirection.value = 'left'
+      fabDirection2.value = 'bottom'
+      break
+    case 'right-center':
+      currentCoordinate.top = centerY
+      currentCoordinate.left = maxLeft
+      fabDirection.value = 'right'
+      fabDirection2.value = 'bottom'
+      break
+    case 'top-center':
+      currentCoordinate.top = minTop
+      currentCoordinate.left = centerX
+      fabDirection.value = 'left'
+      fabDirection2.value = 'top'
+      break
+    case 'bottom-center':
+      currentCoordinate.top = maxTop
+      currentCoordinate.left = centerX
+      fabDirection.value = 'left'
+      fabDirection2.value = 'bottom'
+      break
+  }
+}
 
 /**
  * @description 获取组件大小
@@ -121,11 +214,12 @@ const getFloatBtnSize = computed(() => {
  * */
 const FloatButtonStyle = computed(() => {
   const style: CSSProperties = {
-    bottom: addUnit(bottom.value),
-    left: addUnit(left.value),
+    top: currentCoordinate.top + 'px',
+    left: currentCoordinate.left + 'px',
     backgroundColor: bgColor.value,
     zIndex: zIndex.value,
     color: textColor.value,
+    transition: 'all ease 0.3s',
   }
   if (fixed.value) style.position = 'fixed'
 
@@ -140,7 +234,7 @@ const menusStyle = computed(() => {
 
   // 判断横向展示还是纵向展示
   if (direction.value === 'row') {
-    if (showLeft.value) {
+    if (fabDirection.value === 'right') {
       style.transform = 'translateX(-100%)'
       style.left = '100%'
       style.paddingRight = getFloatBtnSize.value
@@ -155,32 +249,47 @@ const menusStyle = computed(() => {
       ? addUnit(getPx(getFloatBtnSize.value) * menus.value.length + getPx(getFloatBtnSize.value))
       : 0
   } else {
-    style.bottom = 0
-    style.left = 0
+    if (fabDirection2.value === 'top') {
+      style.transform = 'translateX(-100%)'
+      style.height = '100%'
+      style.left = getFloatBtnSize.value
+      style.top = '0px'
+      style.paddingTop = getFloatBtnSize.value
+    } else {
+      style.paddingBottom = getFloatBtnSize.value
+      style.bottom = 0
+    }
     style.transition = 'height 0.5s ease'
     style.width = getFloatBtnSize.value
     style.height = open.value
       ? addUnit(getPx(getFloatBtnSize.value) * menus.value.length + getPx(getFloatBtnSize.value))
       : 0
-    style.paddingBottom = getFloatBtnSize.value
   }
   return style
 })
 
-onMounted(() => {
-  const { windowWidth } = getWindowInfo()
-  getRect(`#${soleId}`, false, instance).then((rect) => {
-    const { left } = rect as UniApp.NodeInfo
-    if (left && left > windowWidth / 2) showLeft.value = true
+/**
+ * @description 获取悬浮按钮大小
+ * */
+const getFatRect = () => {
+  return new Promise((resolve, reject) => {
+    getRect(`#${soleId}`, false, instance).then((rect) => {
+      const { width, height } = rect as UniApp.NodeInfo
+      fabSize.width = width
+      fabSize.height = height
+      resolve(rect)
+    })
   })
-})
+}
 
 /**
  * @description 点击悬浮按钮
  * */
 const handleClick = () => {
   emit('click')
-  open.value = !open.value
+  if (expandable.value) {
+    open.value = !open.value
+  }
 }
 
 /**
@@ -195,6 +304,63 @@ const handleMenuItemClick = (temp: MenusType, index: number) => {
     })
   }
 }
+
+const getBounding = () => {
+  return new Promise((resolve) => {
+    const sysInfo = uni.getSystemInfoSync()
+
+    const { top = 16, left = 16, right = 16, bottom = 16 } = gap.value
+    screen.width = sysInfo.windowWidth
+    screen.height = isH5 ? sysInfo.windowTop + sysInfo.windowHeight : sysInfo.windowHeight
+    bounding.minTop = isH5 ? sysInfo.windowTop + top : top
+    bounding.minLeft = left
+    bounding.maxLeft = screen.width - fabSize.width - right
+    bounding.maxTop = screen.height - fabSize.height - bottom
+    resolve(bounding)
+  })
+}
+
+const handleTouchStart = (e: TouchEvent) => {
+  if (!draggable.value) return
+
+  const touch = e.touches[0]
+  touchOffset.x = touch.clientX - getPx(currentCoordinate.left)
+  touchOffset.y = touch.clientY - getPx(currentCoordinate.top)
+  attractTransition.value = false
+}
+
+function handleTouchMove(e: TouchEvent) {
+  if (!draggable.value) return
+
+  const touch = e.touches[0]
+  const { minLeft, minTop, maxLeft, maxTop } = bounding
+  let x = touch.clientX - touchOffset.x
+  let y = touch.clientY - touchOffset.y
+
+  if (x < minLeft) x = minLeft
+  else if (x > maxLeft) x = maxLeft
+
+  if (y < minTop) y = minTop
+  else if (y > maxTop) y = maxTop
+
+  currentCoordinate.top = y
+  currentCoordinate.left = x
+}
+
+function handleTouchEnd() {
+  if (props.draggable === false) return
+
+  const screenCenterX = screen.width / 2
+  const fabCenterX = currentCoordinate.left + fabSize.width / 2
+  attractTransition.value = true
+  if (fabCenterX < screenCenterX) {
+    currentCoordinate.left = bounding.minLeft
+    fabDirection.value = 'left'
+  } else {
+    currentCoordinate.left = bounding.maxLeft
+    fabDirection.value = 'right'
+  }
+}
 </script>
 
 <style scoped lang="scss">

package/components/hy-float-button/props.ts

@@ -1,25 +1,27 @@
-import type IProps from "./typing";
-import { IconConfig } from "../../config";
+import type IProps from './typing'
+import { IconConfig } from '../../config'
 
 const defaultProps: IProps = {
   menus: [],
-  direction: "column",
+  direction: 'column',
   icon: IconConfig.PLUS,
-  iconSize: "",
-  iconColor: "",
-  bottom: 80,
-  left: 20,
+  iconSize: '',
+  iconColor: '',
+  gap: { left: 16, right: 16, top: 16, bottom: 40 },
   zIndex: 10086,
-  bgColor: "",
-  text: "",
-  fontSize: "12px",
-  textColor: "",
-  size: "medium",
-  shape: "circle",
+  bgColor: '',
+  text: '',
+  fontSize: '12px',
+  textColor: '',
+  size: 'medium',
+  shape: 'circle',
   opacity: 1,
   shadow: true,
   float: true,
   fixed: true,
-};
+  draggable: true,
+  position: 'right-bottom',
+  expandable: true,
+}
 
-export default defaultProps;
+export default defaultProps

package/components/hy-float-button/typing.d.ts

@@ -1,93 +1,117 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 interface MenusVo {
   /**
    * @description 显示菜单文本
    * */
-  label?: string;
+  label?: string
   /**
    * @description 跳转路径
    * */
-  url?: string;
+  url?: string
 }
 
-export type MenusType = MenusVo | string;
+export type MenusType = MenusVo | string
+export type IGap = {
+  left?: number
+  right?: number
+  top?: number
+  bottom?: number
+}
+
+export type FloatPositionVo =
+  | 'left-top'
+  | 'left-bottom'
+  | 'right-top'
+  | 'right-bottom'
+  | 'left-center'
+  | 'right-center'
+  | 'top-center'
+  | 'bottom-center'
 
 export default interface HyFloatButtonProps {
   /**
    * @description 菜单栏集合
    * */
-  menus?: MenusType[];
+  menus?: MenusType[]
   /**
    * @description 打开方向，row-横向；column-纵向
    * */
-  direction?: HyApp.DirectionType;
+  direction?: HyApp.DirectionType
   /**
    * @description 按钮显示的图标
    * */
-  icon?: string;
+  icon?: string
   /**
    * @description 按钮图标大小
    * */
-  iconSize?: string | number;
+  iconSize?: string | number
   /**
    * @description 按钮图标颜色
    * */
-  iconColor?: string;
+  iconColor?: string
   /**
-   * @description 按钮距离底部的距离，默认单位为px
+   * @description 到边框最小距离
    * */
-  bottom?: number | string;
-  /**
-   * @description 按钮距离左边的距离，默认单位为px
-   * */
-  left?: number | string;
+  gap?: IGap
   /**
    * @description 层级（默认：10086）
    * */
-  zIndex?: number;
+  zIndex?: number
   /**
    * @description 按钮背景颜色
    * */
-  bgColor?: string;
+  bgColor?: string
   /**
    * @description 按钮文字
    * */
-  text?: string;
+  text?: string
   /**
    * @description 按钮文字大小
    * */
-  fontSize?: string | number;
+  fontSize?: string | number
   /**
    * @description 按钮文字的颜色
    * */
-  textColor?: string;
+  textColor?: string
   /**
    * @description 按钮的尺寸
    * */
-  size?: HyApp.SizeType | string | number;
+  size?: HyApp.SizeType | string | number
   /**
    * @description 按钮的形状
    * */
-  shape?: HyApp.ShapeType;
+  shape?: HyApp.ShapeType
   /**
    * @description 按钮的透明度
    * */
-  opacity?: number;
+  opacity?: number
   /**
    * @description 是否显示阴影（默认：true）
    * */
-  shadow?: boolean;
+  shadow?: boolean
   /**
    * @description 是否显示漂浮的动画（默认：true）
    * */
-  float?: boolean;
+  float?: boolean
   /**
    * @description 是否固定位置（默认：true）
    * */
-  fixed?: boolean;
+  fixed?: boolean
+  /**
+   * @description 是否能拖动（默认：true）
+   * */
+  draggable?: boolean
+  /**
+   * @description 悬浮按钮位置 （默认：right-bottom）
+   * */
+  position?: FloatPositionVo
+  /**
+   * @description 禁用点击打开菜单栏
+   * */
+  expandable?: boolean
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
 }

package/components/hy-icon/hy-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="hy-icon" @tap="clickHandler" :class="[`hy-icon--${labelPos}`]">
+  <view :class="`hy-icon ${customClass} hy-icon--${labelPos}`" @tap="clickHandler">
     <image
       class="hy-icon__img"
       v-if="isImg"
@@ -7,12 +7,7 @@
       :mode="imgMode"
       :style="[imgStyle, customStyle]"
     ></image>
-    <text
-      v-else
-      class="hy-icon__icon"
-      :class="uClasses"
-      :style="[iconStyle, customStyle]"
-    ></text>
+    <text v-else class="hy-icon__icon" :class="uClasses" :style="[iconStyle, customStyle]"></text>
     <!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
     <text
       v-if="label !== ''"
@@ -23,8 +18,9 @@
         marginLeft: labelPos == 'right' ? addUnit(space) : 0,
         marginTop: labelPos == 'bottom' ? addUnit(space) : 0,
       }"
-      >{{ label }}</text
     >
+      {{ label }}
+    </text>
   </view>
 </template>
 
@@ -34,18 +30,18 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, toRefs } from "vue";
-import { addUnit } from "../../utils";
-import defaultProps from "./props";
-import type IProps from "./typing";
+import { computed, type CSSProperties, toRefs } from 'vue'
+import { addUnit } from '../../utils'
+import defaultProps from './props'
+import type IProps from './typing'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = withDefaults(defineProps<IProps>(), defaultProps)
 const {
   customPrefix,
   name,
@@ -59,66 +55,68 @@ const {
   index,
   isRotate,
   round,
-} = toRefs(props);
-const emit = defineEmits(["click"]);
+  customClass,
+  customStyle,
+} = toRefs(props)
+const emit = defineEmits(['click'])
 
 const uClasses = computed(() => {
   let classes: string | string[] = [
-    "iconfont",
+    'iconfont',
     `${customPrefix.value}-${name.value}`,
     customPrefix.value,
-  ];
-  if (isRotate.value) classes.push("hy-rotate");
+  ]
+  if (isRotate.value) classes.push('hy-rotate')
   if (color.value)
     // 主题色，通过类配置
-    classes.push("hy-icon__icon--" + color.value);
+    classes.push('hy-icon__icon--' + color.value)
   // 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
   // 故需将其拆成一个字符串的形式，通过空格隔开各个类名
   //#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
-  classes = classes.join(" ");
+  classes = classes.join(' ')
   //#endif
-  return classes;
-});
+  return classes
+})
 const iconStyle = computed<CSSProperties>(() => {
-  let style: CSSProperties = {};
+  let style: CSSProperties = {}
   style = {
     fontSize: addUnit(size.value),
     lineHeight: addUnit(size.value),
-    fontWeight: bold.value ? "bold" : "normal",
+    fontWeight: bold.value ? 'bold' : 'normal',
     // 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
     top: addUnit(top.value),
     borderRadius: addUnit(round.value),
     color: color.value,
-  };
+  }
 
-  return style;
-});
+  return style
+})
 
 /**
  * @description 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
  * */
 const isImg = computed(() => {
-  return name.value.indexOf("/") !== -1;
-});
+  return name.value.indexOf('/') !== -1
+})
 const imgStyle = computed((): CSSProperties => {
-  let style: CSSProperties = {};
+  let style: CSSProperties = {}
   // 如果设置width和height属性，则优先使用，否则使用size属性
-  style.width = width.value ? addUnit(width.value) : addUnit(size.value);
-  style.height = height.value ? addUnit(height.value) : addUnit(size.value);
-  style.borderRadius = addUnit(round.value);
-  return style;
-});
+  style.width = width.value ? addUnit(width.value) : addUnit(size.value)
+  style.height = height.value ? addUnit(height.value) : addUnit(size.value)
+  style.borderRadius = addUnit(round.value)
+  return style
+})
 
 /**
  * @description 点击
  * */
 const clickHandler = (e: any) => {
-  emit("click", index.value, e);
+  emit('click', index.value, e)
   // 是否阻止事件冒泡
-  stop.value && e.stopPropagation();
-};
+  stop.value && e.stopPropagation()
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-icon/props.ts

@@ -1,24 +1,25 @@
-import type IProps from "./typing";
+import type IProps from './typing'
 
 const defaultProps: IProps = {
-  name: "",
-  color: "",
-  size: "20px",
+  name: '',
+  color: '',
+  size: '20px',
   bold: false,
-  index: "",
-  customPrefix: "hy-icon",
-  label: "",
-  labelPos: "right",
-  labelSize: "",
-  labelColor: "",
-  space: "2px",
-  imgMode: "",
-  width: "",
-  height: "",
+  index: '',
+  customPrefix: 'hy-icon',
+  label: '',
+  labelPos: 'right',
+  labelSize: '',
+  labelColor: '',
+  space: '2px',
+  imgMode: '',
+  width: '',
+  height: '',
   top: 0,
   stop: false,
   isRotate: false,
   round: 0,
-};
+  customClass: '',
+}
 
-export default defaultProps;
+export default defaultProps