mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-21 04:50:14 +08:00
feat(slider): make active dots have active color
This commit is contained in:
parent
8a2e695ab1
commit
53b24267b0
@ -12,11 +12,20 @@
|
||||
>
|
||||
<div ref="railRef" class="n-slider-rail" @click="handleRailClick">
|
||||
<div class="n-slider-rail__fill" :style="fillStyle" />
|
||||
<div v-if="marks" class="n-slider-dots">
|
||||
<div
|
||||
v-if="marks"
|
||||
class="n-slider-dots"
|
||||
:class="{
|
||||
'n-slider-dots--transition-disabled': dotTransitionDisabled
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-for="mark in computedMarks"
|
||||
:key="mark.label"
|
||||
class="n-slider-dot"
|
||||
:class="{
|
||||
'n-slider-dot--active': mark.active
|
||||
}"
|
||||
:style="{
|
||||
...mark.style
|
||||
}"
|
||||
@ -261,6 +270,7 @@ export default {
|
||||
active: activeRef,
|
||||
prevActive: prevActiveRef,
|
||||
clicked: clickedRef,
|
||||
dotTransitionDisabled: ref(false),
|
||||
// https://github.com/vuejs/vue-next/issues/2283
|
||||
handleRef1: ref(null),
|
||||
handleRef2: ref(null),
|
||||
@ -272,17 +282,21 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
computedMarks () {
|
||||
const marks = []
|
||||
for (const value of Object.keys(this.marks)) {
|
||||
marks.push({
|
||||
label: this.marks[value],
|
||||
const mergedMarks = []
|
||||
const { marks, max, min, range, mergedValue } = this
|
||||
for (const key of Object.keys(marks)) {
|
||||
const num = Number(key)
|
||||
mergedMarks.push({
|
||||
active: range
|
||||
? mergedValue[0] <= num && mergedValue[1] >= num
|
||||
: mergedValue >= num,
|
||||
label: marks[key],
|
||||
style: {
|
||||
left:
|
||||
((Number(value) - this.min) / (this.max - this.min)) * 100 + '%'
|
||||
left: ((num - min) / (max - min)) * 100 + '%'
|
||||
}
|
||||
})
|
||||
}
|
||||
return marks
|
||||
return mergedMarks
|
||||
},
|
||||
fillStyle () {
|
||||
if (this.range) {
|
||||
@ -351,6 +365,13 @@ export default {
|
||||
watch: {
|
||||
mergedValue (newValue, oldValue) {
|
||||
const { changeSource } = this
|
||||
if (this.marks) {
|
||||
if (this.dotTransitionDisabled) return
|
||||
this.dotTransitionDisabled = true
|
||||
this.$nextTick(() => {
|
||||
this.dotTransitionDisabled = false
|
||||
})
|
||||
}
|
||||
if (this.range && newValue) {
|
||||
if (oldValue && oldValue[1] !== newValue[1]) {
|
||||
this.$nextTick(() => {
|
||||
|
@ -28,7 +28,8 @@ export default c([
|
||||
dotWidth,
|
||||
dotBorderRadius,
|
||||
indicatorBorderRadius,
|
||||
fontSize
|
||||
fontSize,
|
||||
dotBorderActive
|
||||
},
|
||||
$global: {
|
||||
cubicBezierEaseInOut,
|
||||
@ -50,8 +51,8 @@ export default c([
|
||||
raw: `
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
left: calc(${handleSize} / 2);
|
||||
right: calc(${handleSize} / 2);
|
||||
`
|
||||
}, [
|
||||
cB('slider-mark', {
|
||||
@ -137,11 +138,16 @@ export default c([
|
||||
cB('slider-dots', {
|
||||
raw: `
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
left: calc(${handleSize} / 2);
|
||||
right: calc(${handleSize} / 2);
|
||||
`
|
||||
}, [
|
||||
cM('transition-disabled', [
|
||||
cB('slider-dot', {
|
||||
transition: 'none'
|
||||
})
|
||||
]),
|
||||
cB('slider-dot', {
|
||||
raw: `
|
||||
transition:
|
||||
@ -159,8 +165,12 @@ export default c([
|
||||
border: dotBorder,
|
||||
backgroundColor: dotColor,
|
||||
boxShadow: dotBoxShadow
|
||||
}, [
|
||||
cM('active', {
|
||||
border: dotBorderActive
|
||||
})
|
||||
])
|
||||
])
|
||||
]),
|
||||
cTB('slider-handle-indicator', {
|
||||
raw: `
|
||||
|
@ -36,7 +36,8 @@ export default create({
|
||||
indicatorBoxShadow: boxShadow,
|
||||
indicatorTextColor: textColor2Overlay,
|
||||
indicatorBorderRadius: borderRadius,
|
||||
dotBorder: `2px solid ${primaryColorSuppl}`,
|
||||
dotBorder: `2px solid ${railColorOverlay}`,
|
||||
dotBorderActive: `2px solid ${primaryColorSuppl}`,
|
||||
dotBoxShadow: null
|
||||
}
|
||||
}
|
||||
|
@ -39,7 +39,8 @@ export default create({
|
||||
indicatorBoxShadow: boxShadow,
|
||||
indicatorTextColor: baseColor,
|
||||
indicatorBorderRadius: borderRadius,
|
||||
dotBorder: `2px solid ${primaryColor}`,
|
||||
dotBorder: `2px solid ${railColorOverlay}`,
|
||||
dotBorderActive: `2px solid ${primaryColor}`,
|
||||
dotBoxShadow: null
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user