hy-app 0.3.0 → 0.3.2

package/components/hy-slider/hy-slider.vue

@@ -4,14 +4,17 @@
       <view
         ref="hy-slider-inner"
         class="hy-slider-inner"
-        @click="onClick"
+        @tap="onClick"
         @onTouchStart="onTouchStart2($event, 1)"
         @touchmove="onTouchMove2($event, 1)"
         @touchend="onTouchEnd2($event, 1)"
         @touchcancel="onTouchEnd2($event, 1)"
         :class="[disabled ? 'hy-slider--disabled' : '']"
         :style="{
-          height: isRange && showValue ? addUnit(getPx(blockSize) + 24) : addUnit(blockSize),
+          height:
+            isRange && showValue
+              ? addUnit(getPx(blockSize) + 24)
+              : addUnit(blockSize),
         }"
       >
         <view
@@ -25,7 +28,7 @@
           ]"
         ></view>
         <view
-          @click="onClick"
+          @tap="onClick"
           class="hy-slider__gap"
           :style="[
             barStyle,
@@ -118,7 +121,9 @@
           ></view>
         </view>
       </view>
-      <view class="hy-slider__show-value" v-if="showValue && !isRange">{{ modelValue }}</view>
+      <view class="hy-slider__show-value" v-if="showValue && !isRange">{{
+        modelValue
+      }}</view>
     </template>
     <slider
       class="hy-slider__native"
@@ -129,7 +134,7 @@
       :value="modelValue"
       :activeColor="activeColor"
       :backgroundColor="inactiveColor"
-      :blockSize="addUnit(blockSize)"
+      :blockSize="blockSize"
       :blockColor="blockColor"
       :showValue="showValue"
       :disabled="disabled"
@@ -141,26 +146,37 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-slider',
+  name: "hy-slider",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, getCurrentInstance, onMounted, ref, toRefs, watch } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import { addUnit, error, getRect, getPx } from '../../utils'
-import type { ISliderEmits } from './typing'
+import {
+  computed,
+  getCurrentInstance,
+  onMounted,
+  ref,
+  toRefs,
+  watch,
+} from "vue";
+import type { CSSProperties, PropType } from "vue";
+import { addUnit, error, getRect, getPx } from "../../utils";
+import type { ISliderEmits } from "./typing";
+import type {
+  MovableViewOnChange,
+  SliderOnChangingEvent,
+} from "@uni-helper/uni-types";
 
 /**
  * 一般用于表单中，手动选择一个区间范围的场景。
  * @displayName hy-slider
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
@@ -171,7 +187,7 @@ const props = defineProps({
   },
   /** 滑块的大小，取值范围为 12 - 28 */
   blockSize: {
-    type: [String, Number],
+    type: Number,
     default: 18,
   },
   /** 最小值 */
@@ -235,261 +251,287 @@ const props = defineProps({
   },
   /** 自定义外部类名 */
   customClass: String,
-})
-const { modelValue, rangeValue, useNative, isRange, disabled, step, min, max } = toRefs(props)
-const emit = defineEmits<ISliderEmits>()
+});
+const emit = defineEmits<ISliderEmits>();
 
