ActionIcon.vue

<template>
  <span
    :class="$style.actionicon"
    :style="{ backgroundImage, width, height, borderRadius: radius + 'px' }"
    @mouseover="onMouseover"
    @click="onClick"
  >
    <span :class="$style.highlight" />
  </span>
</template>
<style module>
.actionicon {
  position: relative;
  background-size: cover;
  display: inline-block;
  box-shadow: 0 0 3px 0 rgba(255, 255, 255, 1) inset,
    0 0 0 1px rgba(255, 255, 255, 0.25) inset, 0 1px 4px 0 rgba(0, 0, 0, 0.5);
}
.highlight {
  width: 92%;
  height: 20%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 6px;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );
}
</style>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

export enum Events {
  IconMouseover = 'icon-mouseover', // iconMouseover(id, event)
  IconClick = 'icon-click' // iconClick(id, event)
}

@Component
export default class ActionIcon extends Vue {
  @Prop({ type: Number, required: true }) readonly no!: number;
  @Prop({ type: Number, required: true }) readonly size!: number;
  @Prop({ type: Number, required: false, default: 8 }) readonly radius!: number;

  public get width(): string {
    return `${this.size}px`;
  }

  public get height(): string {
    return `${this.size}px`;
  }

  public get backgroundImage(): string {
    if (!this.$master.spells.valid(this.no - 1))
      return 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)';
    return 'url(/images/actions/' + ('0' + this.no).slice(-2) + '.png)';
  }

  public onMouseover(ev: MouseEvent): void {
    this.$emit(Events.IconMouseover, this.no - 1, ev);
  }

  public onClick(ev: MouseEvent): void {
    this.$emit(Events.IconClick, this.no - 1, ev);
  }
}
</script>