tag.vue 772 B

123456789101112131415161718192021222324252627282930313233343536
  1. <template>
  2. <transition :name="disableTransitions ? '' : 'el-zoom-in-center'">
  3. <span
  4. class="el-tag"
  5. :class="[
  6. type ? 'el-tag--' + type : '',
  7. size && `el-tag--${size}`,
  8. {'is-hit': hit}
  9. ]"
  10. :style="{backgroundColor: color}">
  11. <slot></slot>
  12. <i class="el-tag__close el-icon-close"
  13. v-if="closable"
  14. @click="handleClose"></i>
  15. </span>
  16. </transition>
  17. </template>
  18. <script>
  19. export default {
  20. name: 'ElTag',
  21. props: {
  22. text: String,
  23. closable: Boolean,
  24. type: String,
  25. hit: Boolean,
  26. disableTransitions: Boolean,
  27. color: String,
  28. size: String
  29. },
  30. methods: {
  31. handleClose(event) {
  32. this.$emit('close', event);
  33. }
  34. }
  35. };
  36. </script>