diff --git a/packages/slider/demo/index.vue b/packages/slider/demo/index.vue index 87331cb12..626251324 100644 --- a/packages/slider/demo/index.vue +++ b/packages/slider/demo/index.vue @@ -10,8 +10,8 @@ @@ -97,7 +97,7 @@ export default { data() { return { value1: 50, - value2: 50, + value2: 0, value3: 50, value4: 50, value5: 50, diff --git a/packages/slider/en-US.md b/packages/slider/en-US.md index 5d4aba47b..a5d96d66a 100644 --- a/packages/slider/en-US.md +++ b/packages/slider/en-US.md @@ -35,7 +35,7 @@ export default { ### Range ```html - + ``` ### Disabled diff --git a/packages/slider/index.js b/packages/slider/index.js index a583f9b20..f13a28f1e 100644 --- a/packages/slider/index.js +++ b/packages/slider/index.js @@ -1,4 +1,4 @@ -import { use, isDef } from '../utils'; +import { use } from '../utils'; import { TouchMixin } from '../mixins/touch'; import { preventDefault } from '../utils/dom/event'; @@ -28,6 +28,12 @@ export default sfc({ } }, + computed: { + range() { + return this.max - this.min; + } + }, + methods: { onTouchStart(event) { if (this.disabled) { @@ -45,17 +51,17 @@ export default sfc({ } if (this.dragStatus === 'start') { - this.dragStatus = 'draging'; this.$emit('drag-start'); } preventDefault(event, true); this.touchMove(event); + this.dragStatus = 'draging'; const rect = this.$el.getBoundingClientRect(); const delta = this.vertical ? this.deltaY : this.deltaX; const total = this.vertical ? rect.height : rect.width; - const diff = (delta / total) * 100; + const diff = (delta / total) * this.range; this.newValue = this.startValue + diff; this.updateValue(this.newValue); @@ -66,14 +72,12 @@ export default sfc({ return; } - if (isDef(this.newValue)) { + if (this.dragStatus === 'draging') { this.updateValue(this.newValue, true); + this.$emit('drag-end'); } - if (this.dragStatus === 'draging') { - this.$emit('drag-end'); - this.dragStatus = ''; - } + this.dragStatus = ''; }, onClick(event) { @@ -84,7 +88,7 @@ export default sfc({ const rect = this.$el.getBoundingClientRect(); const delta = this.vertical ? event.clientY - rect.top : event.clientX - rect.left; const total = this.vertical ? rect.height : rect.width; - const value = (delta / total) * 100; + const value = (delta / total) * this.range + this.min; this.updateValue(value, true); }, @@ -115,7 +119,7 @@ export default sfc({ const crossAxis = vertical ? 'width' : 'height'; const barStyle = { - [mainAxis]: `${this.format(this.value)}%`, + [mainAxis]: `${((this.value - this.min) * 100) / this.range}%`, [crossAxis]: this.barHeight, background: this.activeColor }; diff --git a/packages/slider/test/__snapshots__/demo.spec.js.snap b/packages/slider/test/__snapshots__/demo.spec.js.snap index 787e3bc1c..78f3bb387 100644 --- a/packages/slider/test/__snapshots__/demo.spec.js.snap +++ b/packages/slider/test/__snapshots__/demo.spec.js.snap @@ -14,7 +14,7 @@ exports[`renders demo correctly 1`] = `
-
+
diff --git a/packages/slider/zh-CN.md b/packages/slider/zh-CN.md index b4ecdafcd..1c755a870 100644 --- a/packages/slider/zh-CN.md +++ b/packages/slider/zh-CN.md @@ -35,7 +35,7 @@ export default { ### 指定选择范围 ```html - + ``` ### 禁用