main.vue 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <div class="el-badge">
  3. <slot></slot>
  4. <transition name="el-zoom-in-center">
  5. <sup
  6. v-show="!hidden && (content || content === 0 || isDot)"
  7. v-text="content"
  8. class="el-badge__content"
  9. :class="[
  10. 'el-badge__content--' + type,
  11. {
  12. 'is-fixed': $slots.default,
  13. 'is-dot': isDot
  14. }
  15. ]">
  16. </sup>
  17. </transition>
  18. </div>
  19. </template>
  20. <script>
  21. export default {
  22. name: 'ElBadge',
  23. props: {
  24. value: [String, Number],
  25. max: Number,
  26. isDot: Boolean,
  27. hidden: Boolean,
  28. type: {
  29. type: String,
  30. validator(val) {
  31. return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1;
  32. }
  33. }
  34. },
  35. computed: {
  36. content() {
  37. if (this.isDot) return;
  38. const value = this.value;
  39. const max = this.max;
  40. if (typeof value === 'number' && typeof max === 'number') {
  41. return max < value ? `${max}+` : value;
  42. }
  43. return value;
  44. }
  45. }
  46. };
  47. </script>