Blame view

examples/routers/badge.vue 1.13 KB
15368be1   梁灏   Support Badge
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
  <style scoped>
      .demo-badge{
          width: 42px;
          height: 42px;
          background: #eee;
          border-radius: 6px;
          display: inline-block;
      }
  </style>
  <style>
      .demo-badge-alone{
          background: #5cb85c !important;
      }
  </style>
  <template>
      <div>
          <Badge count="3">
              <a href="#" class="demo-badge"></a>
          </Badge>
          <Badge dot>
              <a href="#" class="demo-badge"></a>
          </Badge>
          <Badge dot>
              <Icon type="ios-bell-outline" size="26"></Icon>
          </Badge>
          <Badge dot>
              <a href="#">可以是一个链接</a>
          </Badge>
          <Badge count="100">
              <a href="#" class="demo-badge"></a>
          </Badge>
          <Badge count="1000" overflow-count="999">
              <a href="#" class="demo-badge"></a>
          </Badge>
          <br>
          <Badge count="10"></Badge>
          <br><br>
          <Badge count="20" class-name="demo-badge-alone"></Badge>
      </div>
  </template>
  <script>
      export default {
          props: {},
          data () {
              return {};
          },
          computed: {},
          methods: {}
      };
  </script>