uni-badge.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <template>
  2. <text class="uni-badge" v-if="text" :class="setClass" @click="onClick()">{{text}}</text>
  3. </template>
  4. <script>
  5. export default {
  6. name: 'uni-badge',
  7. props: {
  8. type: {
  9. type: String,
  10. default: 'default'
  11. },
  12. inverted: {
  13. type: Boolean,
  14. default: false
  15. },
  16. text: {
  17. type: String,
  18. default: ''
  19. },
  20. size: { //small.normal
  21. type: String,
  22. default: 'normal'
  23. }
  24. },
  25. computed: {
  26. setClass() {
  27. let classList = ['uni-badge-' + this.type, 'uni-badge--' + this.size];
  28. if (this.inverted === true) {
  29. classList.push('uni-badge-inverted')
  30. }
  31. return classList.join(" ")
  32. }
  33. },
  34. methods: {
  35. onClick() {
  36. this.$emit('click')
  37. }
  38. }
  39. }
  40. </script>
  41. <style lang="scss">
  42. $bage-size:12px;
  43. $bage-small:scale(0.8);
  44. .uni-badge {
  45. font-family: 'Helvetica Neue', Helvetica, sans-serif;
  46. box-sizing: border-box;
  47. font-size: $bage-size;
  48. line-height: 1;
  49. display: inline-block;
  50. padding: 3px 6px;
  51. color: $uni-text-color;
  52. border-radius: 100px;
  53. background-color: $uni-bg-color-hover;
  54. &.uni-badge-inverted {
  55. padding: 0 5px 0 0;
  56. color: $uni-text-color-grey;
  57. background-color: transparent;
  58. }
  59. &-primary {
  60. color: $uni-text-color-inverse;
  61. background-color: $uni-color-primary;
  62. &.uni-badge-inverted {
  63. color: $uni-color-primary;
  64. background-color: transparent
  65. }
  66. }
  67. &-success {
  68. color: $uni-text-color-inverse;
  69. background-color: $uni-color-success;
  70. &.uni-badge-inverted {
  71. color: $uni-color-success;
  72. background-color: transparent
  73. }
  74. }
  75. &-warning {
  76. color: $uni-text-color-inverse;
  77. background-color: $uni-color-warning;
  78. &.uni-badge-inverted {
  79. color: $uni-color-warning;
  80. background-color: transparent
  81. }
  82. }
  83. &-error {
  84. color: $uni-text-color-inverse;
  85. background-color: $uni-color-error;
  86. &.uni-badge-inverted {
  87. color: $uni-color-error;
  88. background-color: transparent
  89. }
  90. }
  91. &--small {
  92. transform: $bage-small;
  93. transform-origin: center center;
  94. }
  95. }
  96. </style>