Blame view

src/components/badge/badge.vue 2.08 KB
7fa943eb   梁灏   init
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
  <template>
      <span v-if="dot" :class="classes" v-el:badge>
          <slot></slot>
          <sup :class="dotClasses" v-show="badge"></sup>
      </span>
      <span v-else :class="classes" v-el:badge>
          <slot></slot>
          <sup v-if="count" :class="countClasses" v-show="badge">{{ finalCount }}</sup>
      </span>
  </template>
  <script>
      const prefixCls = 'ivu-badge';
  
      export default {
          props: {
              count: [Number, String],
              dot: {
                  type: Boolean,
                  default: false
              },
              overflowCount: {
                  type: [Number, String],
                  default: 99
              },
              class: String
          },
          computed: {
              classes () {
                  return `${prefixCls}`;
              },
              dotClasses () {
                  return `${prefixCls}-dot`;
              },
              countClasses () {
                  return [
                      `${prefixCls}-count`,
                      {
                          [`${this.class}`]: !!this.class,
                          [`${prefixCls}-count-alone`]: this.alone
                      }
                  ]
              },
              finalCount () {
                  return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count;
              },
              badge () {
                  let status = false;
  
                  if (this.count) {
                      status = !(parseInt(this.count) === 0);
                  }
  
                  if (this.dot) {
                      status = true;
                      if (this.count) {
                          if (parseInt(this.count) === 0) {
                              status = false;
                          }
                      }
                  }
  
                  return status;
              }
          },
          data () {
              return {
                  alone: false
              }
          },
          compiled () {
              const child_length = this.$els.badge.children.length;
              if (child_length === 1) {
                  this.alone = true;
              }
          }
      }
  </script>