bezier-slider 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -43
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
基于**二次贝塞尔曲线**的弧形图标滑块组件。图标沿平滑弧线排列，支持拖动、吸附、边界回弹，以及近大远小的视觉反馈。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[demo](https://jimole775.github.io/bezier-slider/demo)
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
@@ -24,38 +24,6 @@
|
|
|
24
24
|
|
|
25
25
|
---
|
|
26
26
|
|
|
27
|
-
## 文件结构
|
|
28
|
-
|
|
29
|
-
```
|
|
30
|
-
slider-master/
|
|
31
|
-
├── demo/
|
|
32
|
-
│ ├── index.html # 演示页（滑轨预览 + 参数调节 + 代码输出）
|
|
33
|
-
│ ├── native-main.js # 演示入口
|
|
34
|
-
│ └── shared/ # 演示公共样式与工具
|
|
35
|
-
├── src/
|
|
36
|
-
│ ├── bezier-slider.native.js # 核心：拖动交互、图标布局、贝塞尔轨迹（不含滑轨绘制）
|
|
37
|
-
│ ├── track-renderer.js # 可选：默认 SVG 滑轨渲染（ensure / update / renderDefaultTrack）
|
|
38
|
-
│ ├── index.js # 包入口 → export BezierSlider + 滑轨工具
|
|
39
|
-
│ ├── native-bridge.js # 框架封装共享：pickNativeOptions / mountNativeSlider
|
|
40
|
-
│ ├── vue-component.js # Vue 包入口 → export BezierSlider 组件 + 滑轨工具
|
|
41
|
-
│ ├── react-component.js # React 包入口 → export BezierSlider 组件 + 滑轨工具
|
|
42
|
-
│ └── components/
|
|
43
|
-
│ ├── BezierSlider.vue # Vue 3 薄封装（内部使用 native 核心）
|
|
44
|
-
│ └── BezierSlider.jsx # React 薄封装（内部使用 native 核心）
|
|
45
|
-
├── dist/ # npm run build 生成（.gitignore，使用前需先 build）
|
|
46
|
-
│ ├── bezier-slider.mjs # import 'bezier-slider'
|
|
47
|
-
│ ├── bezier-slider.vue.mjs # import 'bezier-slider/vue'
|
|
48
|
-
│ ├── bezier-slider.react.mjs # import 'bezier-slider/react'
|
|
49
|
-
│ └── style.css # Vue 组件样式
|
|
50
|
-
├── package.json
|
|
51
|
-
├── package-lock.json
|
|
52
|
-
├── vite.config.js
|
|
53
|
-
├── .gitignore
|
|
54
|
-
└── README.md
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
---
|
|
58
|
-
|
|
59
27
|
## 快速开始
|
|
60
28
|
|
|
61
29
|
### 方式一：原生 JavaScript
|
|
@@ -652,16 +620,6 @@ console.log(BezierSlider.DEFAULTS);
|
|
|
652
620
|
|
|
653
621
|
---
|
|
654
622
|
|
|
655
|
-
## 技术说明
|
|
656
|
-
|
|
657
|
-
- 滑轨类型：**二次贝塞尔**（`M … Q …`），非三次贝塞尔，非折线近似
|
|
658
|
-
- 图标位置：沿曲线参数 `t` 均匀偏移，中心固定在 `centerT`
|
|
659
|
-
- 拖动区域：初始化时通过 `container.clientWidth / clientHeight` 动态测量
|
|
660
|
-
- 边界回弹：越界拖动时阻尼递增，松手后以 `easeOutBack` 回弹至合法边界
|
|
661
|
-
- 无第三方依赖，纯原生 JavaScript + Vue 3
|
|
662
|
-
|
|
663
|
-
---
|
|
664
|
-
|
|
665
623
|
## 版本记录
|
|
666
624
|
|
|
667
625
|
| 版本 | 日期 | 说明 |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bezier-slider",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "二次贝塞尔弧形图标滑块组件，支持原生 JavaScript、Vue 3 和 React",
|
|
5
5
|
"main": "dist/bezier-slider.mjs",
|
|
6
6
|
"module": "dist/bezier-slider.mjs",
|
|
@@ -52,6 +52,7 @@
|
|
|
52
52
|
"slider",
|
|
53
53
|
"carousel",
|
|
54
54
|
"arc-slider",
|
|
55
|
+
"bezier-slider",
|
|
55
56
|
"bezier",
|
|
56
57
|
"vue3",
|
|
57
58
|
"react",
|