persagy_topo_editer/src/components/editview/topToolBar.vue

<template>
  <div id="topToolBar">
    <div class="left">
      <ul>
        <!-- <li class="zoom-window">
          <div>
            <img
              class="lock"
              :src="require(`./../../assets/images/缩小.png`)"
              alt
            />
            <span class="percentage">{{scalePercent}}</span>
            <img
              class="lock"
              :src="require(`./../../assets/images/放大 amplification.png`)"
              alt
            />
          </div>
          <span>缩放窗口</span>
        </li>-->
        <li @click="topoUndo">
          <img class="lock" :src="require(`./../../assets/images/undo.png`)" alt />
          <span>撤销</span>
        </li>
        <li @click="topoRedo">
          <img class="lock" :src="require(`./../../assets/images/redo.png`)" alt />
          <span>重做</span>
        </li>
        <li @click="copy">
          <img class="lock" :src="require(`./../../assets/images/copy.png`)" alt />
          <span>复制</span>
        </li>
        <li @click="paste">
          <img class="lock" :src="require(`./../../assets/images/past.png`)" alt />
          <span>粘贴</span>
        </li>

        <!-- <li>
          <a-dropdown :trigger="['click']">
            <div class="ant-dropdown-link dropdown-flex" @click="e => e.preventDefault()">
              <div>
                <img class="lock" :src="require(`./../../assets/images/t-format.png`)" alt />
                <div>图层</div>
              </div>
              <a-icon type="caret-down" class="down-icon" />
            </div>
            <a-menu slot="overlay">
              <a-menu-item
                :disabled="item.disable"
                v-for="item in orderOptions"
                :key="item.value"
                @click="changeOrderItem(item.value)"
              >
                <img
                  style="width: 16px;margin-right: 5px;"
                  :src="require(`./../../assets/images/`+item.img+`.png`)"
                  alt
                />
                <span>{{item.label}}</span>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </li>-->
        <!-- <li>
          <a-dropdown :trigger="['click']">
            <div class="ant-dropdown-link dropdown-flex" @click="e => e.preventDefault()">
              <div>
                <img class="lock" :src="require(`./../../assets/images/t-format.png`)" alt />
                <div>对齐</div>
              </div>
              <a-icon type="caret-down" class="down-icon" />
            </div>
            <a-menu slot="overlay">
              <a-menu-item
                :disabled="item.disable"
                v-for="item in alignmentOptions"
                :key="item.value"
                @click="changeAlignItem(item.value)"
              >
                <img
                  style="width: 16px;margin-right: 5px;"
                  :src="require(`./../../assets/images/`+item.img+`.png`)"
                  alt
                />
                <span>{{item.label}}</span>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </li>-->
        <!-- <li>
          <a-icon type="edit" />
          <span>图层</span>
        </li>
        <li>
          <a-icon type="edit" />
          <span>组合</span>
        </li>
        <li>
          <a-icon type="edit" />
          <span>打散</span>
        </li>-->
        <li>
          <i :class="isLock?'el-icon-lock':'el-icon-unlock'" />
          <span>{{!isLock?"解锁":"锁定"}}</span>
        </li>
        <li @click="deleteItem">
          <img class="lock" :src="require(`./../../assets/images/delete.png`)" alt />
          <span>删除</span>
        </li>
      </ul>
    </div>
    <div class="rght">
      <!-- 待定 -->
    </div>
  </div>
</template>
<script>
import bus from "@/bus/bus";
export default {
  data() {
    return {
      isLock: false,
    };
  },
  methods: {
    //撤销
    topoUndo() {
      bus.$emit("topoUndo");
    },
    // 重做
    topoRedo() {
      bus.$emit("topoRedo");
    },
    // 删除item
    deleteItem() {
      bus.$emit("deleteItem");
    },
    // 复制
    copy() {
      bus.$emit("copy");
    },
    // 粘贴
    paste() {
      bus.$emit("paste");
    },
  },
};
</script>
<style lang="less">
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#topToolBar {
  width: 100%;
  height: 48px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px 0 24px;
  box-sizing: border-box;
  .left {
    ul {
      display: flex;
      li {
        display: flex;
        justify-content: center;
        flex-direction: column;
        /*width: 62px;*/
        padding: 0 7px;
        margin-left: 7px;
        font-size: 12px;
        align-items: center;
        text-align: center;
        cursor: pointer;
        img {
          width: 16px;
          height: 16px;
        }
        .percentage {
          display: inline-block;
          width: 35px;
          border-bottom: 1px solid #c3c7cb;
          margin: 0 13px;
          font-size: 14px;
        }
        .dropdown-flex {
          display: flex;
          align-items: center;
          .down-icon {
            margin-left: 12px;
          }
        }
      }
    }
  }
}
</style>