|
@@ -2,49 +2,56 @@
|
|
|
<div>
|
|
|
<div class="action-box">
|
|
|
<div class="small-block" @click="showText">
|
|
|
- <i>
|
|
|
- <el-tooltip v-if="isShow" effect="dark" content="隐藏店铺名称" placement="top">
|
|
|
+ <span>
|
|
|
+ <el-tooltip v-if="isShow" effect="dark" content="区域显示" placement="top">
|
|
|
<!-- <img src="@/assets/images/issue.png" alt /> -->
|
|
|
+ <i class="iconfont icon-quyuxianshi"></i>
|
|
|
</el-tooltip>
|
|
|
- <el-tooltip v-else effect="dark" content="显示店铺名称" placement="top">
|
|
|
+ <el-tooltip v-else effect="dark" content="区域隐藏" placement="top">
|
|
|
<!-- <img src="@/assets/images/issue.png" alt /> -->
|
|
|
+ <i class="iconfont icon-quyuxianshi1"></i>
|
|
|
</el-tooltip>
|
|
|
- </i>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- <div class="small-block" @click="">
|
|
|
- <i>
|
|
|
- <!-- <img src="../../assets/imgs/eye2.jpg" alt /> -->
|
|
|
- </i>
|
|
|
+ <div class="small-block" @click="showText">
|
|
|
+ <span>
|
|
|
+ <el-tooltip v-if="isShow" effect="dark" content="底图显示" placement="top">
|
|
|
+ <!-- <img src="@/assets/images/issue.png" alt /> -->
|
|
|
+ <i class="iconfont icon-dituxianyin"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip v-else effect="dark" content="底图隐藏" placement="top">
|
|
|
+ <!-- <img src="@/assets/images/issue.png" alt /> -->
|
|
|
+ <i class="iconfont icon-dituxianyin1"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- <div class="small-size" @click="reduce">
|
|
|
- <i class="reduce">-</i>
|
|
|
- <i class="value">100%</i>
|
|
|
- <i class="plus">+</i>
|
|
|
+ <div class="small-size">
|
|
|
+ <i class="reduce" @click="reduce">-</i>
|
|
|
+ <i class="value">{{ sliderValPercent }}</i>
|
|
|
+ <i class="plus" @click="plus">+</i>
|
|
|
</div>
|
|
|
- <!-- <div class="small-text">
|
|
|
- <el-slider tooltip-class="tooltip-class" :min="min" v-model="sliderVal" :show-tooltip="false" @input="scale" :max="max"></el-slider>
|
|
|
- 100%
|
|
|
- </div> -->
|
|
|
- <!-- <div class="small-size" @click="plus">
|
|
|
- <i>+</i>
|
|
|
- </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import bus from "@/bus/bus";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- sliderVal: 1, // 滑块值
|
|
|
active: "",
|
|
|
- min: 1,
|
|
|
- max: 200,
|
|
|
- everyScale: 1, // 每份的放大倍数
|
|
|
+ initScale: 1, //初始 底图缩放比例
|
|
|
+ sliderVal: 1, // 缩放比例
|
|
|
+ min: 0.1,
|
|
|
+ max: 5,
|
|
|
isSwitch: false, // 是否开启吸附
|
|
|
isShow: false,
|
|
|
};
|
|
|
},
|
|
|
-
|
|
|
+ computed: {
|
|
|
+ sliderValPercent() {
|
|
|
+ return `${(this.sliderVal * 100).toFixed(0)}%`;
|
|
|
+ },
|
|
|
+ },
|
|
|
methods: {
|
|
|
// 适配大小
|
|
|
fitToWindow() {
|
|
@@ -70,38 +77,49 @@ export default {
|
|
|
},
|
|
|
// 减
|
|
|
reduce() {
|
|
|
- this.sliderVal /= 1.1;
|
|
|
+ const oldV = this.sliderVal;
|
|
|
+ this.sliderVal = Number((this.sliderVal - 0.1).toFixed(1));
|
|
|
if (this.sliderVal < this.min) {
|
|
|
this.sliderVal = this.min;
|
|
|
}
|
|
|
- this.scale(this.sliderVal);
|
|
|
- },
|
|
|
- // 缩放
|
|
|
- scale(val) {
|
|
|
- // 换算
|
|
|
- let scale = (val * this.everyScale) / 10;
|
|
|
- this.$emit("scale", scale);
|
|
|
+ bus.$emit("scale", this.sliderVal, oldV);
|
|
|
},
|
|
|
// 加
|
|
|
plus() {
|
|
|
- this.sliderVal *= 1.1;
|
|
|
+ const oldV = this.sliderVal;
|
|
|
+ this.sliderVal = Number((this.sliderVal + 0.1).toFixed(1));
|
|
|
if (this.sliderVal > this.maxScale) {
|
|
|
this.sliderVal = this.maxScale;
|
|
|
}
|
|
|
- this.scale(this.sliderVal);
|
|
|
+ bus.$emit("scale", this.sliderVal, oldV);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @name getMouseScale
|
|
|
+ * @description 滚轮滚动,导致的底图缩放比例 逻辑处理
|
|
|
+ */
|
|
|
+ getMouseScale() {
|
|
|
+ // zoom 为缩放后改变的比例
|
|
|
+ bus.$off("mouseScale");
|
|
|
+ bus.$on("mouseScale", (zoom) => {
|
|
|
+ const s = Number((zoom * this.initScale).toFixed(2));
|
|
|
+ this.sliderVal = s > 0.1 ? s : 0.1;
|
|
|
+ });
|
|
|
},
|
|
|
showText() {
|
|
|
this.isShow = !this.isShow;
|
|
|
this.$emit("showText", this.isShow);
|
|
|
},
|
|
|
},
|
|
|
- mounted() {},
|
|
|
+ mounted() {
|
|
|
+ this.getMouseScale();
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.action-box {
|
|
|
width: 183px;
|
|
|
height: 32px;
|
|
|
+ background-color: #fff;
|
|
|
box-shadow: 0px 3px 5px 0px rgba(141, 147, 153, 0.1);
|
|
|
border-radius: 2px;
|
|
|
border: 1px solid #c3c7cb;
|
|
@@ -118,14 +136,15 @@ export default {
|
|
|
justify-content: center;
|
|
|
// padding: 12px;
|
|
|
cursor: not-allowed;
|
|
|
- i {
|
|
|
+ & > span {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
display: inline-block;
|
|
|
- img {
|
|
|
+ i {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
vertical-align: top;
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
}
|
|
|
}
|