<template>
  <div
    class="cover-btn"
    @click="onClick"
    :style="styleRef"
  >
    <slot></slot>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';

  const props = defineProps({
    center: {
      type: Array,
      default: [],
    },
    width: Number,
    height: Number,
  });

  const emit = defineEmits(['click']);

  const styleRef = computed(() => {
    return {
      left: `${props.center[0] - props.width / 2}px`,
      top: `${props.center[1] - props.height / 2}px`,
      width: `${props.width}px`,
      height: `${props.height}px`,
    }
  })

  const onClick = e => emit('click', e);
</script>

<style lang="less" scoped>
.cover-btn {
  position: absolute;
  // background: rgba(255, 0, 0, 0.5);
  z-index: 10;
}
</style>