uview-pro 0.4.5 → 0.4.7

package/changelog.md

@@ -1,21 +1,59 @@
-## 0.4.5（2025-12-10）
+## 0.4.7（2025-12-19）
+
+### 🚀 Chore | 构建/工程依赖/工具
+
+- 忽略部分文件 ([a8a747f](https://github.com/anyup/uView-Pro/commit/a8a747f97e93ed278a305cd1b2671d2ede5c0fde))
 
 ### ✨ Features | 新功能
 
-- **u-input:** 为选择类型输入框添加覆盖层以增强交互 ([9b7bac2](https://github.com/anyup/uView-Pro/commit/9b7bac221195d010c31b15915d2927d095bd257f))
-- **u-form:** 增强 u-form 深层校验、动态校验表单 ([97d0ccb](https://github.com/anyup/uView-Pro/commit/97d0ccbe03391f63bed81dcfd1af1432f4f7c77d))
+- **u-tabbar:** u-tabbar 组件支持 custom-icon 直接配置图标 custom-prefix ([e577c2d](https://github.com/anyup/uView-Pro/commit/e577c2d083cf46db7124b0df46b2848ef9bdbe80))
 
 ### 🐛 Bug Fixes | Bug 修复
 
-- **u-input:** 修复清空图标点击事件冒泡问题 ([8a214ff](https://github.com/anyup/uView-Pro/commit/8a214ffe8e5588395cdc456e600bc8dd0f03a603))
-- **style:** 修复除H5环境外主题样式作用域问题 ([c02ba3c](https://github.com/anyup/uView-Pro/commit/c02ba3c1454e709b1fa9de817d77b0f2128b5fc0))
-- **u-switch:** 修复开关组件激活颜色默认值的响应式问题 ([3d78647](https://github.com/anyup/uView-Pro/commit/3d78647d75c3201cced2643395ff5dd935d0e7ec))
-- **form:** 修复 form 校验报错问题 ([8d6d60d](https://github.com/anyup/uView-Pro/commit/8d6d60d4af4e5653f7b87afc3f208d0e26809505))
+- **u-icon:** 修复图标组件样式和事件处理问题 ([1cadf27](https://github.com/anyup/uView-Pro/commit/1cadf27f8bd2aec3a11fb1befb9255256a2e3b3a))
+- **u-pagination:** 修复分页切换时传递不正确的当前页码值 ([4befe02](https://github.com/anyup/uView-Pro/commit/4befe02c5cbb4e7db6fbf49f04ca68fac0f69a37))
 
 ### 👥 Contributors
 
-<a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> <a href="https://github.com/yoshinosk"><img src="https://github.com/yoshinosk.png?size=40" width="40" height="40" alt="yoshinosk" title="yoshinosk"/></a> 
+<a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> 
 
+## 0.4.6（2025-12-17）
+
+### 📝 Documentation | 文档
+
+- 添加鸿蒙系统预览说明及二维码 ([7f6199a](https://github.com/anyup/uView-Pro/commit/7f6199a30d5477743c20b27a94711b4605787757))
+
+### ✨ Features | 新功能
+
+- **u-slider:** 增强滑块组件功能与灵活性，支持设置滑块的整体范围起点(start)和终点(end) ([a20c44b](https://github.com/anyup/uView-Pro/commit/a20c44b0270cffde02afd8738a932b2d6bae49f4))
+- **button:** 新增按钮禁用与自定义样式功能演示 ([5f1f482](https://github.com/anyup/uView-Pro/commit/5f1f4823e027dc5ab2e6f49f29fe327c6d4318c6))
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **button:** 更新禁用状态下按钮样式优先级 ([b3ff20b](https://github.com/anyup/uView-Pro/commit/b3ff20b59818c8bc8204bb2a489eff42ded7e842))
+
+### 👥 Contributors
+
+<a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> 
+
+## 0.4.5（2025-12-10）
+
+### ✨ Features | 新功能
+
+- **u-input:** 为选择类型输入框添加覆盖层以增强交互 ([9b7bac2](https://github.com/anyup/uView-Pro/commit/9b7bac221195d010c31b15915d2927d095bd257f))
+- **u-form:** 增强 u-form 深层校验、动态校验表单 ([97d0ccb](https://github.com/anyup/uView-Pro/commit/97d0ccbe03391f63bed81dcfd1af1432f4f7c77d))
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **u-input:** 修复清空图标点击事件冒泡问题 ([8a214ff](https://github.com/anyup/uView-Pro/commit/8a214ffe8e5588395cdc456e600bc8dd0f03a603))
+- **style:** 修复除H5环境外主题样式作用域问题 ([c02ba3c](https://github.com/anyup/uView-Pro/commit/c02ba3c1454e709b1fa9de817d77b0f2128b5fc0))
+- **u-switch:** 修复开关组件激活颜色默认值的响应式问题 ([3d78647](https://github.com/anyup/uView-Pro/commit/3d78647d75c3201cced2643395ff5dd935d0e7ec))
+- **form:** 修复 form 校验报错问题 ([8d6d60d](https://github.com/anyup/uView-Pro/commit/8d6d60d4af4e5653f7b87afc3f208d0e26809505))
+
+### 👥 Contributors
+
+<a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> <a href="https://github.com/yoshinosk"><img src="https://github.com/yoshinosk.png?size=40" width="40" height="40" alt="yoshinosk" title="yoshinosk"/></a> 
+
 ## 0.4.4（2025-12-08）
 
 ### ✨ Features | 新功能

package/components/u-icon/u-icon.vue

@@ -1,17 +1,22 @@
 <template>
-    <view :style="[customStyle]" class="u-icon" @click="onClick" :class="['u-icon--' + labelPos, customClass]">
-        <image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle]" />
+    <view
+        :style="$u.toStyle(customStyle)"
+        class="u-icon"
+        @click="onClick"
+        :class="['u-icon--' + labelPos, customClass]"
+    >
+        <image class="u-icon__img" v-if="isImg" :src="props.name" :mode="imgMode" :style="[imgStyle]" />
         <text
             v-else
             class="u-icon__icon"
             :class="iconClass"
-            :style="[iconStyle]"
+            :style="$u.toStyle(iconStyle)"
             :hover-class="hoverClass"
             @touchstart="onTouchstart"
         >
             <text
                 v-if="showDecimalIcon"
-                :style="[decimalIconStyle]"
+                :style="$u.toStyle(decimalIconStyle)"
                 :class="decimalIconClass"
                 :hover-class="hoverClass"
                 class="u-icon__decimal"
@@ -219,8 +224,8 @@ function onClick(event: any) {
  * 图标触摸时触发
  * @emits touchstart(index)
  */
-function onTouchstart() {
-    emit('touchstart', props.index);
+function onTouchstart(event: any) {
+    emit('touchstart', props.index || event);
 }
 </script>
 

package/components/u-pagination/u-pagination.vue

@@ -65,14 +65,15 @@ const totalPages = computed(() => {
 
 // 切换分页
 function handleChange(type: PaginationDirection) {
-    if (type === 'prev') {
-        current.value -= 1;
-    } else {
-        current.value += 1;
-    }
+    // 先计算新值，确保获取到的是更新后的值
+    const newCurrent = type === 'prev' ? current.value - 1 : current.value + 1;
+
+    // 更新 current 值
+    current.value = newCurrent;
 
     // current为当前页，type值为：next/prev，表示点击的是上一页还是下一页
-    emit('change', { type, current: current.value });
+    // 使用计算后的新值，而不是 current.value，避免异步更新导致的值不同步问题
+    emit('change', { type, current: newCurrent });
 }
 </script>
 

package/components/u-slider/types.ts

@@ -14,6 +14,10 @@ export const SliderProps = {
     disabled: { type: Boolean, default: false },
     /** 滑块宽度，高等于宽，单位rpx */
     blockWidth: { type: [Number, String] as PropType<number | string>, default: 30 },
+    /** 滑块总体范围起点值 */
+    start: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 滑块总体范围终点值 */
+    end: { type: [Number, String] as PropType<number | string>, default: 100 },
     /** 最小值 */
     min: { type: [Number, String] as PropType<number | string>, default: 0 },
     /** 最大值 */
@@ -29,7 +33,15 @@ export const SliderProps = {
     /** 滑块的背景颜色 */
     blockColor: { type: String, default: 'var(--u-bg-white)' },
     /** 用户对滑块的自定义颜色 */
-    blockStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
+    blockStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 是否在滑块上方/下方显示当前数值 */
+    showValue: { type: Boolean, default: false },
+    /** 滑块数值显示位置，top-上方，bottom-下方 */
+    valuePosition: { type: String as PropType<'top' | 'bottom'>, default: 'top' },
+    /** 是否在起始和结束位置显示数值 */
+    showEdgeValue: { type: Boolean, default: false },
+    /** 起始和结束数值显示位置，top-上方，bottom-下方 */
+    edgeValuePosition: { type: String as PropType<'top' | 'bottom'>, default: 'top' }
 };
 
 export type SliderProps = ExtractPropTypes<typeof SliderProps>;

package/components/u-slider/u-slider.vue

@@ -3,8 +3,22 @@
         class="u-slider"
         @tap="onClick"
         :class="[disabled ? 'u-slider--disabled' : '', customClass]"
-        :style="$u.toStyle({ backgroundColor: inactiveColor }, customStyle)"
+        :style="$u.toStyle(sliderStyle, customStyle)"
     >
+        <view
+            v-if="showEdgeValue"
+            class="u-slider__edge u-slider__edge--start"
+            :class="`u-slider__edge--${edgeValuePosition}`"
+        >
+            {{ startLabel }}
+        </view>
+        <view
+            v-if="showEdgeValue"
+            class="u-slider__edge u-slider__edge--end"
+            :class="`u-slider__edge--${edgeValuePosition}`"
+        >
+            {{ endLabel }}
+        </view>
         <view
             class="u-slider__gap"
             :style="
@@ -33,6 +47,9 @@
                         })
                     "
                 />
+                <view v-if="showValue" class="u-slider__value" :class="`u-slider__value--${valuePosition}`">
+                    {{ displayValue }}
+                </view>
             </view>
         </view>
     </view>
@@ -52,16 +69,18 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, useSlots, getCurrentInstance } from 'vue';
+import { computed, ref, watch, onMounted, useSlots, getCurrentInstance } from 'vue';
 import { $u } from '../..';
 import { SliderProps } from './types';
 
 /**
  * slider 滑块选择器
  * @tutorial https://uviewpro.cn/zh/components/slider.html
- * @property {Number | String} value 滑块默认值（默认0）
- * @property {Number | String} min 最小值（默认0）
- * @property {Number | String} max 最大值（默认100）
+ * @property {Number | String} value 滑块当前值，位于[start, end]范围内（默认0）
+ * @property {Number | String} start 整体范围起点值（默认0）
+ * @property {Number | String} end 整体范围终点值（默认100）
+ * @property {Number | String} min 有效拖动最小值，需在[start, end]中（默认0）
+ * @property {Number | String} max 有效拖动最大值，需在[start, end]中（默认100）
  * @property {Number | String} step 步长（默认1）
  * @property {Number | String} blockWidth 滑块宽度，高等于宽（30）
  * @property {Number | String} height 滑块条高度，单位rpx（默认6）
@@ -70,6 +89,10 @@ import { SliderProps } from './types';
  * @property {String} blockColor 滑块颜色（默认var(--u-bg-white)）
  * @property {Object} blockStyle 给滑块自定义样式，对象形式
  * @property {Boolean} disabled 是否禁用滑块(默认为false)
+ * @property {Boolean} showValue 是否在滑块上方/下方显示当前数值
+ * @property {String} valuePosition 当前数值显示位置，top-上方，bottom-下方（默认top）
+ * @property {Boolean} showEdgeValue 是否在起始和结束位置显示数值
+ * @property {String} edgeValuePosition 起始和结束数值显示位置，top-上方，bottom-下方（默认top）
  * @event start 滑动触发
  * @event moving 正在滑动中
  * @event end 滑动结束
@@ -91,16 +114,71 @@ const newValue = ref(0);
 const distanceX = ref(0);
 const startValue = ref(0);
 const barStyle = ref<Record<string, any>>({});
+const innerValue = ref<number>(0);
+
+const rangeStart = computed(() => Number(props.start));
+const rangeEnd = computed(() => Number(props.end));
+const rangeTotal = computed(() => {
+    const total = rangeEnd.value - rangeStart.value;
+    return total === 0 ? 1 : total;
+});
+
+const sliderStyle = computed(() => {
+    const style = {
+        backgroundColor: props.inactiveColor
+    } as Record<string, any>;
+    if (
+        (props.showValue && props.valuePosition === 'top') ||
+        (props.showEdgeValue && props.edgeValuePosition === 'top')
+    ) {
+        style.marginTop = '80rpx';
+    }
+    if (
+        (props.showValue && props.valuePosition === 'bottom') ||
+        (props.showEdgeValue && props.edgeValuePosition === 'bottom')
+    ) {
+        style.marginBottom = '80rpx';
+    }
+    return style;
+});
+
+// 限制min和max在start和end范围内
+const effectiveMin = computed(() => {
+    const min = Number(props.min);
+    return Math.max(rangeStart.value, Math.min(min, rangeEnd.value));
+});
+
+const effectiveMax = computed(() => {
+    const max = Number(props.max);
+    return Math.min(rangeEnd.value, Math.max(max, rangeStart.value));
+});
+
+const startLabel = computed(() => props.start);
+const endLabel = computed(() => props.end);
+const showValue = computed(() => props.showValue);
+const valuePosition = computed(() => props.valuePosition || 'top');
+const showEdgeValue = computed(() => props.showEdgeValue);
+const edgeValuePosition = computed(() => props.edgeValuePosition || 'top');
+
+const displayValue = computed(() => innerValue.value);
 
 // 监听 value 变化，非滑动状态时才更新滑块值
 watch(
     () => props.modelValue,
     n => {
         // 只有在非滑动状态时，才可以通过modelValue更新滑块值，这里监听，是为了让用户触发
-        if (status.value === 'end') updateValue(props.modelValue, false);
+        if (status.value === 'end') updateValue(n, false);
     }
 );
 
+watch(
+    () => [props.start, props.end, props.min, props.max],
+    () => {
+        updateValue(innerValue.value, false);
+    },
+    { deep: true }
+);
+
 onMounted(() => {
     // 获取滑块条的尺寸信息
     $u.getRect('.u-slider', instance).then((rect: { left: number; width: number }) => {
@@ -136,9 +214,9 @@ function onTouchMove(event: TouchEvent) {
     const touches = event.touches[0];
     // 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
     distanceX.value = touches.clientX - sliderRect.value.left;
-    // 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
-    // 否则造成通信阻塞，需要每改变一个step值时修改一次视图
-    newValue.value = (distanceX.value / sliderRect.value.width) * 100;
+    const ratio = distanceX.value / sliderRect.value.width;
+    const raw = rangeStart.value + ratio * rangeTotal.value;
+    newValue.value = raw;
     status.value = 'moving';
     // 发出moving事件
     emit('moving');
@@ -163,13 +241,18 @@ function onTouchEnd() {
  * @param drag 是否为拖动
  */
 function updateValue(value: number | string, drag: boolean) {
-    // 去掉小数部分，同时也是对step步进的处理
-    const width = format(value);
-    // 不允许滑动的值超过max最大值，百分比也不能超过100
-    if (width > Number(props.max) || width > 100) return;
-    // 设置移动的百分比值
+    // 处理为有效值（步进 + min/max 约束），支持负数
+    const formatted = format(value);
+    innerValue.value = formatted;
+
+    // 计算相对于[start, end]的百分比宽度
+    const ratio = (formatted - rangeStart.value) / rangeTotal.value;
+    let percent = ratio * 100;
+    if (percent < 0) percent = 0;
+    if (percent > 100) percent = 100;
+
     const style: Record<string, any> = {
-        width: width + '%'
+        width: percent + '%'
     };
     // 移动期间无需过渡动画
     if (drag === true) {
@@ -178,8 +261,8 @@ function updateValue(value: number | string, drag: boolean) {
         // 非移动期间，删掉对过渡为空的声明，让css中的声明起效
         delete style.transition;
     }
-    // 修改value值
-    emit('update:modelValue', width);
+    // 修改value值（为实际值而非百分比）
+    emit('update:modelValue', formatted);
     barStyle.value = style;
 }
 
@@ -189,11 +272,12 @@ function updateValue(value: number | string, drag: boolean) {
  * @returns 处理后的值
  */
 function format(value: number | string): number {
-    // 将小数变成整数，为了减少对视图的更新，造成视图层与逻辑层的阻塞
-    return (
-        Math.round(Math.max(Number(props.min), Math.min(Number(value), Number(props.max))) / Number(props.step)) *
-        Number(props.step)
-    );
+    const numeric = Number(value);
+    const step = Number(props.step) || 1;
+    // 在有效范围内裁剪（effectiveMin和effectiveMax已限制在start和end范围内），支持负数
+    const clipped = Math.max(effectiveMin.value, Math.min(numeric, effectiveMax.value));
+    // 将值按步长取整，减少对视图的频繁更新
+    return Math.round(clipped / step) * step;
 }
 
 /**
@@ -201,8 +285,9 @@ function format(value: number | string): number {
  */
 function onClick(event: any) {
     if (props.disabled) return;
-    // 直接点击滑块的情况，计算方式与onTouchMove方法相同
-    const value = ((event.detail.x - sliderRect.value.left) / sliderRect.value.width) * 100;
+    // 直接点击滑块的情况，计算为整体[start, end]范围内的值
+    const ratio = (event.detail.x - sliderRect.value.left) / sliderRect.value.width;
+    const value = rangeStart.value + ratio * rangeTotal.value;
     updateValue(value, false);
 }
 </script>
@@ -249,6 +334,88 @@ function onClick(event: any) {
     transform: translate3d(50%, -50%, 0);
 }
 
+.u-slider__value {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 22rpx;
+    font-weight: 500;
+    color: #333;
+    white-space: nowrap;
+    min-width: 40rpx;
+    height: 56rpx;
+    line-height: 56rpx;
+    padding: 0 10rpx;
+    border-radius: 28rpx;
+    background-color: #ffffff;
+    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.u-slider__value--top {
+    bottom: 100%;
+    margin-bottom: 12rpx;
+}
+
+.u-slider__value--top::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 100%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-width: 4px 3px 0 3px;
+    border-style: solid;
+    border-color: #ffffff transparent transparent transparent;
+}
+
+.u-slider__value--bottom {
+    top: 100%;
+    margin-top: 12rpx;
+}
+
+.u-slider__value--bottom::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: 100%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-width: 0 6rpx 8rpx 6rpx;
+    border-style: solid;
+    border-color: transparent transparent #ffffff transparent;
+}
+
+.u-slider__edge {
+    position: absolute;
+    font-size: 24rpx;
+    color: $u-tips-color;
+    white-space: nowrap;
+}
+
+.u-slider__edge--start {
+    left: 0;
+}
+
+.u-slider__edge--end {
+    right: 0;
+}
+
+.u-slider__edge--top {
+    bottom: 100%;
+    margin-bottom: 8rpx;
+}
+
+.u-slider__edge--bottom {
+    top: 100%;
+    margin-top: 8rpx;
+}
+
 .u-slider--disabled {
     opacity: 0.5;
 }

package/components/u-tabbar/u-tabbar.vue

@@ -31,7 +31,7 @@
                         :name="elIconPath(index)"
                         img-mode="scaleToFill"
                         :color="elColor(index)"
-                        :custom-prefix="item.customIcon ? 'custom-icon' : 'uicon'"
+                        :custom-prefix="getCustomPrefix(index)"
                     ></u-icon>
                     <u-badge
                         :count="item.count"
@@ -154,6 +154,34 @@ const elColor = computed<(index: number) => string>(() => {
     };
 });
 
+/**
+ * 计算当前item的custom-prefix
+ * customIcon为boolean时：true为"custom-icon"，false为"uicon"
+ * customIcon为string时：直接使用该值
+ * customIcon为空时：默认"uicon"
+ */
+function getCustomPrefix(index: number): string {
+    const customIcon = props.list[index]?.customIcon;
+
+    // 如果为空（undefined/null），返回默认值
+    if (customIcon === undefined || customIcon === null || customIcon === '') {
+        return 'uicon';
+    }
+
+    // 如果是字符串类型，直接返回
+    if (typeof customIcon === 'string') {
+        return customIcon;
+    }
+
+    // 如果是boolean类型
+    if (typeof customIcon === 'boolean') {
+        return customIcon ? 'custom-icon' : 'uicon';
+    }
+
+    // 默认返回uicon
+    return 'uicon';
+}
+
 /**
  * 点击tabbar item
  */

package/package.json

@@ -2,7 +2,7 @@
     "id": "uview-pro",
     "name": "uview-pro",
     "displayName": "【支持鸿蒙】uView Pro｜基于Vue3+TS的80+精选UI组件库，支持多主题，暗黑模式",
-    "version": "0.4.5",
+    "version": "0.4.7",
     "description": "uView Pro，是全面支持Vue3+TS的uni-app生态框架，80+精选组件，支持安卓，iOS，鸿蒙，各小程序平台，支持多主题，一键暗黑模式",
     "main": "index.ts",
     "module": "index.ts",

package/readme.md

@@ -32,6 +32,21 @@
 - 详尽的文档支持，现代化的演示效果
 - 按需引入，精简打包体积
 
+## 鸿蒙预览
+
+🎉🎉 uView Pro 鸿蒙端应用已正式上线华为鸿蒙应用市场，为您提供完整的业务场景演示平台，包含组件库、模板示例、场景案例等，支持一键复制下载，帮助开发者快速上手并体验组件的实际应用价值！
+
+> 系统要求：仅支持 HarmonyOS 5.0 及以上版本设备
+
+<table>
+    <tr align="center">
+        <td><img src="https://ik.imagekit.io/anyup/images/social/qr_harmony.png" width="180" height="180" ></td>
+    </tr>
+    <tr>
+        <td align="center"><strong>鸿蒙应用</strong><br>（浏览器扫码）</td>
+    </tr>
+</table>
+
 ## 手机预览
 
 您可以通过**微信**或**手机浏览器**扫描以下二维码，查看最佳的演示效果。

package/types/global.d.ts

@@ -401,6 +401,6 @@ export type TabbarItem = {
     selectedIconPath?: string;
     count?: number;
     isDot?: boolean;
-    customIcon?: boolean;
+    customIcon?: boolean | string;
     midButton?: boolean;
 };