<template>
  <transition name="py-zoom-in-center">
    <div class="py__tag" :class="'py__tag--'+color">
      <span class="py__tag--desc">
        <slot></slot>
      </span>
      <i class="py-icon-close2 py__tag--close" v-if="closable" @click="hiddenTag"></i>
    </div>
  </transition>
</template>

<script>
export default {
  name: "PyTag",
  props: {
    closable: Boolean,
    color: {
      type: String,
      default: "primary"
    }
  },
  data() {
    return {
      isclosed: false
    };
  },
  methods: {
    hiddenTag() {
      this.isclosed = true;
      this.$emit("close");
    }
  }
};
</script>