ludash/src/views/svg/components/bar.vue

<template>
  <div class="svg-bar">
    <div class="item">
      <div
        class="rect"
        @mousedown="($event) => createNode($event, { type: 'rect' })"
      ></div>
    </div>
    <div class="item">
      <div
        class="circle"
        @mousedown="($event) => createNode($event, { type: 'circle' })"
      ></div>
    </div>
    <div class="item">
      <div
        class="rhombic"
        @mousedown="($event) => createNode($event, { type: 'rhombic' })"
      ></div>
    </div>
  </div>
</template>

<script setup>
const emits = defineEmits(["createRect", "createNode"]);

function createNode(e, config) {
  emits("createNode", e, config);
}
</script>

<style lang="less" scoped>
.svg-bar {
  width: 400px;
  height: 70px;
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #ccc;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  .item {
    width: 70px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .rect {
      width: 40px;
      height: 40px;
      border: 2px solid #666;
      border-radius: 5px;
      cursor: pointer;
    }
    .circle {
      width: 40px;
      height: 40px;
      border: 2px solid #666;
      border-radius: 22px;
      cursor: pointer;
    }
    .rhombic {
      width: 40px;
      height: 40px;
      border: 2px solid #666;
      cursor: pointer;
      transform: rotate(45deg) scale(0.8);
    }
  }
}
</style>