123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 |
- <template>
- <div id="operateGraphyItem">
- <div class="div-box" @click="openDrag">
- <i class="el-icon-rank"></i>
- </div>
- <div class="div-box" @click="suitableRatio">
- <i class="el-icon-rank"></i>
- </div>
- <div class="div-box" @click="downImg">
- <i class="el-icon-download"></i>
- </div>
- <div class="div-box" @click="removeRatio">
- <i class="el-icon-remove-outline"></i>
- </div>
- <div class="line">
- <el-slider tooltip-class="tooltip-class" :max="0.02" :min="0.004" v-model="sliderValue" @change="adjustRatio"></el-slider>
- </div>
- <div class="div-box" @click="addRatio">
- <i class="el-icon-circle-plus-outline"></i>
- </div>
- </div>
- </template>
- <script>
- import eventBus from "./bus.js";
- export default {
- data() {
- return {
- sliderValue: 0.004,
- isopenDrags:false ,//是否鼠标左键移动图片
- };
- },
- methods: {
- // 开启拖动
- openDrag() {
- this.isopenDrags = !this.isopenDrags;
- eventBus.$emit('openDrags',this.isopenDrags)
- },
- //合适比例
- suitableRatio() {
- eventBus.$emit("suitableRatios");
- },
- // 滑块调整比例
- adjustRatio(val) {
- this.sliderValue = val;
- eventBus.$emit("changeRatios", this.sliderValue);
- },
- //增加比例
- addRatio() {
- if (this.sliderValue >= 0.02) {
- this.sliderValue = 0.02;
- } else {
- this.sliderValue = this.sliderValue + 0.001;
- }
- eventBus.$emit("changeRatios", this.sliderValue);
- },
- //减少比例
- removeRatio() {
- if (this.sliderValue <=0.004) {
- this.sliderValue = 0.004;
- } else {
- this.sliderValue = this.sliderValue - 0.001;
- }
- eventBus.$emit("changeRatios", this.sliderValue);
- },
- // 下载图片
- downImg(){
- eventBus.$emit("downImgs");
- }
- },
- mounted() {
- let that = this;
- eventBus.$on('viewScale',function(scale){
- console.log(scale,'scalescale')
- that.sliderValue = scale;
- })
- },
- };
- </script>
- <style lang="less">
- #operateGraphyItem {
- display: flex;
- position: relative;
- border: 1px #ddd solid;
- border-radius: 5px;
- overflow: hidden;
- z-index: 999;
- .div-box {
- font-size: 24px;
- width: 40px;
- height: 40px;
- background: #67c23a;
- display: flex;
- justify-content: center;
- align-items: center;
- color: #fff;
- cursor: pointer;
- border-right: 1px #ddd solid;
- }
- .line {
- width: 200px;
- font-size: 12px;
- display: block;
- background: #67c23a;
- border-right: 1px #ddd solid;
- .tooltip-class {
- width: 100%;
- background-color: #409eff;
- }
- }
- }
- </style>
|