-const startX = ref(0)
-const status = ref('end')
-const newValue = ref(0)
-const distanceX = ref(0)
-const startValue0 = ref(0)
-const startValue = ref(0)
-const barStyle0 = ref<CSSProperties>()
-const barStyle = ref<CSSProperties>()
+const startX = ref(0);
+const status = ref("end");
+const newValue = ref(0);
+const distanceX = ref(0);
+const startValue0 = ref(0);
+const startValue = ref(0);
+const barStyle0 = ref<CSSProperties>();
+const barStyle = ref<CSSProperties>();
 const sliderRect = ref<UniNamespace.NodeInfo>({
   left: 0,
   width: 0,
-})
-const instance = getCurrentInstance()
+});
+const instance = getCurrentInstance();
 
 const blockLeft = computed(() => {
-  return (slideWidth: string | number | undefined, blockWidth: string | number): string => {
+  return (
+    slideWidth: string | number | undefined,
+    blockWidth: string | number,
+  ): string => {
     if (slideWidth) {
-      return addUnit(getPx(slideWidth) + getPx(blockWidth) / 2)
+      return addUnit(getPx(slideWidth) + getPx(blockWidth) / 2);
     }
-    return '0px'
-  }
-})
+    return "0px";
+  };
+});
 
 watch(
-  () => modelValue.value,
+  () => props.modelValue,
   (newValue) => {
     // 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
-    if (status.value === 'end') updateValue(newValue, false)
+    if (status.value === "end") updateValue(newValue, false);
   },
-)
+);
 
 watch(
-  () => rangeValue.value,
+  () => props.rangeValue,
   (newValue) => {
-    if (status.value === 'end') {
-      updateValue(newValue[0], false, 0)
-      updateValue(newValue[1], false, 1)
+    if (status.value === "end") {
+      updateValue(newValue[0], false, 0);
+      updateValue(newValue[1], false, 1);
     }
   },
   { deep: true },
-)
+);
 
 onMounted(async () => {
   // 获取滑块条的尺寸信息
-  if (!useNative.value) {
+  if (!props.useNative) {
     // #ifndef APP-NVUE
-    sliderRect.value = (await getRect('.hy-slider__base', false, instance)) as UniNamespace.NodeInfo
+    sliderRect.value = (await getRect(
+      ".hy-slider__base",
+      false,
+      instance,
+    )) as UniNamespace.NodeInfo;
     // console.log('sliderRect', sliderRect.value)
     if (sliderRect.value.width == 0) {
-      error('如在弹窗等元素中使用，请使用v-if来显示滑块，否则无法计算长度。')
+      error("如在弹窗等元素中使用，请使用v-if来显示滑块，否则无法计算长度。");
     }
-    init()
+    init();
     // #endif
   }
-})
+});
 
 const init = () => {
-  if (isRange.value) {
-    updateValue(rangeValue.value[0], false, 0)
-    updateValue(rangeValue.value[1], false, 1)
+  if (props.isRange) {
+    updateValue(props.rangeValue[0], false, 0);
+    updateValue(props.rangeValue[1], false, 1);
   } else {
-    updateValue(modelValue.value, false)
+    updateValue(props.modelValue, false);
   }
-}
+};
+
 // native拖动过程中触发
-const changingHandler = (e: MouseEvent) => {
-  const { value } = e.detail
+const changingHandler = (e: SliderOnChangingEvent) => {
+  const { value } = e.detail;
   // 更新v-model的值
-  emit('update:modelValue', value)
+  emit("update:modelValue", value);
   // 触发事件
-  emit('changing', value)
-}
+  emit("changing", value);
+};
+
 // native滑动结束时触发
