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

fixed #2852

Browse source
This commit is contained in:
梁灏 2018-01-23 18:14:23 +08:00
parent feb21a0a16
commit 2eccfc9938
3 changed files with 74 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
examples/routers/slider.vue
View file

@ -1,40 +1,68 @@
<template>
<div style="margin: 0 400px;">
<Slider v-model="valueSingle" @on-change="updateSingleDisplayValue"></Slider>
<Button @click="randomSingle">change</Button> {{singleDisplayValue}}
<!--<template>-->
<!--<div style="margin: 0 400px;">-->
<!--<Slider v-model="valueSingle" @on-change="updateSingleDisplayValue"></Slider>-->
<!--<Button @click="randomSingle">change</Button> {{singleDisplayValue}}-->
<Slider v-model="valueRange" range @on-change="updateRangeDisplayValue"></Slider>
<Button @click="randomRange">change</Button> {{rangeDisplayValue}}
<!--<Slider v-model="valueRange" range @on-change="updateRangeDisplayValue"></Slider>-->
<!--<Button @click="randomRange">change</Button> {{rangeDisplayValue}}-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--valueSingle: 10,-->
<!--valueRange: [20, 50],-->
<!--singleDisplayValue: 10,-->
<!--rangeDisplayValue: [20, 50]-->
<!--};-->
<!--},-->
<!--methods: {-->
<!--updateSingleDisplayValue (val){-->
<!--console.log('updateSingleDisplayValue', val);-->
<!--this.singleDisplayValue = val;-->
<!--},-->
<!--updateRangeDisplayValue (val){-->
<!--console.log('updateRangeDisplayValue', val);-->
<!--this.rangeDisplayValue = val.join(' - ');-->
<!--},-->
<!--randomSingle () {-->
<!--this.valueSingle = this.random(0, 100);-->
<!--},-->
<!--randomRange () {-->
<!--this.valueRange = [this.random(0, 50), this.random(50, 100)];-->
<!--},-->
<!--random (min, max){-->
<!--return Math.round(Math.random() * (max - min)) + min;-->
<!--}-->
<!--}-->
<!--};-->
<!--</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 {
valueSingle: 10,
valueRange: [20, 50],
singleDisplayValue: 10,
rangeDisplayValue: [20, 50]
};
modal1: false,
value2: [20, 50],
}
},
methods: {
updateSingleDisplayValue (val){
console.log('updateSingleDisplayValue', val);
this.singleDisplayValue = val;
ok () {
this.$Message.info('Clicked ok');
},
updateRangeDisplayValue (val){
console.log('updateRangeDisplayValue', val);
this.rangeDisplayValue = val.join(' - ');
},
randomSingle () {
this.valueSingle = this.random(0, 100);
},
randomRange () {
this.valueRange = [this.random(0, 50), this.random(50, 100)];
},
random (min, max){
return Math.round(Math.random() * (max - min)) + min;
cancel () {
this.$Message.info('Clicked cancel');
}
}
};
}
</script>

1
src/components/modal/modal.vue
View file

@ -229,6 +229,7 @@
}
}
this.broadcast('Table', 'on-visible-change', val);
this.broadcast('Slider', 'on-visible-change', val); // #2852
this.$emit('on-visible-change', val);
},
loading (val) {

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

@ -272,8 +272,7 @@
}
},
sliderClick: function (event) {
sliderClick (event) {
if (this.disabled) return;
const currentX = this.getPointerX(event);
const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
@ -290,6 +289,23 @@
this.$emit('on-change', exportValue);
this.dispatch('FormItem', 'on-form-change', exportValue);
},
},
mounted () {
// #2852
this.$on('on-visible-change', (val) => {
if (val && this.showTip === 'always') {
this.$refs.minTooltip.doDestroy();
if (this.range) {
this.$refs.maxTooltip.doDestroy();
}
this.$nextTick(() => {
this.$refs.minTooltip.updatePopper();
if (this.range) {
this.$refs.maxTooltip.updatePopper();
}
});
}
});
}
};
</script>