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

Slider add new prop: marks

Browse source
This commit is contained in:
梁灏 2019-09-17 10:46:22 +08:00
parent 9725f37580
commit 50b4334515
4 changed files with 91 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
examples/routers/slider.vue
View file

@ -1,103 +1,28 @@
<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="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: ''
value6: 30,
value7: [20, 50],
marks: {
0: '0°C',
8: '8°C',
37: '37°C',
50: {
style: {
color: '#1989FA'
},
label: this.$createElement('strong', '50%')
}
}
}
}
}
</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>-->

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

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

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

@ -15,6 +15,10 @@
ref="slider" @click.self="sliderClick"
>
<input type="hidden" :name="name" :value="exportValue">
<div
:class="[prefixCls + '-bar']"
:style="barStyle"
@click.self="sliderClick"></div>
<template v-if="showStops">
<div
:class="[prefixCls + '-stop']"
@ -23,10 +27,24 @@
@click.self="sliderClick"
></div>
</template>
<div
:class="[prefixCls + '-bar']"
:style="barStyle"
@click.self="sliderClick"></div>
<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,6 +101,7 @@
<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';
@ -94,7 +113,7 @@
export default {
name: 'Slider',
mixins: [ Emitter, mixinsForm ],
components: { InputNumber, Tooltip },
components: { InputNumber, Tooltip, SliderMarker },
props: {
min: {
type: Number,
@ -155,6 +174,10 @@
activeChange: {
type: Boolean,
default: true
},
// 4.0.0
marks: {
type: Object
}
},
data () {
@ -255,6 +278,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';
},

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

@ -65,9 +65,24 @@
position: absolute;
.square(@slider-height);
border-radius: 50%;
background-color: @slider-disabled-color;
background-color: #fff;
transform: translateX(-50%);
}
&-marks{
top: 0;
left: 12px;
width: 18px;
height: 100%;
&-item{
position: absolute;
transform: translateX(-50%);
font-size: @font-size-base;
color: @subsidiary-color;
margin-top: 15px;
}
}
}
.@{slider-prefix-cls}-disabled{