traffic-laser/src/components/button-pane/index.vue

<template>
  <div class="button-pane" :style="style">
    <slot />
  </div>
</template>

<script setup lang="ts">
import {computed} from "vue";

const props = withDefaults(
  defineProps<{ dire?: 'row' | 'column', size?: number }>(),
  { dire: 'row', size: 64 }
);

const style = computed(() => {
  const isRow = props.dire === 'row';
  const bound = isRow ? { height: `${props.size}px` } : { width: `${props.size}px` }

  return {
    padding: isRow ? `4px ${props.size / 2}px` : `${props.size / 2}px 4px`,
    borderRadius: `${props.size / 2}px`,
    ...bound,
    flexDirection: props.dire
  }
})
</script>

<style lang="scss" scoped>
.button-pane {
  position: absolute;
  z-index: 1;
  background-color: var(--editor-menu-back);
  display: flex;
  align-items: center;
}
</style>