drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feature slider markers

Browse source
This commit is contained in:
mo.duan 2019-11-22 17:25:45 +08:00
parent 00d6aaf477
commit 09279ce908
5 changed files with 117 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

113
examples/routers/slider.vue
View file

@ -1,103 +1,30 @@
<template>
<Form :model="formItem" :label-width="80">
<FormItem label="Input">
<Input v-model="formItem.input" placeholder="Enter something..."></Input>
</FormItem>
<FormItem label="Select">
<Select v-model="formItem.select">
<Option value="beijing">New York</Option>
<Option value="shanghai">London</Option>
<Option value="shenzhen">Sydney</Option>
</Select>
</FormItem>
<FormItem label="DatePicker">
<Row>
<Col span="11">
<DatePicker type="date" placeholder="Select date" v-model="formItem.date"></DatePicker>
</Col>
<Col span="2" style="text-align: center">-</Col>
<Col span="11">
<TimePicker type="time" placeholder="Select time" v-model="formItem.time"></TimePicker>
</Col>
</Row>
</FormItem>
<FormItem label="Radio">
<RadioGroup v-model="formItem.radio">
<Radio label="male">Male</Radio>
<Radio label="female">Female</Radio>
</RadioGroup>
</FormItem>
<FormItem label="Checkbox">
<CheckboxGroup v-model="formItem.checkbox">
<Checkbox label="Eat"></Checkbox>
<Checkbox label="Sleep"></Checkbox>
<Checkbox label="Run"></Checkbox>
<Checkbox label="Movie"></Checkbox>
</CheckboxGroup>
</FormItem>
<FormItem label="Switch">
<i-switch v-model="formItem.switch" size="large">
<span slot="open">On</span>
<span slot="close">Off</span>
</i-switch>
</FormItem>
<FormItem label="Slider">
<Slider v-model="formItem.slider" range></Slider>
</FormItem>
<FormItem label="Text">
<Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
</FormItem>
<FormItem>
<Button type="primary">Submit</Button>
<Button type="default" ghost style="margin-left: 8px">Cancel</Button>
</FormItem>
</Form>
<div style="margin: 200px;">
<Slider v-model="value5"></Slider>
<Slider v-model="value6" :step="10" show-stops></Slider>
<br><br>
<Slider v-model="value7" range :marks="marks"></Slider>
</div>
</template>
<script>
export default {
data () {
return {
formItem: {
input: '',
select: '',
radio: 'male',
checkbox: [],
switch: true,
date: '',
time: '',
slider: [20, 50],
textarea: ''
value5: 10,
value6: 30,
value7: [20, 100],
marks: {
0: '0°C',
26: '26°C',
37: '37°C',
100: {
style: {
color: '#1989FA'
},
label: this.$createElement('strong', '100%')
}
}
}
}
}
</script>
<!--<template>-->
<!--<div>-->
<!--<Button type="primary" @click="modal1 = true">Display dialog box</Button>-->
<!--<Modal v-model="modal1">-->
<!--<Slider v-model="value2" range show-tip="always"></Slider>-->
<!--</Modal>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--modal1: false,-->
<!--value2: [20, 50],-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--ok () {-->
<!--this.$Message.info('Clicked ok');-->
<!--},-->
<!--cancel () {-->
<!--this.$Message.info('Clicked cancel');-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
</script>

16
src/components/slider/marker.js Normal file
View file

@ -0,0 +1,16 @@
export default {
name: 'SliderMarker',
props: {
mark: {
type: [String, Object]
}
},
render (h) {
let label = typeof this.mark === 'string' ? this.mark : [this.mark.label];
return h('div', {
class: 'ivu-slider-marks-item',
style: this.mark.style || {}
}, label);
}
};

70
src/components/slider/slider.vue
View file

@ -7,7 +7,7 @@
:max="max"
:step="step"
:value="exportValue[0]"
:disabled="disabled"
:disabled="itemDisabled"
:active-change="activeChange"
@on-change="handleInputChange"></Input-number>
<div
@ -15,18 +15,37 @@
ref="slider" @click.self="sliderClick"
>
<input type="hidden" :name="name" :value="exportValue">
<template v-if="showStops">
<div
:class="[prefixCls + '-stop']"
v-for="item in stops"
:style="{ 'left': item + '%' }"
@click.self="sliderClick"
></div>
</template>
<div
:class="[prefixCls + '-bar']"
:style="barStyle"
@click.self="sliderClick"></div>
<template v-if="showStops">
<div
:class="[prefixCls + '-stop']"
v-for="(item,index) in stops"
:key="index"
:style="{ 'left': item + '%' }"
@click.self="sliderClick"
></div>
</template>
<template v-if="markList.length > 0">
<div
v-for="(item, key) in markList"
:key="key"
:class="[prefixCls + '-stop']"
:style="{ 'left': item.position + '%' }"
@click.self="sliderClick"
></div>
<div class="ivu-slider-marks">
<SliderMarker
v-for="(item, key) in markList"
:key="key"
:mark="item.mark"
:style="{ 'left': item.position + '%' }"
@click.native="sliderClick"
/>
</div>
</template>
<div
:class="[prefixCls + '-button-wrap']"
:style="{left: minPosition + '%'}"
@ -83,17 +102,19 @@
<script>
import InputNumber from '../../components/input-number/input-number.vue';
import Tooltip from '../../components/tooltip/tooltip.vue';
import SliderMarker from './marker';
import { getStyle, oneOf } from '../../utils/assist';
import { on, off } from '../../utils/dom';
import Emitter from '../../mixins/emitter';
import mixinsForm from '../../mixins/form';
import elementResizeDetectorMaker from 'element-resize-detector';
const prefixCls = 'ivu-slider';
export default {
name: 'Slider',
mixins: [ Emitter ],
components: { InputNumber, Tooltip },
mixins: [ Emitter, mixinsForm ],
components: { InputNumber, Tooltip, SliderMarker },
props: {
min: {
type: Number,
@ -154,6 +175,10 @@
activeChange: {
type: Boolean,
default: true
},
// 3.5.4
marks: {
type: Object
}
},
data () {
@ -200,7 +225,7 @@
{
[`${prefixCls}-input`]: this.showInput && !this.range,
[`${prefixCls}-range`]: this.range,
[`${prefixCls}-disabled`]: this.disabled
[`${prefixCls}-disabled`]: this.itemDisabled
}
];
},
@ -254,6 +279,19 @@
}
return result;
},
markList() {
if (!this.marks) return [];
const marksKeys = Object.keys(this.marks);
return marksKeys.map(parseFloat)
.sort((a, b) => a - b)
.filter(point => point <= this.max && point >= this.min)
.map(point => ({
point,
position: (point - this.min) * 100 / (this.max - this.min),
mark: this.marks[point]
}));
},
tipDisabled () {
return this.tipFormat(this.currentValue[0]) === null || this.showTip === 'never';
},
@ -280,7 +318,7 @@
return [min, max];
},
getCurrentValue (event, type) {
if (this.disabled) {
if (this.itemDisabled) {
return;
}
@ -304,7 +342,7 @@
}
},
onPointerDown (event, type) {
if (this.disabled) return;
if (this.itemDisabled) return;
event.preventDefault();
this.pointerDown = type;
@ -386,7 +424,7 @@
},
sliderClick (event) {
if (this.disabled) return;
if (this.itemDisabled) return;
const currentX = this.getPointerX(event);
const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
let newPos = ((currentX - sliderOffsetLeft) / this.sliderWidth * this.valueRange) + this.min;
@ -437,4 +475,4 @@
this.observer.removeListener(this.$refs.slider, this.handleSetSliderWidth);
}
};
</script>
</script>

14
src/mixins/form.js Normal file
View file

@ -0,0 +1,14 @@
export default {
inject: {
FormInstance: {
default: ''
}
},
computed: {
itemDisabled () {
let state = this.disabled;
if (!state && this.FormInstance) state = this.FormInstance.disabled;
return state;
}
}
};

13
src/styles/components/slider.less
View file

@ -68,6 +68,19 @@
background-color: @slider-disabled-color;
transform: translateX(-50%);
}
&-marks{
top: 0;
left: 12px;
width: 18px;
height: 100%;
&-item{
position: absolute;
transform: translateX(-50%);
color: @subsidiary-color;
margin-top: 15px;
}
}
}
.@{slider-prefix-cls}-disabled{