|
@@ -0,0 +1,177 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class='action-box'>
|
|
|
+ <div class='small-block'>
|
|
|
+ <el-dropdown size='mini' placement='top-start' @command='handleCommand'>
|
|
|
+ <i>
|
|
|
+ <img src='../../assets/imgs/dl.png' alt />
|
|
|
+ </i>
|
|
|
+ <el-dropdown-menu slot='dropdown'>
|
|
|
+ <el-dropdown-item command='savePng'>保存为png</el-dropdown-item>
|
|
|
+ <!-- <el-dropdown-item command='saveSvg'>保存为svg</el-dropdown-item> -->
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ <div class='small-block' @click='showText'>
|
|
|
+ <i>
|
|
|
+ <el-tooltip v-if='isShow' effect='dark' content='隐藏店铺名称' placement='top'>
|
|
|
+ <img src='../../assets/imgs/yl.png' alt />
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip v-else effect='dark' content='显示店铺名称' placement='top'>
|
|
|
+ <img src='../../assets/imgs/er.png' alt />
|
|
|
+ </el-tooltip>
|
|
|
+ </i>
|
|
|
+ </div>
|
|
|
+ <div class='small-block' @click='fitToWindow'>
|
|
|
+ <i>
|
|
|
+ <img src='../../assets/imgs/eye2.jpg' alt />
|
|
|
+ </i>
|
|
|
+ </div>
|
|
|
+ <div class='small-size' @click='reduce'>
|
|
|
+ <i>-</i>
|
|
|
+ </div>
|
|
|
+ <div class='small-slide'>
|
|
|
+ <el-slider tooltip-class='tooltip-class' :min='min' v-model='sliderVal' :show-tooltip='false' @input='scale' :max='max'></el-slider>
|
|
|
+ </div>
|
|
|
+ <div class='small-size' @click='plus'>
|
|
|
+ <i>+</i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ sliderVal: 1, // 滑块值
|
|
|
+ active: '',
|
|
|
+ min: 1,
|
|
|
+ max: 200,
|
|
|
+ everyScale: 1, // 每份的放大倍数
|
|
|
+ isSwitch: false, // 是否开启吸附
|
|
|
+ isShow: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ // 适配大小
|
|
|
+ fitToWindow() {
|
|
|
+ this.$emit('fit')
|
|
|
+ },
|
|
|
+ // 下拉菜单
|
|
|
+ handleCommand(command) {
|
|
|
+ this.$emit(command)
|
|
|
+ },
|
|
|
+ // 是否开启吸附
|
|
|
+ handleDivideCommand(commond) {
|
|
|
+ this.$emit('changeAbsorb', this.isSwitch)
|
|
|
+ },
|
|
|
+ // 切割编辑
|
|
|
+ divide() {
|
|
|
+ this.active = 'divide'
|
|
|
+ this.$emit('divide')
|
|
|
+ },
|
|
|
+ // 清除编辑
|
|
|
+ clearDivide() {
|
|
|
+ this.active = ''
|
|
|
+ this.$emit('clearDivide')
|
|
|
+ },
|
|
|
+ // 减
|
|
|
+ reduce() {
|
|
|
+ this.sliderVal /= 1.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)
|
|
|
+ },
|
|
|
+ // 加
|
|
|
+ plus() {
|
|
|
+ this.sliderVal *= 1.1
|
|
|
+ if (this.sliderVal > this.maxScale) {
|
|
|
+ this.sliderVal = this.maxScale
|
|
|
+ }
|
|
|
+ this.scale(this.sliderVal)
|
|
|
+ },
|
|
|
+ showText() {
|
|
|
+ this.isShow = !this.isShow
|
|
|
+ this.$emit('showText', this.isShow)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {}
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.action-box {
|
|
|
+ width: 400px;
|
|
|
+ height: 40px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
|
|
|
+ border-radius: 2px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
+ .small-block {
|
|
|
+ border-right: 1px solid #e4e5e7;
|
|
|
+ padding: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ i {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ display: inline-block;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .small-size {
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 12px;
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+ .small-slide {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 8px;
|
|
|
+ margin-top: 10px;
|
|
|
+ border-left: 1px solid #e4e5e7;
|
|
|
+ border-right: 1px solid #e4e5e7;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="less">
|
|
|
+.action-box {
|
|
|
+ .el-slider__button {
|
|
|
+ width: 13px;
|
|
|
+ height: 13px;
|
|
|
+ border: 2px solid #025baa;
|
|
|
+ }
|
|
|
+ .el-slider__runway {
|
|
|
+ height: 3px;
|
|
|
+ background-color: #e4e7ed;
|
|
|
+ background: rgba(0, 0, 0, 0.45);
|
|
|
+ border-radius: 1px;
|
|
|
+ }
|
|
|
+ .el-slider__button-wrapper {
|
|
|
+ top: -17px;
|
|
|
+ }
|
|
|
+ .el-slider__bar {
|
|
|
+ height: 3px;
|
|
|
+ background-color: #025baa;
|
|
|
+ border-top-left-radius: 1px;
|
|
|
+ border-bottom-left-radius: 1px;
|
|
|
+ }
|
|
|
+ .action-box .el-slider__runway {
|
|
|
+ background-color: #e8e8e8 !important;
|
|
|
+ background: #e8e8e8 !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|