更新记录

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_
• 项目仓库地址：xzcwx/xz-easy-uni: 致力于简单易用的 UniApp ui库。 (github.com)