bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

列表综合筛选

Browse Source
This commit is contained in:
juguohong
2025-08-24 16:24:49 +08:00
parent e6124131e7
commit 8cfe0ab0b0
34 changed files with 620 additions and 1339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/Range/README.md
View File

@@ -1,93 +0,0 @@
# NtrpRange 范围选择器组件
基于NutUI Range组件的双滑块范围选择器，通过CSS样式覆盖完全匹配设计稿，支持自定义范围、步长和回调函数。
## 功能特性
- 🎯 双滑块设计，支持选择范围区间
- 🎨 精准还原设计稿的视觉效果
- 📱 响应式设计，支持移动端
- 🎮 流畅的拖拽交互体验
- ⚙️ 可配置的最小值、最大值和步长
- 🔒 支持禁用状态
- 📊 实时值变化回调
## 基本用法
```tsx
import NtrpRange from '@/components/Range';
const MyComponent = () => {
const [value, setValue] = useState<[number, number]>([2.0, 4.0]);
return (
<NtrpRange
min={2.0}
max={4.0}
step={0.5}
value={value}
onChange={setValue}
/>
);
};
```
## 属性说明
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `min` | `number` | `2.0` | 最小值 |
| `max` | `number` | `4.0` | 最大值 |
| `step` | `number` | `0.5` | 步长 |
| `value` | `[number, number]` | `[min, max]` | 当前选择的范围值 |
| `onChange` | `(value: [number, number]) => void` | - | 值变化时的回调函数 |
| `disabled` | `boolean` | `false` | 是否禁用 |
## 技术实现
- 基于NutUI Range组件，确保拖拽功能的可靠性
- 通过CSS样式覆盖，完全匹配设计稿视觉效果
- TypeScript + React Hooks
- 响应式设计，支持移动端
## 设计规范
组件严格按照设计稿实现，包含以下视觉元素：
- **网球图标**: 黑色轮廓的网球图标
- **标题**: "NTRP水平区间" 文字
- **标签**: 左右两端的范围标签（如"2.0及以下"、"4.0及以上"）
- **滑块轨道**: 圆角矩形容器，带有浅灰色边框和阴影
- **滑块手柄**: 两个白色圆形手柄，带有黑色边框和阴影
- **轨道填充**: 黑色填充条，显示当前选择的范围
- **标记点**: 四个浅灰色圆点，均匀分布在轨道上
## 样式定制
组件使用 BEM 命名规范，可以通过 CSS 变量或覆盖样式来自定义外观：
```scss
.ntrp-range {
// 自定义样式
&__track {
background: #f5f5f5;
border-color: #d0d0d0;
}
&__handle {
background: #007bff;
border-color: #0056b3;
}
}
```
## 注意事项
1. 确保 `min < max`，否则组件可能无法正常工作
2. `step` 值应该能够整除 `max - min` 的差值
3. 组件内部会确保左右滑块不会重叠，最小间距为 `step` 值
4. 拖拽时会自动吸附到最近的步长值
## 示例
查看 `example.tsx` 文件获取更多使用示例。

85
src/components/Range/example.tsx
View File

