bigDataApp/components/Draw/comps/tools.vue

<template>
  <div class="tools float-left">
    <button
      title="上一个"
      @click="changeItem('pre')"
      class="el-icon-d-arrow-left"
    ></button>
    <button
      title="下一个"
      @click="changeItem('next')"
      class="el-icon-d-arrow-right"
    ></button>
    <button
      title="拖拽"
      :class="[mode == 'drag' ? 'active' : '']"
      class="yficonfont icon-zhuashou"
      @click="mode = 'drag'"
    ></button>
    <button
      title="绘制"
      :class="[mode == 'draw' ? 'active' : '']"
      class="el-icon-edit-outline"
      @click="mode = 'draw'"
    ></button>
    <button
      title="保存标注"
      @click="saveLabel"
      class="el-icon-circle-check"
    ></button>
    <button title="下载" @click="saveImage" class="el-icon-download"></button>
    <button
      title="全屏"
      @click="fullScreen"
      class="el-icon-full-screen"
    ></button>
  </div>
</template>

<script>
export default {
  props: {
    fullScreenHtml: ['fullScreenHtml']
  },
  data() {
    return {
      mode: 'draw'
    }
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    // 切换上一个下一个
    changeItem(type) {
      this.$emit('changeItem', type)
    },
    changeMode(type) {
      this.$emit('changeMode', type)
    },
    fullScreen() {
      const container = this.fullScreenHtml
      if (container.requestFullscreen) {
        container.requestFullscreen()
      } else if (container.mozRequestFullScreen) {
        container.mozRequestFullScreen()
      } else if (container.webkitRequestFullscreen) {
        container.webkitRequestFullscreen()
      } else if (container.msRequestFullscreen) {
        container.msRequestFullscreen()
      }
    },
    saveLabel() {
      this.$emit('saveLabel')
    }
  },
  components: {}
}
</script>

<style scoped lang="less">
@primary-color: #018b3f;
.controls {
  position: absolute;
  top: 0;
  left: 0;
  padding: 3px 15px;
  width: 70%;
  box-sizing: border-box;
  // background: rgba(0, 0, 0, 0.3);
}
.info {
  width: 100%;
  // color: #ffffff;
  overflow: hidden;
  .tools {
    display: flex;
    background-color: rgba(0, 0, 0, 0.3);
    // gap: 10px;
    .active {
      background: @primary-color;
    }
  }
  .float-right {
    line-height: 24px;
  }
}

.info span {
  white-space: nowrap;
  .active {
    color: @primary-color;
    margin-right: 5px;
  }
}

.info button {
  font-size: 16px;
  padding: 4px 8px;
  background: none;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}

.info button:disabled {
  cursor: not-allowed;
}
</style>