123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 |
- <template>
- <div>
- <div class='action-box'>
- <div class='small-block' @click='fitToWindow'>
- <i class="iconfont wanda-suofang"></i>
- </div>
- <div class='small-block' @click='showText'>
- <i v-if='isShow' class="iconfont wanda-yulan" title="隐藏店铺名称"></i>
- <i v-else class="iconfont wanda-yincang" title="显示店铺名称"></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: 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;
- flex-direction: column;
- align-items: center;
- overflow: hidden;
- .small-block {
- border-right: 1px solid #e4e5e7;
- padding: 12px;
- position: relative;
- cursor: pointer;
- i {
- width: 16px;
- height: 16px;
- display: inline-block;
- img {
- width: 100%;
- height: 100%;
- }
- }
- &::after {
- position: absolute;
- left: 50%;
- margin-left: -20%;
- bottom: 0;
- content: "";
- width: 14px;
- height: 1px;
- background: rgba(195, 199, 203, 1);
- border: 0px solid rgba(228, 229, 231, 1);
- }
- }
- .small-block:last-child {
- &::after {
- content: "";
- background: transparent;
- border: none;
- }
- }
- .small-block:active {
- background: #D2D9DF;
- }
- }
- </style>
|