@@ -1,85 +0,0 @@
/*
* @Author: juguohong juguohong@flashhold.com
* @Date: 2025-08-16 17:59:28
* @LastEditors: juguohong juguohong@flashhold.com
* @LastEditTime: 2025-08-16 23:48:25
* @FilePath: /mini-programs/src/components/Range/example.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import React, { useState } from 'react';
import NtrpRange from './index';
const RangeExample: React.FC = () => {
const [ntrpRange, setNtrpRange] = useState<[number, number]>([2.0, 4.0]);
const [customRange, setCustomRange] = useState<[number, number]>([0, 100]);
const handleNtrpChange = (value: [number, number]) => {
console.log('NTRP range changed:', value);
setNtrpRange(value);
};
const handleCustomChange = (value: [number, number]) => {
console.log('Custom range changed:', value);
setCustomRange(value);
};
return (
<div >
<h1>Range 组件示例</h1>
<div style={{ marginBottom: '40px' }}>
<h2>NTRP 水平区间选择器</h2>
<NtrpRange
min={1.0}
max={5.0}
step={0.5}
value={ntrpRange}
onChange={handleNtrpChange}
/>
<div >
当前选择范围: {ntrpRange[0]} - {ntrpRange[1]}
</div>
</div>
<div style={{ marginBottom: '40px' }}>
<h2>自定义范围选择器</h2>
<NtrpRange
min={0}
max={100}
step={10}
value={customRange}
onChange={handleCustomChange}
/>
<div style={{ marginTop: '16px', fontSize: '14px', color: '#666' }}>
当前选择范围: {customRange[0]} - {customRange[1]}
</div>
</div>
<div style={{ marginBottom: '40px' }}>
<h2>禁用状态</h2>
<NtrpRange
min={1}
max={10}
step={1}
value={[3, 7]}
disabled={true}
/>
<div style={{ marginTop: '16px', fontSize: '14px', color: '#999' }}>
此选择器已被禁用
</div>
</div>
<div style={{ marginBottom: '40px' }}>
<h2>测试说明</h2>
<div style={{ fontSize: '14px', color: '#666', lineHeight: '1.6' }}>
<p>1. 点击并拖拽左右滑块手柄</p>
<p>2. 查看控制台日志确认拖拽事件</p>
<p>3. 观察滑块位置和值的实时变化</p>
<p>4. 检查调试信息显示</p>
</div>
</div>
</div>
);
};
export default RangeExample;

11
src/components/Range/index.tsx
View File

@@ -1,7 +1,9 @@
import React, { useState, useEffect, useMemo } from "react";
import { View, Text, Image } from "@tarojs/components";
import { Range } from "@nutui/nutui-react-taro";
import styles from "./index.module.scss";
import TitleComponent from "../Title";
import img from "../../config/images";
interface RangeProps {
min?: number;
@@ -25,9 +27,8 @@ const NtrpRange: React.FC<RangeProps> = ({
name,
}) => {
const [currentValue, setCurrentValue] = useState<[number, number]>(value);
console.log('===currentValue', currentValue)
useEffect(() => {
console.log('===rrr', value)
value && setCurrentValue(value);
}, [JSON.stringify(value || [])]);
@@ -55,7 +56,10 @@ console.log('===currentValue', currentValue)
return (
<div className={`${styles.nutRange} ${className ? className : ""} `}>
<div className={styles.nutRangeHeader}>
<TitleComponent title="NTRP水平区间" />
<TitleComponent
title="NTRP水平区间"
icon={<Image src={img.ICON_PLAY} />}
/>
<p className={styles.nutRangeHeaderContent}>{rangContent}</p>
</div>
@@ -69,6 +73,7 @@ console.log('===currentValue', currentValue)
step={step}
value={currentValue}
onEnd={handleChange}
onChange={handleChange}
disabled={disabled}
defaultValue={[min, max]}
className={styles.rangeHandle}

22
src/components/Range/simple-test.tsx
View File

@@ -1,22 +0,0 @@
import React, { useState } from 'react';
import NtrpRange from './index';
const SimpleTest: React.FC = () => {
const [value, setValue] = useState<[number, number]>([2.0, 4.0]);
return (
<div style={{ padding: '20px' }}>
<h2>简单测试</h2>
<NtrpRange
min={2.0}
max={4.0}
step={0.5}
value={value}
onChange={setValue}
/>
<p>当前值: {value[0]} - {value[1]}</p>
</div>
);
};
export default SimpleTest;

68
src/components/Range/style-test.tsx
View File

@@ -1,68 +0,0 @@
import React, { useState } from 'react';
import NtrpRange from './index';
const StyleTest: React.FC = () => {
const [value, setValue] = useState<[number, number]>([2.0, 4.0]);
return (
<div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
<h1>NtrpRange 样式测试</h1>
<div style={{ marginBottom: '30px' }}>
<h2>NTRP 水平区间选择器</h2>
<NtrpRange
min={2.0}
max={4.0}
step={0.5}
value={value}
onChange={setValue}
/>
<div style={{ marginTop: '16px', fontSize: '14px', color: '#666' }}>
当前选择范围: {value[0]} - {value[1]}
</div>
</div>
<div style={{ marginBottom: '30px' }}>
<h2>自定义范围选择器</h2>
<NtrpRange
min={0}
max={100}
step={1}
value={[20, 80]}
onChange={(val) => console.log('Custom range:', val)}
/>
<div style={{ marginTop: '16px', fontSize: '14px', color: '#666' }}>
固定范围: 20 - 80
</div>
</div>
<div style={{ marginBottom: '30px' }}>
<h2>禁用状态</h2>
<NtrpRange
min={1}
max={10}
step={1}
value={[3, 7]}
disabled={true}
/>
<div style={{ marginTop: '16px', fontSize: '14px', color: '#999' }}>
此选择器已被禁用
</div>
</div>
<div style={{ marginBottom: '30px' }}>
<h2>样式说明</h2>
<div style={{ fontSize: '14px', color: '#666', lineHeight: '1.6' }}>
<p>✅ 网球图标 + "NTRP水平区间"标题</p>
<p>✅ 左右范围标签（"2.0及以下"、"4.0及以上"）</p>
<p>✅ 圆角矩形轨道容器，带有边框和阴影</p>
<p>✅ 白色圆形滑块手柄，黑色边框和阴影</p>
<p>✅ 黑色轨道填充条</p>
<p>✅ 五个浅灰色标记点</p>
</div>
</div>
</div>
);
};
export default StyleTest;

35
src/components/Range/test.tsx
View File

@@ -1,35 +0,0 @@
import React, { useState } from 'react';
import NtrpRange from './index';
const TestPage: React.FC = () => {
const [value, setValue] = useState<[number, number]>([2.0, 4.0]);
return (
<div style={{ padding: '20px' }}>
<h1>NtrpRange 组件测试</h1>
<div style={{ marginBottom: '20px' }}>
<NtrpRange
min={2.0}
max={4.0}
step={0.5}
value={value}
onChange={setValue}
/>
</div>
<div style={{ fontSize: '14px', color: '#666' }}>
当前值: {value[0].toFixed(1)} - {value[1].toFixed(1)}
</div>
<div style={{ marginTop: '20px', fontSize: '12px', color: '#999' }}>
<p>测试说明:</p>
<p>1. 拖拽左右滑块手柄</p>
<p>2. 观察值的变化</p>
<p>3. 检查样式是否正确</p>
</div>
</div>
);
};
export default TestPage;