更新记录

0.0.3（2024-06-12） 下载此版本

调整：

• 滑块定位从双精度值更改至四舍五入小数点后两位值
• 更新README.md文档

修复：

• 单区间模式下，被双区间规则误杀从而无法滑动到最大值问题。
• 单区间模式下，活跃滑块宽度计算不精确问题。

0.0.2（2024-05-10） 下载此版本

新增：

• 根据系列组件库统一规划化命名。✅
• 数值提示位置增加可自定义属性。✅
• 增加事件 move，用于区分 change，两者触发条件不同。✅
• 废除 hintDistance 提示距按钮距离属性。

修复：

• 最小数值无法拉尽问题修复。✅
• 单区间模式下初次回显值问题。✅

0.0.1（2023-11-20） 下载此版本

xz-slider-range首次上架

平台兼容性

xz-slider-range

[toc]

一、使用说明

xz-slider-range 是基于 uniapp 框架的一款区间滑块组件，组件干练简洁易用，支持单、双区间操作。

支持 easycom 导入，允许不导入组件直接使用。目前基于TS编写，暂未分离TS语法，需要项目支持TS依赖使用。

特点：

• 简单易用，仅需一个 v-model 属性即可实现主要功能。
• 支持单、双范围灵活切换。
• 自定义程度高，可根据具体需求，自定义 UI、内容。
• 单组件下载版本无需第三方依赖，开箱直用，若需要使用多个该系列组件，建议使用体积更小的完整组件包。

注意：组件属于首发测试阶段，使用过程中遇到问题或有建议的话请提交 Issues · xzcwx/xz-easy-uni (github.com)，感谢您的配合❤。

二、使用示例

1)、基本使用

<template>
    <view class="slider-range">
      <view>{{ sliderRange.title }}</view>
      <xz-slider-range v-model="sliderRange.val" />
    </view>
</template>

<script lang="ts" setup>
  import { computed, reactive, onMounted } from "vue";

  const sliderRange = reactive({
    title: "基本使用",
    val: [0, 100]
  });
</script>

2)、传统单区间滑块

<template>
    <view class="slider-range">
      <view>{{ sliderRange.title }}</view>
      <xz-slider-range v-model="sliderRange.val" solo :decoration="false"/>
    </view>
</template>

<script lang="ts" setup>
  import { computed, reactive, onMounted } from "vue";

  const sliderRange = reactive({
    title: "传统单区间滑块",
    val: [0]
  });
</script>

3)、自定义区间

<template>
    <view class="slider-range">
      <view>{{ sliderRange.title }}</view>
      <xz-slider-range v-model="sliderRange.val" :min="100" :max="1000000" />
    </view>
</template>

<script lang="ts" setup>
  import { computed, reactive, onMounted } from "vue";

  const sliderRange = reactive({
    title: "自定义区间",
    val: []
  });
</script>

4)、自定义区间提示

<template>
    <view class="slider-range">
      <view>{{ sliderRange.title }}</view>
      <xz-slider-range v-model="sliderRange.val" 
                       :format="(val) => `￥${val}万`"
                       hint-color="#007979" hint-size="14px"  />
    </view>
</template>

<script lang="ts" setup>
  import { computed, reactive, onMounted } from "vue";

  const sliderRange = reactive({
    title: "自定义区间提示",
    val: []
  });
</script>

三、组件Props属性

四、组件Events事件

五、组件方法

便捷导航

• 作者博客地址：https://blog.csdn.net/XianZhe_
• 项目仓库地址：
  • gitee：xzEasyUni: 致力于简单易用的 UniApp ui库 (gitee.com)
  • github： xzcwx/xz-easy-uni: 致力于简单易用的 UniApp ui库。 (github.com)