fu-hsi-web/src/components/FileViewer/bottomBtn.vue

<!--
 * @description:
 * @fileName: bottomBtn
 * @author: xsz
 * @date: 2023/4/13-10:52
 * @version: V1.0.0
-->
<template>
  <div class="image-nav-bottom">
    <div class="image-nav-bottom__icon-wrap">
      <div class="__image_view__nav-bottom-button-block">
        <el-tooltip placement="top">
          <div slot="content">缩小<br>👇</div>
          <div class="__image_view__nav-bottom-icon-button image-viewer__actions__inner">
            <i class="el-icon-zoom-out" @click="handleActions('zoomOut')" />
          </div>
        </el-tooltip>
      </div>
      <div class="__image_view__nav-bottom-button-block">
        <el-tooltip placement="top">
          <div slot="content">放大<br>👆</div>
          <div class="__image_view__nav-bottom-icon-button image-viewer__actions__inner">
            <i class="el-icon-zoom-in" @click="handleActions('zoomIn')" />
          </div>
        </el-tooltip>
      </div>
      <div class="__image_view__nav-bottom-icon-button image-viewer__actions__vertical">
        <el-divider direction="vertical" />
      </div>
      <div class="__image_view__nav-bottom-button-block">
        <el-tooltip placement="top">
          <div slot="content">还原<br>SPACE</div>
          <div class="__image_view__nav-bottom-icon-button image-viewer__actions__inner">
            <i :class="mode.icon" @click="toggleMode" />
          </div>
        </el-tooltip>
      </div>
      <div class="__image_view__nav-bottom-button-block">
        <el-tooltip placement="top">
          <div slot="content">打印</div>
          <div class="__image_view__nav-bottom-icon-button image-viewer__actions__inner">
            <i title="打印" class="el-icon-printer" />
          </div>
        </el-tooltip>
      </div>
      <div class="__image_view__nav-bottom-button-block">
        <el-tooltip placement="top">
          <div slot="content">详细信息</div>
          <div class="__image_view__nav-bottom-icon-button image-viewer__actions__inner">
            <i title="详细信息" class="el-icon-info" @click="handleActions('drawer')" />
          </div>
        </el-tooltip>
      </div>
      <div class="__image_view__nav-bottom-icon-button image-viewer__actions__vertical">
        <el-divider direction="vertical" />
      </div>
      <div class="__image_view__nav-bottom-button-block">
        <el-tooltip placement="top">
          <div slot="content">左转</div>
          <div class="__image_view__nav-bottom-icon-button image-viewer__actions__inner">
            <i class="el-icon-refresh-left" @click="handleActions('anticlocelise')" />
          </div>
        </el-tooltip>
      </div>
      <div class="__image_view__nav-bottom-button-block">
        <el-tooltip placement="top">
          <div slot="content">右转</div>
          <div class="__image_view__nav-bottom-icon-button image-viewer__actions__inner">
            <i class="el-icon-refresh-right" @click="handleActions('clocelise')" />
          </div>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
const Mode = {
  CONTAIN: {
    name: 'contain',
    icon: 'el-icon-full-screen'
  },
  ORIGINAL: {
    name: 'original',
    icon: 'el-icon-c-scale-to-original'
  }
}
export default {
  name: 'BottomBtn',
  props: {
    transform: {
      type: Object,
      default: () => {
        return {
          scale: 1,
          deg: 0,
          offsetX: 0,
          offsetY: 0,
          enableTransition: false
        }
      }
    }
  },
  data() {
    return {
      mode: Mode.CONTAIN
    }
  },
  computed: {
    imgTransform: {
      get() {
        return this.transform
      },
      set(val) {
        this.$emit('update:transform', val)
      }
    }
  },
  methods: {
    toggleMode() {
      if (this.loading) return

      const modeNames = Object.keys(Mode)
      const modeValues = Object.values(Mode)
      const index = modeValues.indexOf(this.mode)
      const nextIndex = (index + 1) % modeNames.length
      this.mode = Mode[modeNames[nextIndex]]
      this.reset()
    },
    reset() {
      this.transform = {
        scale: 1,
        deg: 0,
        offsetX: 0,
        offsetY: 0,
        enableTransition: false
      }
    },
    handleActions(action, options = {}) {
      this.$baseEventBus.$emit('handleActions', { action, ...options })
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin image-viewer {
  position: absolute;
  height: 60px;
  width: 100%;
  background-repeat: repeat-x;
  background-size: auto 100%;
  z-index: 1006;
}
@mixin image-viewer__actions {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 23px;
  color: #fff;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-nav-bottom {
  @include image-viewer;
  right: 0;
  bottom: 0;
  background-image: url(https://staticsns.cdn.bcebos.com/amis/2022-6/1656311284898/nav-bottom-bg.png);
}
.image-nav-bottom__icon-wrap {
  text-align: center;
  padding: 10px 0;
  box-sizing: border-box;
  font-size: 0;
}
.image-viewer__actions__inner {
  cursor: pointer;
  @include image-viewer__actions
}
.image-viewer__actions__vertical {
  @include image-viewer__actions
}
.__image_view__nav-bottom-button-block {
  display: inline-block;
  padding: 0 20px;
  position: relative;
}
.__image_view__nav-bottom-icon-button {
  display: inline-block;
  width: 40px;
  height: 40px;
  overflow: hidden;
}
</style>