Skip to content

E
Element
Commit 6afa2ba6 authored by liyl's avatar liyl Committed by 杨奕
Browse files
Options

Slider: feature - add format-tooltip prop (#3657) 

* Slider: add format-tooltip prop

* Docs: update slider.md

* Docs: update slider.md
parent f9d8a0e0
Hide whitespace changes
Inline Side-by-side
Showing with 97 additions and 28 deletions
examples/docs/en-US/slider.md
View file @ 6afa2ba6
......@@ -5,12 +5,18 @@
value1: 0,
value2: 50,
value3: 36,
value4: 42,
value5: 0,
value4: 48,
value5: 42,
value6: 0,
value7: 0,
value8: [4, 8]
value8: 0,
value9: [4, 8]
};
},
methods: {
formatTooltip(val) {
return val / 100;
}
}
}
</script>
......@@ -39,9 +45,13 @@ The current value is displayed when the slider is being dragged.
<span class="demonstration">Hide Tooltip</span>
<el-slider v-model="value3" :show-tooltip="false"></el-slider>
</div>
<div class="block">
<span class="demonstration">Format Tooltip</span>
<el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
</div>
<div class="block">
<span class="demonstration">Disabled</span>
<el-slider v-model="value4" disabled></el-slider>
<el-slider v-model="value5" disabled></el-slider>
</div>
</template>
......@@ -52,7 +62,13 @@ The current value is displayed when the slider is being dragged.
value1: 0,
value2: 50,
value3: 36,
value4: 42
value4: 48,
value5: 42
}
},
methods: {
formatTooltip(val) {
return val / 100;
}
}
}
......@@ -71,14 +87,14 @@ The options can be discrete.
<div class="block">
<span class="demonstration">Breakpoints not displayed</span>
<el-slider
v-model="value5"
v-model="value6"
:step="10">
</el-slider>
</div>
<div class="block">
<span class="demonstration">Breakpoints displayed</span>
<el-slider
v-model="value6"
v-model="value7"
:step="10"
show-stops>
</el-slider>
......@@ -89,8 +105,8 @@ The options can be discrete.
export default {
data() {
return {
value5: 0,
value6: 0
value6: 0,
value7: 0
}
}
}
......@@ -108,7 +124,7 @@ Set value via a input box.
<template>
<div class="block">
<el-slider
v-model="value7"
v-model="value8"
show-input>
</el-slider>
</div>
......@@ -118,7 +134,7 @@ Set value via a input box.
export default {
data() {
return {
value7: 0
value8: 0
}
}
}
......@@ -135,7 +151,7 @@ Selecting a range of values is supported.
<template>
<div class="block">
<el-slider
v-model="value8"
v-model="value9"
range
show-stops
:max="10">
......@@ -147,7 +163,7 @@ Selecting a range of values is supported.
export default {
data() {
return {
value8: [4, 8]
value9: [4, 8]
}
}
}
......@@ -166,6 +182,7 @@ Selecting a range of values is supported.
| show-input-controls | whether to display control buttons when `show-input` is true | boolean | — | true |
| show-stops | whether to display breakpoints | boolean | — | false |
| show-tooltip | whether to display tooltip value | boolean | — | true |
| format-tooltip | format to display tooltip value | Function(value) | — | — |
| range | whether to select a range | boolean | — | false |
## Events
......
examples/docs/zh-CN/slider.md
View file @ 6afa2ba6
......@@ -5,12 +5,18 @@
value1: 0,
value2: 50,
value3: 36,
value4: 42,
value5: 0,
value4: 48,
value5: 42,
value6: 0,
value7: 0,
value8: [4, 8]
value8: 0,
value9: [4, 8]
};
},
methods: {
formatTooltip(val) {
return val / 100;
}
}
}
</script>
......@@ -65,9 +71,13 @@
<span class="demonstration">隐藏 Tooltip</span>
<el-slider v-model="value3" :show-tooltip="false"></el-slider>
</div>
<div class="block">
<span class="demonstration">格式化 Tooltip</span>
<el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
</div>
<div class="block">
<span class="demonstration">禁用</span>
<el-slider v-model="value4" disabled></el-slider>
<el-slider v-model="value5" disabled></el-slider>
</div>
</template>
......@@ -78,7 +88,13 @@
value1: 0,
value2: 50,
value3: 36,
value4: 42
value4: 48,
value5: 42
}
},
methods: {
formatTooltip(val) {
return val / 100;
}
}
}
......@@ -96,14 +112,14 @@
<div class="block">
<span class="demonstration">不显示间断点</span>
<el-slider
v-model="value5"
v-model="value6"
:step="10">
</el-slider>
</div>
<div class="block">
<span class="demonstration">显示间断点</span>
<el-slider
v-model="value6"
v-model="value7"
:step="10"
show-stops>
</el-slider>
......@@ -114,8 +130,8 @@
export default {
data() {
return {
value5: 0,
value6: 0
value6: 0,
value7: 0
}
}
}
......@@ -132,7 +148,7 @@
<template>
<div class="block">
<el-slider
v-model="value7"
v-model="value8"
show-input>
</el-slider>
</div>
......@@ -142,7 +158,7 @@
export default {
data() {
return {
value7: 0
value8: 0
}
}
}
......@@ -159,7 +175,7 @@
<template>
<div class="block">
<el-slider
v-model="value8"
v-model="value9"
range
show-stops
:max="10">
......@@ -171,7 +187,7 @@
export default {
data() {
return {
value8: [4, 8]
value9: [4, 8]
}
}
}
......@@ -190,6 +206,7 @@
| show-input-controls | 在显示输入框的情况下，是否显示输入框的控制按钮 | boolean | — | true|
| show-stops | 是否显示间断点 | boolean | — | false |
| show-tooltip | 是否显示 tooltip | boolean | — | true |
| format-tooltip | 格式化 tooltip message | Function(value) | — | — |
| range | 是否为范围选择 | boolean | — | false |
### Events
......
packages/slider/src/button.vue
View file @ 6afa2ba6
......@@ -8,7 +8,7 @@
:style="{ left: currentPosition }"
ref="button">
<el-tooltip placement="top" ref="tooltip" :disabled="!showTooltip">
<span slot="content">{{ value }}</span>
<span slot="content">{{ formatValue }}</span>
<div class="el-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div>
</el-tooltip>
</div>
......@@ -70,6 +70,14 @@
currentPosition() {
return `${ (this.value - this.min) / (this.max - this.min) * 100 }%`;
},
enableFormat() {
return this.$parent.formatTooltip instanceof Function;
},
formatValue() {
return this.enableFormat && this.$parent.formatTooltip(this.value) || this.value;
}
},
......@@ -159,4 +167,3 @@
}
};
</script>
packages/slider/src/main.vue
View file @ 6afa2ba6
......@@ -83,6 +83,7 @@
type: Boolean,
default: true
},
formatTooltip: Function,
disabled: {
type: Boolean,
default: false
......
test/unit/specs/slider.spec.js
View file @ 6afa2ba6
......@@ -81,6 +81,33 @@ describe('Slider', () => {
expect(slider.$refs.tooltip.disabled).to.true;
});
it('format tooltip', () => {
vm = createVue({
template: `
<div>
<el-slider v-model="value" :format-tooltip="formatTooltip">
</el-slider>
</div>
`,
data() {
return {
value: 0
};
},
methods: {
formatTooltip(val) {
return '$' + val;
}
}
}, true);
const slider = vm.$children[0].$children[0];
expect(slider.formatTooltip).to.function;
vm.$nextTick(() => {
expect(slider.formatValue).to.equal('$0');
});
});
it('drag', done => {
vm = createVue({
template: `
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment