更新记录

1.0.2 下载此版本

双模式交互：滚动选择 + 步进按钮 高度可定制：刻度颜色、精度、按钮样式等全面开放

1.0.0 下载此版本

一、组件概述

本组件是一个用于校准的前端组件，支持多种单位和自定义刻度，可在移动应用开发中方便地集成使用，为用户提供直观的校准操作界面。

组件效果展示

二、安装与使用

1. 安装

本组件为 Vue 3 组件，确保你的项目是基于 Vue 3 开发的。将组件的代码文件（.vue 文件）复制到你的项目对应的组件目录下即可。

2. 使用示例

<template>
  <div>
    <!-- 引入校准组件 -->
    <Calibrate 
      :defaultValue="10"
      :unit="'mm'"
      :scaleNum="200"
      @hide="handleHide"
      @confirm="handleConfirm"
    />
  </div>
</template>

<script setup lang="ts">
import Calibrate from './path/to/calibrate.vue';

const handleHide = () => {
  console.log('组件隐藏');
};

const handleConfirm = (value) => {
  console.log('确认的值：', value);
};
</script>

三、组件属性

四、组件事件

五、注意事项

• 确保项目中使用的 Vue 版本为 3.x，否则可能会出现兼容性问题。
• 刻度总数 scaleNum 应根据实际需求合理设置，避免刻度过多或过少影响用户体验。
• 组件的样式可根据项目整体风格进行调整，修改 <style scoped> 部分的 CSS 代码即可。

平台兼容性

uni-app(4.05)

uni-app x(4.05)

🎚️ ElkCalibrate - 高度可定制的移动端校准器组件

ElkCalibrate是一个专为移动端设计的强大校准器组件，提供精确的数值选择功能。支持滚动选择与步进控制双模式，拥有丰富的定制选项，适用于个人信息(身高/体重)、健康医疗、电商、工业控制等等多种场景。

✨ 特性

• 双模式交互：滚动选择 + 步进按钮
• 高度可定制：刻度颜色、精度、按钮样式等全面开放
• 响应式设计：完美适配各种移动设备
• 无障碍支持：完整ARIA属性
• 多场景预设：内置常用配置模板
• 轻量高性能：优化渲染性能，流畅体验

📦 安装

npm i calibrate-scale

// 项目中使用
//（建议直接复制src\components\elk-calibrate\elk-calibrate.vue使用）
import ElkCalibrate from '@elk/calibrate'
import '@elk/calibrate/dist/style.css'

// app中

🚀 快速开始

<template>
  <button @click="showCalibrate = true">打开校准器</button>

  <ElkCalibrate
    v-model="showCalibrate"
    title="选择体重"
    :defaultValue="65.5"
    unit="kg"
    :precision="1"
    :step="0.5"
    @confirm="handleConfirm"
  />
</template>

<script setup>
import { ref } from 'vue'
import ElkCalibrate from '@elk/calibrate'

const showCalibrate = ref(false)

const handleConfirm = (value) => {
  console.log(`选择的值: ${value}`)
}
</script>

🔧 属性说明

📡 事件

💡 使用场景

健康医疗应用

<ElkCalibrate
  title="血压测量"
  :defaultValue="120"
  unit="mmHg"
  :precision="0"
  :scaleNum="300"
  :majorScaleColor="systolic > 140 ? '#F44336' : '#4CAF50'"
/>

电商价格筛选

<ElkCalibrate
  title="价格区间"
  :defaultValue="2500"
  unit="元"
  :step="100"
  :scaleNum="10000"
  scaleColor="#FF9800"
  confirmText="应用筛选"
/>

工业控制面板

<ElkCalibrate
  title="温度设置"
  :defaultValue="25.5"
  unit="℃"
  :precision="2"
  :step="0.1"
  :disabled="isMonitoring"
  middleLineColor="#0288D1"
/>

🎨 主题定制

自定义颜色

<ElkCalibrate
  scaleColor="#FF9800"
  majorScaleColor="#F44336"
  middleLineColor="#4CAF50"
/>

自定义按钮样式

<ElkCalibrate
  :cancelButtonStyle="{ 
    background: '#f8f8f8', 
    border: '1px solid #eee',
    borderRadius: '20px'
  }"
  :confirmButtonStyle="{
    background: 'linear-gradient(90deg, #FF9800, #F44336)',
    color: 'white'
  }"
  cancelButtonClass="custom-cancel"
  confirmButtonClass="custom-confirm"
/>

📱 兼容性

🤝 贡献指南

欢迎贡献代码！请遵循以下步骤：

1. Fork 项目仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 提交 Pull Request

📜 许可证

本项目采用 MIT 许可证

🌐 资源

• 官方文档
• 示例项目
• 问题反馈

让数值选择成为一种享受！ 🎉 使用ElkCalibrate提升您的移动应用体验。