<template>
  <span class="shortcut-key-spin">
    <i v-if="ARROW_CONT" :class="ARROW_CONT"></i>
    <i v-else>{{ data }}</i>
  </span>
</template>

<script>
export default {
  name: "shortcut-key-spin",
  props: {
    data: {
      type: String,
      default: ""
    }
  },
  computed: {
    ARROW_CONT() {
      const arrowIcon = {
        ArrowUp: "el-icon-top",
        ArrowDown: "el-icon-bottom",
        ArrowLeft: "el-icon-back",
        ArrowRight: "el-icon-right"
      };
      return arrowIcon[this.data];
    }
  },
  data() {
    return {};
  },
  methods: {}
};
</script>