mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-25 14:10:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(slider): expand rail width to its dom width

Browse Source
This commit is contained in:
07akioni 2020-12-27 16:24:16 +08:00
parent 6e0e1a2df0
commit 336c460378
2 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/slider/src/Slider.vue
View File

@ -329,17 +329,21 @@ export default {
return null
},
firstHandleStyle () {
const { handleValue1, max, min, handleClicked1 } = this
const percentage = ((handleValue1 - min) / (max - min)) * 100
return {
left:
((this.handleValue1 - this.min) / (this.max - this.min)) * 100 + '%',
zIndex: this.handleClicked1 ? 1 : 0
left: `${percentage}%`,
transform: `translateX(${-percentage}%)`,
zIndex: handleClicked1 ? 1 : 0
}
},
secondHandleStyle () {
const { handleValue2, max, min, handleClicked2 } = this
const percentage = ((handleValue2 - min) / (max - min)) * 100
return {
left:
((this.handleValue2 - this.min) / (this.max - this.min)) * 100 + '%',
zIndex: this.handleClicked2 ? 1 : 0
left: `${percentage}%`,
transform: `translateX(${-percentage}%)`,
zIndex: handleClicked2 ? 1 : 0
}
}
},

16
src/slider/src/styles/themed-base.cssr.js
View File

@ -42,31 +42,27 @@ export default c([
padding: calc((${handleSize} - ${railHeight}) / 2) 0;
position: relative;
z-index: 0;
width: calc(100% - 14px);
margin-left: 7px;
margin-right: 7px;
width: 100%;
cursor: pointer;
`
}, [
cB('slider-marks', {
raw: `
position: absolute;
top: 14px;
top: 18px;
left: 0;
right: 0;
`
}, [
cB('slider-mark', {
raw: `
position: absolute;
transform: translateX(-50%);
`
position: 'absolute',
transform: 'translateX(-50%)'
})
]),
cM('with-mark', {
raw: `
width: calc(100% - 24px);
margin: 8px 12px 32px 12px;
width: 100%;
margin: 8px 0 32px 0;
`
}),
c('&:hover', [