fuse-code/src/views/animation/right/frame.vue

<template>
  <div>
    <div class="am-ctrl-pano strengthen">
      <span
        v-for="action in actions"
        ctrl
        :class="{ active: frameAction === action.key }"
        @click="
          $emit('changeFrameAction', {
            action: frameAction === action.key ? undefined : action.key,
            frame: data,
          })
        "
        class="fun-ctrl"
      >
        <ui-icon :type="action.icon" />
      </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { AnimationModelFrame } from "@/api";
import { ref } from "vue";

const actions = [
  { key: "translate", icon: "close" },
  { key: "rotate", icon: "close" },
  { key: "scale", icon: "close" },
  { key: "originTranslate", icon: "close" },
];

defineProps<{ data: AnimationModelFrame; frameAction?: string }>();
defineEmits<{
  (e: "changeFrameAction", d: { action?: string; frame: AnimationModelFrame }): void;
}>();
</script>

<style lang="scss" scoped>
.am-ctrl-pano {
  z-index: 99;
  position: absolute;
  top: calc(var(--editor-head-height) + var(--header-top));
  margin: 20px;
  right: 0;
  border-radius: 4px;
  height: 40px;
  background: rgba(27, 27, 28, 0.8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;

  span {
    width: 32px;
    height: 32px;
    font-size: 16px;
    display: flex;
    border-radius: 4px;
    align-items: center;
    cursor: pointer;
    justify-content: center;

    &.active {
      background: rgba(0, 200, 175, 0.3);
    }
  }
}
</style>