feat(slider): support vertical slider #1484
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/tusimple/naive-ui/HhNPMUmAbqx98USh973uzmyQt3b1 |
Codecov Report
@@ Coverage Diff @@
## main #1484 +/- ##
==========================================
+ Coverage 64.27% 64.66% +0.39%
==========================================
Files 885 885
Lines 17122 16981 -141
Branches 4048 3995 -53
==========================================
- Hits 11005 10981 -24
+ Misses 5379 5263 -116
+ Partials 738 737 -1
Continue to review full report at Codecov.
|
|
Sorry I forgot to deal with |
src/slider/src/Slider.tsx
Outdated
| @@ -129,13 +127,22 @@ export default defineComponent({ | |||
| uncontrolledValueRef | |||
| ) | |||
|
|
|||
| const wittyPlacementRef = computed(() => { | |||
There was a problem hiding this comment.
| const wittyPlacementRef = computed(() => { | |
| const mergedPlacementRef = computed(() => { |
Follow the covention of the library.
src/slider/styles/_common.ts
Outdated
| @@ -1,5 +1,6 @@ | |||
| export default { | |||
| railHeight: '4px', | |||
| verticalRailWidth: '4px', | |||
There was a problem hiding this comment.
railWidthVertical
表示状态的往后放，这是个对样式变量命名的最佳实践
margin-left, margin-right, ...etc
src/slider/src/styles/index.cssr.ts
Outdated
| border-radius: var(--indicator-border-radius); | ||
| color: var(--indicator-text-color); | ||
| background-color: var(--indicator-color); | ||
| box-shadow: var(--indicator-box-shadow); | ||
| `, [ | ||
| fadeInScaleUpTransition() | ||
| ]), | ||
| c('.v-binder-follower-content', [ |
There was a problem hiding this comment.
这种样式的编写的时候不要依赖第三方库的类，不然那边一改就完犊子了，要内聚
There was a problem hiding this comment.
要不我根据 placement 自定义个类名
There was a problem hiding this comment.
placement 可以用 v-follower 那个，那个算是 vueuc 对外暴露的稳定接口
src/slider/src/Slider.tsx
Outdated
| } | ||
| ]} | ||
| style={this.cssVars as CSSProperties} | ||
| onKeydown={this.handleKeyDown} | ||
| // @ts-expect-error |
There was a problem hiding this comment.
capture 这个 PR 半年多了，vue 还没合
There was a problem hiding this comment.
我看官网推荐我这么捕获，我换个写法吧，或者有更好的处理方式？主要是为了解决拖拽跟点击事件冲突了，拖拽结束之后还会触发一次点击预判，导致有时候拖拽不准
There was a problem hiding this comment.
没事，这样就可以，我也忘了 capture 我是咋处理的了
src/slider/src/Slider.tsx
Outdated
| @@ -305,18 +339,28 @@ export default defineComponent({ | |||
| } | |||
| } | |||
| } | |||
| function handleRailMouseDown (): void { | |||
| handleClickedRailRef.value = true | |||
There was a problem hiding this comment.
是的，我之前用的 draggingRef，但是看了下其它两个的命名就改过来了
| @@ -28,5 +30,7 @@ format | |||
| | range | `boolean` | `false` | Whether the slider uses range value. | | |||
| | step | `number` | `1` | Step of the slider. | | |||
| | tooltip | `boolean` | `true` | Whether to show tooltip. | | |||
| | inverted | `boolean` | `false` | Whether to inverted the track. | | |||
| @@ -1 +1 @@ | |||
| export type OnUpdateValueImpl = (value: number | [number, number]) => void | |||
| export type OnUpdateValueImpl = (value: number | number[]) => void | |||
There was a problem hiding this comment.
🤣做着做着感觉可以处理多个value，就放开出来了，虽然没想到具体的应用场景
There was a problem hiding this comment.
那就辛苦你了，今天终于有时间来做了
close #1468.