hy-app 0.1.1

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

@@ -0,0 +1,511 @@
+<template>
+  <view class="hy-slider" :style="[customStyle]">
+    <template v-if="!useNative || isRange">
+      <view
+        ref="hy-slider-inner"
+        class="hy-slider-inner"
+        @click="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(Number(blockSize) + 24)
+              : addUnit(blockSize)
+        }"
+      >
+        <view
+          ref="hy-slider__base"
+          class="hy-slider__base"
+          :style="[
+            {
+              height: height,
+              backgroundColor: inactiveColor
+            }
+          ]"
+        >
+        </view>
+        <view
+          @click="onClick"
+          class="hy-slider__gap"
+          :style="[
+            barStyle,
+            {
+              height: height,
+              marginTop: '-' + height,
+              backgroundColor: activeColor
+            }
+          ]"
+        >
+        </view>
+        <view
+          v-if="isRange"
+          class="hy-slider__gap hy-slider__gap-0"
+          :style="[
+            barStyle0,
+            {
+              height: height,
+              marginTop: '-' + height,
+              backgroundColor: inactiveColor
+            }
+          ]"
+        >
+        </view>
+        <text
+          v-if="isRange && showValue"
+          class="hy-slider__show-range-value"
+          :style="{
+            left: blockLeft(barStyle?.width, blockSize)
+          }"
+        >
+          {{ rangeValue[0] }}
+        </text>
+        <text
+          v-if="isRange && showValue"
+          class="hy-slider__show-range-value"
+          :style="{
+            left: blockLeft(barStyle?.width, blockSize)
+          }"
+        >
+          {{ rangeValue[1] }}
+        </text>
+        <template v-if="isRange">
+          <view
+            class="hy-slider__button-wrap hy-slider__button-wrap-0"
+            @touchstart="onTouchStart($event, 0)"
+            @touchmove="onTouchMove($event, 0)"
+            @touchend="onTouchEnd($event, 0)"
+            @touchcancel="onTouchEnd($event, 0)"
+            :style="{
+              left: blockLeft(barStyle?.width, blockSize)
+            }"
+          >
+            <slot name="min" v-if="$slots.min || $slots.$min" />
+            <view
+              v-else
+              class="hy-slider__button"
+              :style="[
+                blockStyle,
+                {
+                  height: addUnit(blockSize),
+                  width: addUnit(blockSize),
+                  backgroundColor: blockColor
+                }
+              ]"
+            ></view>
+          </view>
+        </template>
+        <view
+          class="hy-slider__button-wrap"
+          @touchstart="onTouchStart"
+          @touchmove="onTouchMove"
+          @touchend="onTouchEnd"
+          @touchcancel="onTouchEnd"
+          :style="{
+            left: blockLeft(barStyle?.width, blockSize)
+          }"
+        >
+          <slot name="max" v-if="isRange && ($slots.max || $slots.$max)" />
+          <slot v-else-if="$slots.default || $slots.$default" />
+          <view
+            v-else
+            class="hy-slider__button"
+            :style="[
+              blockStyle,
+              {
+                height: addUnit(blockSize),
+                width: addUnit(blockSize),
+                backgroundColor: blockColor
+              }
+            ]"
+          ></view>
+        </view>
+      </view>
+      <view class="hy-slider__show-value" v-if="showValue && !isRange">{{
+        modelValue
+      }}</view>
+    </template>
+    <slider
+      class="hy-slider__native"
+      v-else
+      :min="min"
+      :max="max"
+      :step="step"
+      :value="modelValue"
+      :activeColor="activeColor"
+      :backgroundColor="inactiveColor"
+      :blockSize="addUnit(blockSize)"
+      :blockColor="blockColor"
+      :showValue="showValue"
+      :disabled="disabled"
+      @changing="changingHandler"
+      @change="changeHandler"
+    ></slider>
+  </view>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  type CSSProperties,
+  onMounted,
+  ref,
+  toRefs,
+  watch
+} from "vue";
+import defaultProps from "./props";
+import IProps from "./typing";
+import { addUnit, error, getRect, sleep } from "../../utils";
+import NodeInfo = UniNamespace.NodeInfo;
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { modelValue, rangeValue, useNative, isRange, disabled, step, min, max } =
+  toRefs(props);
+const emit = defineEmits(["start", "changing", "change", "update:modelValue"]);
+
+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<NodeInfo>({
+  left: 0,
+  width: 0
+});
+
+const blockLeft = computed(() => {
+  return (
+    slideWidth: string | number | undefined,
+    blockWidth: string | number
+  ): string => {
+    if (slideWidth) {
+      return addUnit(
+        parseInt(slideWidth.toString().replace("px", "")) +
+          Number(blockWidth) / 2
+      );
+    }
+    return "0px";
+  };
+});
+
+watch(
+  () => modelValue.value,
+  (newValue) => {
+    // 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
+    if (status.value === "end") updateValue(newValue, false);
+  }
+);
+
+watch(
+  () => rangeValue.value,
+  (newValue) => {
+    if (status.value === "end") {
+      updateValue(newValue[0], false, 0);
+      updateValue(newValue[1], false, 1);
+    }
+  },
+  { deep: true }
+);
+
+onMounted(async () => {
+  // 获取滑块条的尺寸信息
+  if (!useNative.value) {
+    // #ifndef APP-NVUE
+    sliderRect.value = (await getRect(".hy-slider__base")) as NodeInfo;
+    // console.log('sliderRect', sliderRect.value)
+    if (sliderRect.value.width == 0) {
+      error("如在弹窗等元素中使用，请使用v-if来显示滑块，否则无法计算长度。");
+    }
+    init();
+    // #endif
+  }
+});
+
+const init = () => {
+  if (isRange.value) {
+    updateValue(rangeValue.value[0], false, 0);
+    updateValue(rangeValue.value[1], false, 1);
+  } else {
+    updateValue(modelValue.value, false);
+  }
+};
+// native拖动过程中触发
+const changingHandler = (e: MouseEvent) => {
+  const { value } = e.detail;
+  // 更新v-model的值
+  emit("update:modelValue", value);
+  // 触发事件
+  emit("changing", value);
+};
+// native滑动结束时触发
+const changeHandler = (e: TouchEvent) => {
+  const { value } = e.detail;
+  // 更新v-model的值
+  emit("update:modelValue", value);
+  // 触发事件
+  emit("change", value);
+};
+const onTouchStart = (event: TouchEvent, index = 1) => {
+  if (disabled.value) return;
+  startX.value = 0;
+  // 触摸点集
+  let touches = event.touches[0];
+  // 触摸点到屏幕左边的距离
+  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);
+  } else {
+    startValue.value = format(modelValue.value);
+  }
+  // 标示当前的状态为开始触摸滑动
+  status.value = "start";
+
+  let clientX = 0;
+  // #ifndef APP-NVUE
+  clientX = touches.clientX;
+  // #endif
+  // #ifdef APP-NVUE
+  clientX = touches.screenX;
+  // #endif
+  distanceX.value = clientX - sliderRect.value.left!;
+  // 获得移动距离对整个滑块的值，此为带有多位小数的值，不能用此更新视图
+  // 否则造成通信阻塞，需要每改变一个step值时修改一次视图
+  newValue.value =
+    (distanceX.value / sliderRect.value.width!) * (max.value - min.value) +
+    min.value;
+  status.value = "moving";
+  // 发出moving事件
+  let $crtFmtValue = updateValue(newValue.value, true, index);
+  emit("changing", $crtFmtValue);
+};
+const onTouchMove = (event: TouchEvent, index = 1) => {
+  if (disabled.value) return;
+  // 连续触摸的过程会一直触发本方法，但只有手指触发且移动了才被认为是拖动了，才发出事件
+  // 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件
+  if (status.value == "start") emit("start");
+  let touches = event.touches[0];
+  // console.log('touchs', touches)
+  // 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
+  let clientX = 0;
+  // #ifndef APP-NVUE
+  clientX = touches.clientX;
+  // #endif
+  // #ifdef APP-NVUE
+  clientX = touches.screenX;
+  // #endif
+  distanceX.value = clientX - sliderRect.value.left!;
+  // 获得移动距离对整个滑块的值，此为带有多位小数的值，不能用此更新视图
+  // 否则造成通信阻塞，需要每改变一个step值时修改一次视图
+  newValue.value =
+    (distanceX.value / sliderRect.value.width!) * (max.value - min.value) +
+    min.value;
+  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);
+  }
+  status.value = "end";
+};
+const onTouchStart2 = (event: TouchEvent, index = 1) => {
+  if (!isRange.value) {
+    // this.onChangeStart(event, index);
+  }
+};
+const onTouchMove2 = (event: TouchEvent, index = 1) => {
+  if (!isRange.value) {
+    // this.onTouchMove(event, index);
+  }
+};
+const onTouchEnd2 = (event: TouchEvent, index = 1) => {
+  if (!isRange.value) {
+    // this.onTouchEnd(event, index);
+  }
+};
+const onClick = (event: Event) => {
+  // if (isRange.value) return;
+  if (disabled.value) 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);
+  // #endif
+};
+const updateValue = (value: number, drag: boolean, index: number = 1) => {
+  // 去掉小数部分，同时也是对step步进的处理
+  let valueFormat = format(value, index);
+  // 不允许滑动的值超过max最大值
+  if (valueFormat > max.value) {
+    valueFormat = max.value;
+  }
+  // 设置移动的距离，不能用百分比，因为NVUE不支持。
+  let width = Math.min(
+    ((valueFormat - min.value) / (max.value - min.value)) *
+      sliderRect.value.width!,
+    sliderRect.value.width!
+  );
+  let barStyle_1: CSSProperties = {
+    width: width + "px"
+  };
+  // 移动期间无需过渡动画
+  if (drag == true) {
+    barStyle_1.transition = "none";
+  } else {
+    // 非移动期间，删掉对过渡为空的声明，让css中的声明起效
+    delete barStyle_1.transition;
+  }
+  // 修改value值
+  if (isRange.value) {
+    rangeValue.value[index] = valueFormat;
+    emit("update:modelValue", rangeValue.value);
+  } else {
+    emit("update:modelValue", valueFormat);
+  }
+
+  switch (index) {
+    case 0:
+      barStyle0.value = barStyle_1;
+      break;
+    case 1:
+      barStyle.value = barStyle_1;
+      break;
+    default:
+      break;
+  }
+  if (isRange.value) {
+    return rangeValue.value;
+  } else {
+    return valueFormat;
+  }
+};
+const format = (value: number, index = 1): number => {
+  // 将小数变成整数，为了减少对视图的更新，造成视图层与逻辑层的阻塞
+  if (isRange.value) {
+    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
+        );
+      case 1:
+        return (
+          Math.round(
+            Math.max(
+              min.value,
+              rangeValue.value[0] + step.value,
+              Math.min(value, max.value)
+            ) / step.value
+          ) * step.value
+        );
+      default:
+        return 0;
+    }
+  } else {
+    return (
+      Math.round(Math.max(min.value, Math.min(value, max.value)) / step.value) *
+      step.value
+    );
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+.hy-slider {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  &__native {
+    flex: 1;
+  }
+
+  &-inner {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    border-radius: 999px;
+    padding: 10px 18px;
+    justify-content: center;
+  }
+
+  &__show-value {
+    margin: 10px 18px 10px 0px;
+  }
+
+  &__show-range-value {
+    padding-top: 2px;
+    font-size: 12px;
+    line-height: 12px;
+    position: absolute;
+    bottom: 0;
+  }
+
+  &__base {
+    background-color: #ebedf0;
+  }
+
+  /* #ifndef APP-NVUE */
+  &-inner:before {
+    position: absolute;
+    right: 0;
+    left: 0;
+    content: "";
+    top: -8px;
+    bottom: -8px;
+    z-index: -1;
+  }
+  /* #endif */
+
+  &__gap {
+    position: relative;
+    border-radius: 999px;
+    transition: width 0.2s;
+    background-color: #1989fa;
+  }
+
+  &__button {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+    background-color: #fff;
+    transform: scale(0.9);
+    /* #ifdef H5 */
+    cursor: pointer;
+    /* #endif */
+  }
+
+  &__button-wrap {
+    position: absolute;
+    // transform: translate3d(50%, -50%, 0);
+  }
+
+  &--disabled {
+    opacity: 0.5;
+  }
+}
+</style>

package/components/hy-slider/props.ts

@@ -0,0 +1,21 @@
+import IProps from "./typing";
+import { ColorConfig } from "../../config";
+
+const defaultProps: IProps = {
+  modelValue: 0,
+  blockSize: 18,
+  min: 0,
+  max: 100,
+  step: 1,
+  activeColor: ColorConfig.primary,
+  inactiveColor: "#c0c4cc",
+  blockColor: "#ffffff",
+  showValue: false,
+  disabled: false,
+  useNative: false,
+  height: "2px",
+  rangeValue: [0, 0],
+  isRange: false
+};
+
+export default defaultProps;

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

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