-const changeHandler = (e: TouchEvent) => {
-  const { value } = e.detail
+const changeHandler = (e: SliderOnChangingEvent) => {
+  const { value } = e.detail;
   // 更新v-model的值
-  emit('update:modelValue', value)
+  emit("update:modelValue", value);
   // 触发事件
-  emit('change', value)
-}
-const onTouchStart = (event: TouchEvent, index = 1) => {
-  if (disabled.value) return
-  startX.value = 0
+  emit("change", value);
+};
+
+const onTouchStart = (e: TouchEvent, index = 1) => {
+  if (props.disabled) return;
+  startX.value = 0;
   // 触摸点集
-  let touches = event.touches[0]
+  let touches = e.touches[0];
   // 触摸点到屏幕左边的距离
-  startX.value = touches.clientX
+  startX.value = touches.clientX;
   // 此处的this.modelValue虽为props值，但是通过$emit('update:modelValue')进行了修改
-  if (isRange.value) {
-    startValue0.value = format(rangeValue.value[0], 0)
-    startValue.value = format(rangeValue.value[1], 1)
+  if (props.isRange) {
+    startValue0.value = format(props.rangeValue[0], 0);
+    startValue.value = format(props.rangeValue[1], 1);
   } else {
-    startValue.value = format(modelValue.value)
+    startValue.value = format(props.modelValue);
   }
   // 标示当前的状态为开始触摸滑动
-  status.value = 'start'
+  status.value = "start";
 
-  let clientX = 0
+  let clientX = 0;
   // #ifndef APP-NVUE
-  clientX = touches.clientX
+  clientX = touches.clientX;
   // #endif
   // #ifdef APP-NVUE
-  clientX = touches.screenX
+  clientX = touches.screenX;
   // #endif
-  distanceX.value = clientX - sliderRect.value.left!
+  distanceX.value = clientX - sliderRect.value.left!;
   // 获得移动距离对整个滑块的值，此为带有多位小数的值，不能用此更新视图
   // 否则造成通信阻塞，需要每改变一个step值时修改一次视图
-  newValue.value = (distanceX.value / sliderRect.value.width!) * (max.value - min.value) + min.value
-  status.value = 'moving'
+  newValue.value =
+    (distanceX.value / sliderRect.value.width!) * (props.max - props.min) +
+    props.min;
+  status.value = "moving";
   // 发出moving事件
-  let $crtFmtValue = updateValue(newValue.value, true, index)
-  emit('changing', $crtFmtValue)
-}
-const onTouchMove = (event: TouchEvent, index = 1) => {
-  if (disabled.value) return
+  let $crtFmtValue = updateValue(newValue.value, true, index);
+  emit("changing", $crtFmtValue);
+};
+const onTouchMove = (e: TouchEvent, index = 1) => {
+  if (props.disabled) return;
   // 连续触摸的过程会一直触发本方法，但只有手指触发且移动了才被认为是拖动了，才发出事件
   // 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件
-  if (status.value == 'start') emit('start')
-  let touches = event.touches[0]
+  if (status.value == "start") emit("start");
+  let touches = e.touches[0];
   // console.log('touchs', touches)
   // 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
-  let clientX = 0
+  let clientX = 0;
   // #ifndef APP-NVUE
-  clientX = touches.clientX
+  clientX = touches.clientX;
   // #endif
   // #ifdef APP-NVUE
-  clientX = touches.screenX
+  clientX = touches.screenX;
   // #endif
-  distanceX.value = clientX - sliderRect.value.left!
+  distanceX.value = clientX - sliderRect.value.left!;
   // 获得移动距离对整个滑块的值，此为带有多位小数的值，不能用此更新视图
   // 否则造成通信阻塞，需要每改变一个step值时修改一次视图
-  newValue.value = (distanceX.value / sliderRect.value.width!) * (max.value - min.value) + min.value
-  status.value = 'moving'
+  newValue.value =
+    (distanceX.value / sliderRect.value.width!) * (props.max - props.min) +
+    props.min;
+  status.value = "moving";
   // 发出moving事件
-  let $crtFmtValue = updateValue(newValue.value, true, index)
-  emit('changing', $crtFmtValue)
-}
-const onTouchEnd = (event: TouchEvent, index = 1) => {
-  if (disabled.value) return
-  if (status.value === 'moving') {
-    let $crtFmtValue = updateValue(newValue.value, false, index)
-    emit('change', $crtFmtValue)
+  let $crtFmtValue = updateValue(newValue.value, true, index);
+  emit("changing", $crtFmtValue);
+};
+const onTouchEnd = (e: TouchEvent, index = 1) => {
+  if (props.disabled) return;
+  if (status.value === "moving") {
+    let $crtFmtValue = updateValue(newValue.value, false, index);
+    emit("change", $crtFmtValue);
   }
-  status.value = 'end'
-}
-const onTouchStart2 = (event: TouchEvent, index = 1) => {
-  if (!isRange.value) {
+  status.value = "end";
+};
+const onTouchStart2 = (e: TouchEvent, index = 1) => {
+  if (!props.isRange) {
     // this.onChangeStart(event, index);
   }
-}
-const onTouchMove2 = (event: TouchEvent, index = 1) => {
-  if (!isRange.value) {
+};
+const onTouchMove2 = (e: TouchEvent, index = 1) => {
+  if (!props.isRange) {
     // this.onTouchMove(event, index);
   }
-}
-const onTouchEnd2 = (event: TouchEvent, index = 1) => {
-  if (!isRange.value) {
+};
+const onTouchEnd2 = (e: TouchEvent, index = 1) => {
+  if (!props.isRange) {
     // this.onTouchEnd(event, index);
   }
-}
-const onClick = (event: MouseEvent) => {
-  // if (isRange.value) return;
-  if (disabled.value) return
+};
+const onClick = (e: TouchEvent) => {
+  // if (props.isRange) return;
+  if (props.disabled) return;
   // 直接点击滑块的情况，计算方式与onTouchMove方法相同
   // console.log('click', event)
   // #ifndef APP-NVUE
   // nvue下暂时无法获取坐标
-  let clientX = event.detail.x - sliderRect.value.left!
-  newValue.value = (clientX / sliderRect.value.width!) * (max.value - min.value) + min.value
-  updateValue(newValue.value, false, 1)
+  let clientX = e.detail.x - sliderRect.value.left!;
+  newValue.value =
+    (clientX / sliderRect.value.width!) * (props.max - props.min) + props.min;
+  updateValue(newValue.value, false, 1);
   // #endif
-}
-const updateValue = (value: number, drag: boolean, index: number = 1): number => {
+};
+const updateValue = (
+  value: number,
+  drag: boolean,
+  index: number = 1,
+): number | number[] => {
   // 去掉小数部分，同时也是对step步进的处理
-  let valueFormat = format(value, index)
+  let valueFormat = format(value, index);
   // 不允许滑动的值超过max最大值
-  if (valueFormat > max.value) {
-    valueFormat = max.value
+  if (valueFormat > props.max) {
+    valueFormat = props.max;
   }
   // 设置移动的距离，不能用百分比，因为NVUE不支持。
   let width = Math.min(
-    ((valueFormat - min.value) / (max.value - min.value)) * sliderRect.value.width!,
+    ((valueFormat - props.min) / (props.max - props.min)) *
+      sliderRect.value.width!,
     sliderRect.value.width!,
-  )
+  );
   let barStyle_1: CSSProperties = {
-    width: width + 'px',
-  }
+    width: width + "px",
+  };
   // 移动期间无需过渡动画
   if (drag) {
-    barStyle_1.transition = 'none'
+    barStyle_1.transition = "none";
   } else {
     // 非移动期间，删掉对过渡为空的声明，让css中的声明起效
-    delete barStyle_1.transition
+    delete barStyle_1.transition;
   }
   // 修改value值
-  if (isRange.value) {
-    rangeValue.value[index] = valueFormat
-    emit('update:modelValue', rangeValue.value)
+  if (props.isRange) {
+    props.rangeValue[index] = valueFormat;
+    emit("update:modelValue", props.rangeValue);
   } else {
-    emit('update:modelValue', valueFormat)
+    emit("update:modelValue", valueFormat);
   }
 
   switch (index) {
     case 0:
-      barStyle0.value = barStyle_1
-      break
+      barStyle0.value = barStyle_1;
+      break;
     case 1:
-      barStyle.value = barStyle_1
-      break
+      barStyle.value = barStyle_1;
+      break;
     default:
-      break
+      break;
   }
-  if (isRange.value) {
-    return rangeValue.value
+  if (props.isRange) {
+    return props.rangeValue;
   } else {
-    return valueFormat
+    return valueFormat;
   }
-}
+};
 const format = (value: number, index = 1): number => {
   // 将小数变成整数，为了减少对视图的更新，造成视图层与逻辑层的阻塞
-  if (isRange.value) {
+  if (props.isRange) {
     switch (index) {
       case 0:
         return (
           Math.round(
-            Math.max(min.value, Math.min(value, rangeValue.value[1] - step.value, max.value)) /
-              step.value,
-          ) * step.value
-        )
+            Math.max(
+              props.min,
+              Math.min(value, props.rangeValue[1] - props.step, props.max),
+            ) / props.step,
+          ) * props.step
+        );
       case 1:
         return (
           Math.round(
-            Math.max(min.value, rangeValue.value[0] + step.value, Math.min(value, max.value)) /
-              step.value,
-          ) * step.value
-        )
+            Math.max(
+              props.min,
+              props.rangeValue[0] + props.step,
+              Math.min(value, props.max),
+            ) / props.step,
+          ) * props.step
+        );
       default:
-        return 0
+        return 0;
     }
   } else {
     // 解决精度丢失
     return (
-      (Math.round(Math.max(min.value, Math.min(value, max.value)) / step.value) *
+      (Math.round(
+        Math.max(props.min, Math.min(value, props.max)) / props.step,
+      ) *
         1000 *
-        step.value) /
+        props.step) /
       1000
-    )
+    );
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>

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

@@ -1,79 +1,79 @@
-import type { CSSProperties } from 'vue'
+import type { CSSProperties } from "vue";
 
 export default interface HySliderProps {
   /**
    * @description 滑块默认值（默认0）
    * */
-  modelValue?: number
+  modelValue?: number;
   /**
    * @description 滑块的大小，取值范围为 12 - 28
    * */
-  blockSize?: number | string
+  blockSize?: number | string;
   /**
    * @description 最小值（默认0）
    * */
-  min?: number
+  min?: number;
   /**
    * @description 最大值（默认100）
    * */
-  max?: number
+  max?: number;
   /**
    * @description 步长（默认1）
    * */
-  step?: number
+  step?: number;
   /**
    * @description 底部选择部分的背景颜色（默认#2979ff）
    * */
-  activeColor?: string
+  activeColor?: string;
   /**
    * @description 底部条背景颜色（默认#c0c4cc）
    * */
-  inactiveColor?: string
+  inactiveColor?: string;
   /**
    * @description 滑块颜色（默认#ffffff）
    * */
-  blockColor?: string
+  blockColor?: string;
   /**
    * @description 是否显示当前的选择值
    * */
-  showValue?: boolean
+  showValue?: boolean;
   /**
    * @description 是否禁用滑块(默认为false)
    * */
-  disabled?: boolean
+  disabled?: boolean;
   /**
    * @description 给滑块自定义样式，对象形式
    * */
-  blockStyle?: CSSProperties
+  blockStyle?: CSSProperties;
   /**
    * @description 是否渲染uni-app框架内置组件（默认false）
    * */
-  useNative?: boolean
+  useNative?: boolean;
   /**
    * @description 滑块条高度，单位rpx（默认6）
    * */
-  height?: string | number
+  height?: string | number;
   /**
    * @description 双滑块时值
    * */
-  rangeValue?: number[]
+  rangeValue?: number[];
   /**
    * @description 是否区间的模式
    * */
-  isRange?: boolean
+  isRange?: boolean;
   /**
    * @description 自定义样式
    * */
-  customStyle?: CSSProperties
+  customStyle?: CSSProperties;
 }
 
 export interface ISliderEmits {
   /** 开始滑动触发 */
-  (e: 'start'): void
+  (e: "start"): void;
   /** 触发事件（拖动过程中） */
-  (e: 'changing', value: number): void
+  (e: "changing", value: number | number[]): void;
   /** 触发事件 */
-  (e: 'change', value: number): void
+  (e: "change", value: number | number[]): void;
   /** 数值改变触发 */
-  (e: 'update:modelValue', value: number | number[]): void
+  (e: "update:modelValue", value: number | number[]): void;
 }