<template>
  <div class="hover-show">
    <div class="show">
      <slot name="show">
        {{showValue | dv}}
      </slot>
    </div>
    <div class="hide">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "HoverShow",
  props: {
    showValue: {
      type: String,
      default: '--'
    },
    showIcon: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {

    }
  },

}
</script>

<style scoped lang="scss">
.hover-show {
  .hide {
    display: none;
    transition: .25s;
  }
  .show {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .25s;
  }
  &:hover {
    .hide {
      display: block;
    }
    .show {
      display: none;
    }
  }
}
</style>
