|
@@ -9,45 +9,58 @@
|
|
<div class="div-box">
|
|
<div class="div-box">
|
|
<i class="el-icon-download"></i>
|
|
<i class="el-icon-download"></i>
|
|
</div>
|
|
</div>
|
|
- <div class="div-box" @click="addRatio">
|
|
|
|
|
|
+ <div class="div-box" @click="removeRatio">
|
|
<i class="el-icon-remove-outline"></i>
|
|
<i class="el-icon-remove-outline"></i>
|
|
</div>
|
|
</div>
|
|
<div class="line">
|
|
<div class="line">
|
|
- <el-slider tooltip-class="tooltip-class" @change="adjustRatio"></el-slider>
|
|
|
|
|
|
+ <el-slider tooltip-class="tooltip-class" v-model="sliderValue" @change="adjustRatio"></el-slider>
|
|
</div>
|
|
</div>
|
|
- <div class="div-box" @click="removeRatio">
|
|
|
|
|
|
+ <div class="div-box" @click="addRatio">
|
|
<i class="el-icon-circle-plus-outline"></i>
|
|
<i class="el-icon-circle-plus-outline"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
-import eventBus from "./bus.js"
|
|
|
|
|
|
+import eventBus from "./bus.js";
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ sliderValue: 10
|
|
};
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
// 开启拖动
|
|
// 开启拖动
|
|
- openDrag(){
|
|
|
|
|
|
+ openDrag() {
|
|
// eventBus.$emit('openDrags')
|
|
// eventBus.$emit('openDrags')
|
|
},
|
|
},
|
|
//合适比例
|
|
//合适比例
|
|
- suitableRatio(){
|
|
|
|
- eventBus.$emit('suitableRatios')
|
|
|
|
|
|
+ suitableRatio() {
|
|
|
|
+ eventBus.$emit("suitableRatios");
|
|
},
|
|
},
|
|
// 滑块调整比例
|
|
// 滑块调整比例
|
|
- adjustRatio(){
|
|
|
|
-
|
|
|
|
|
|
+ adjustRatio(val) {
|
|
|
|
+ this.sliderValue = val;
|
|
|
|
+ eventBus.$emit("changeRatios", this.sliderValue);
|
|
},
|
|
},
|
|
//增加比例
|
|
//增加比例
|
|
- addRatio(){
|
|
|
|
-
|
|
|
|
|
|
+ addRatio() {
|
|
|
|
+ if (this.sliderValue >= 90) {
|
|
|
|
+ this.sliderValue = 100;
|
|
|
|
+ } else {
|
|
|
|
+ this.sliderValue = this.sliderValue + 10;
|
|
|
|
+ }
|
|
|
|
+ eventBus.$emit("changeRatios", this.sliderValue);
|
|
},
|
|
},
|
|
//减少比例
|
|
//减少比例
|
|
- removeRatio(){
|
|
|
|
|
|
+ removeRatio() {
|
|
|
|
+ if (this.sliderValue <= 10) {
|
|
|
|
+ this.sliderValue = 0;
|
|
|
|
+ } else {
|
|
|
|
+ this.sliderValue = this.sliderValue - 10;
|
|
|
|
+ }
|
|
|
|
+ eventBus.$emit("changeRatios", this.sliderValue);
|
|
}
|
|
}
|
|
- },
|
|
|
|
|
|
+ }
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
<style lang="less">
|
|
<style lang="less">
|