更新记录

1.0.0（2025-09-08） 下载此版本

• 中心指示器使用红色三角形指示选中值
• 刻度线离中心越远透明度越低，形成渐隐立体感
• 大刻度颜色较深，小刻度颜色较浅

平台兼容性

Vue3/NVue Ruler 插件使用说明文档

功能概述

该插件提供一个可滑动的刻度尺组件，支持选择身高、体重、速度、距离等数值。支持大刻度和小刻度显示、滑动惯性、回弹效果以及刻度吸附。可以在 Vue3 + nvue 环境下使用，兼容 H5、App、小程序等平台。

组件示例

<Ruler
  v-model="height"
  :min="0"
  :max="200"
  :step="1"
  :majorStep="10"
  :tickSpacing="10"
  :trackHeight="60"
  :majorTickHeight="36"
  :minorTickHeight="18"
  :tickWidth="2"
/>

Props

样式说明

• 中心指示器使用红色三角形指示选中值
• 刻度线离中心越远透明度越低，形成渐隐立体感
• 大刻度颜色较深，小刻度颜色较浅

使用注意事项

1. 使用 v-model 双向绑定选中值
2. 可通过 props 调整刻度样式和布局
3. 支持 touch 快速滑动，并会自动吸附到最近刻度
4. 组件自带惯性滑动与回弹动画

示例

<template>
  <Ruler v-model="weight" :min="30" :max="150" :step="1" :majorStep="10" :tickSpacing="12" />
  <text>选中体重: {{ weight }}</text>
</template>

<script setup>
import { ref } from 'vue';
const weight = ref(70);
</script>