123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176 |
- <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/qp.png' 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;
- }
- }
- </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>
|