diff --git a/CHANGELOG.md b/CHANGELOG.md index e2e9b36de..9deb57a32 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,7 +19,7 @@ - 修复 Input Number min max 属性设置后点击加减出现的崩溃的bug - 优化 TimePicker/DatePicker 输入日期行为 - 修复 DatePicker 输入禁用状态的日期却生效的问题 #484 - +- 新增 Slider 的 disabled 属性 #### 非兼容性更新 diff --git a/examples/docs/zh-cn/slider.md b/examples/docs/zh-cn/slider.md index 49d8b5d5d..0c9c08e2d 100644 --- a/examples/docs/zh-cn/slider.md +++ b/examples/docs/zh-cn/slider.md @@ -4,9 +4,10 @@ return { value1: 0, value2: 50, - value3: 0, + value3: 42, value4: 0, - value5: 0 + value5: 0, + value6: 0, }; } } @@ -58,6 +59,10 @@ 自定义初始值 +
+ 禁用 + +
diff --git a/packages/theme-default/src/common/var.css b/packages/theme-default/src/common/var.css index a745ce9b8..ed6a59866 100644 --- a/packages/theme-default/src/common/var.css +++ b/packages/theme-default/src/common/var.css @@ -377,8 +377,9 @@ --------------------------*/ --slider-main-background-color: var(--color-primary); --slider-runway-background-color: #e5e9f2; - --slider-runway-hover-color: #1d8ce0; + --slider-button-hover-color: #1d8ce0; --slider-stop-background-color: #c0ccda; + --slider-disable-color: #c0ccda; /*Steps --------------------------*/ diff --git a/packages/theme-default/src/slider.css b/packages/theme-default/src/slider.css index c99f9f185..9c6144fc0 100644 --- a/packages/theme-default/src/slider.css +++ b/packages/theme-default/src/slider.css @@ -1,5 +1,6 @@ @charset "UTF-8"; @import "./input-number.css"; +@import "./tooltip.css"; @import "./common/var.css"; @component-namespace el { @@ -19,6 +20,42 @@ margin-right: 160px; width: auto; } + + &.disabled { + cursor: default; + + .el-slider__bar, .el-slider__button { + background-color: var(--slider-disable-color); + } + + .el-slider__button-wrapper { + &:hover, + &.hover { + cursor: not-allowed; + } + + &.dragging { + cursor: not-allowed; + } + } + + .el-slider__button { + &:hover, + &.hover, + &.dragging { + transform: scale(1); + } + + &:hover, + &.hover { + cursor: not-allowed; + } + + &.dragging { + cursor: not-allowed; + } + } + } } @e input { @@ -41,60 +78,42 @@ top: -16px; transform: translateX(-50%); background-color: transparent; + text-align: center; + + .el-tooltip { + margin-top: 9px; + } + + &:hover, + &.hover { + cursor: grab; + } + + &.dragging { + cursor: grabbing; + } } @e button { size: 12px; background-color: var(--slider-main-background-color); border-radius: 50%; - position: absolute; - top: 12px; - left: 12px; - cursor: pointer; transition: .2s; &:hover, &.hover, &.dragging { transform: scale(1.5); - background-color: #1d8ce0; - } - } - - @e pop { - @utils-user-select none; - font-size: 12px; - line-height: 26px; - text-align: center; - size: 26px; - border-radius: 50%; - background-color: var(--slider-main-background-color); - color: #fff; - cursor: default; - z-index: var(--index-top); - transition: transform .3s, opacity .3s; - transform-origin: center bottom; - - &::before { - triangle: 9px top var(--slider-main-background-color); - position: absolute; - top: -14px; - left: 4px; + background-color: var(--slider-button-hover-color); } - &::after { - triangle: 9px bottom var(--slider-main-background-color); - position: absolute; - bottom: -14px; - left: 4px; + &:hover, + &.hover { + cursor: grab; } - &.top::after { - content: ''; - } - - &.bottom::before { - content: ''; + &.dragging { + cursor: grabbing; } } @@ -105,11 +124,5 @@ background-color: var(--slider-stop-background-color); transform: translateX(-50%); } - - .popper-fade-enter, - .popper-fade-leave-active { - transform: scale(0.1); - opacity: 0; - } } } diff --git a/test/unit/specs/slider.spec.js b/test/unit/specs/slider.spec.js index 4a7677a5b..0d036985c 100644 --- a/test/unit/specs/slider.spec.js +++ b/test/unit/specs/slider.spec.js @@ -4,8 +4,7 @@ import Slider from 'packages/slider'; describe('Slider', () => { it('create', () => { const vm = createTest(Slider); - const popup = vm.$el.querySelector('.el-slider__pop'); - expect(popup.textContent).to.equal('0'); + expect(vm.value).to.equal(0); }); it('should not exceed min and max', done => { @@ -36,7 +35,7 @@ describe('Slider', () => { }, 100); }); - it('show tooltip', done => { + it('show tooltip', () => { const vm = createVue({ template: `
@@ -52,14 +51,10 @@ describe('Slider', () => { } }, true); const slider = vm.$children[0]; - const popup = vm.$el.querySelector('.el-slider__pop'); - slider.onDragStart({ clientX: 0 }); - vm.$nextTick(() => { - expect(popup.style.display).to.not.equal('none'); - slider.onDragEnd(); - expect(slider.showTip).to.false; - done(); - }); + slider.handleMouseEnter(); + expect(slider.$refs.tooltip.showPopper).to.true; + slider.handleMouseLeave(); + expect(slider.$refs.tooltip.showPopper).to.false; }); it('drag', done => { @@ -110,6 +105,31 @@ describe('Slider', () => { }, 150); }); + it('disabled', done => { + const vm = createVue({ + template: ` +
+ +
+ `, + + data() { + return { + value: 0 + }; + } + }, true); + const slider = vm.$children[0]; + setTimeout(() => { + slider.onButtonDown({ clientX: 0 }); + slider.onDragging({ clientX: 100 }); + slider.onDragEnd(); + slider.onSliderClick({ clientX: 200 }); + expect(vm.value).to.equal(0); + done(); + }, 100); + }); + it('show input', done => { const vm = createVue({ template: `