other / mew-iview

Commit 15368be1723ee42255794524c1adee5b3cfd2c32

Authored by 梁灏
1 parent 5d122b37

Support Badge 

Support Badge
Showing 7 changed files with 66 additions and 9 deletions   Show diff stats
Inline Side-by-side
CHANGE.md
  Show/Hide comments   View file @15368be
... ... @@ -9,4 +9,6 @@ value 改为了 label，使用 v-model，废弃 checked
9 9 ### CheckboxGroup
10 10 value 改为了 label，使用 v-model，废弃 checked
11 11 ### Switch
12   -废弃checked， 改为了 value，使用 v-model
13 12 \ No newline at end of file
  13 +废弃checked， 改为了 value，使用 v-model
  14 +### Badge
  15 +class 改为了 className
14 16 \ No newline at end of file
... ...
README.md
  Show/Hide comments   View file @15368be
... ... @@ -41,7 +41,7 @@
41 41 - [ ] Notice
42 42 - [ ] Modal
43 43 - [ ] Progress
44   -- [ ] Badge
  44 +- [x] Badge
45 45 - [ ] Collapse
46 46 - [x] Timeline
47 47 - [ ] Tag
... ...
src/components/badge/badge.vue
  Show/Hide comments   View file @15368be
1 1 <template>
2   - <span v-if="dot" :class="classes" v-el:badge>
  2 + <span v-if="dot" :class="classes" ref="badge">
3 3 <slot></slot>
4 4 <sup :class="dotClasses" v-show="badge"></sup>
5 5 </span>
6   - <span v-else :class="classes" v-el:badge>
  6 + <span v-else :class="classes" ref="badge">
7 7 <slot></slot>
8 8 <sup v-if="count" :class="countClasses" v-show="badge">{{ finalCount }}</sup>
9 9 </span>
... ... @@ -22,7 +22,7 @@
22 22 type: [Number, String],
23 23 default: 99
24 24 },
25   - class: String
  25 + className: String
26 26 },
27 27 computed: {
28 28 classes () {
... ... @@ -35,7 +35,7 @@
35 35 return [
36 36 `${prefixCls}-count`,
37 37 {
38   - [`${this.class}`]: !!this.class,
  38 + [`${this.className}`]: !!this.className,
39 39 [`${prefixCls}-count-alone`]: this.alone
40 40 }
41 41 ];
... ... @@ -68,7 +68,7 @@
68 68 };
69 69 },
70 70 compiled () {
71   - const child_length = this.$els.badge.children.length;
  71 + const child_length = this.$refs.badge.children.length;
72 72 if (child_length === 1) {
73 73 this.alone = true;
74 74 }
... ...
src/index.js
  Show/Hide comments   View file @15368be
... ... @@ -4,7 +4,7 @@ import &#39;core-js/fn/array/find-index&#39;;
4 4 import Affix from './components/affix';
5 5 import Alert from './components/alert';
6 6 // import BackTop from './components/back-top';
7   -// import Badge from './components/badge';
  7 +import Badge from './components/badge';
8 8 // import Breadcrumb from './components/breadcrumb';
9 9 import Button from './components/button';
10 10 // import Card from './components/card';
... ... @@ -50,7 +50,7 @@ const iview = {
50 50 Affix,
51 51 Alert,
52 52 // BackTop,
53   - // Badge,
  53 + Badge,
54 54 // Breadcrumb,
55 55 // BreadcrumbItem: Breadcrumb.Item,
56 56 // iButton: Button,
... ...
test/app.vue
  Show/Hide comments   View file @15368be
... ... @@ -23,6 +23,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
23 23 <li><router-link to="/timeline">Timeline</router-link></li>
24 24 <li><router-link to="/switch">Switch</router-link></li>
25 25 <li><router-link to="/alert">Alert</router-link></li>
  26 + <li><router-link to="/badge">Badge</router-link></li>
26 27 </ul>
27 28 </nav>
28 29 <router-view></router-view>
... ...
test/main.js
  Show/Hide comments   View file @15368be
... ... @@ -56,6 +56,10 @@ const router = new VueRouter({
56 56 {
57 57 path: '/alert',
58 58 component: require('./routers/alert.vue')
  59 + },
  60 + {
  61 + path: '/badge',
  62 + component: require('./routers/badge.vue')
59 63 }
60 64 ]
61 65 });
... ...
test/routers/badge.vue 0 → 100644
  Show/Hide comments   View file @15368be
  1 +<style scoped>
  2 + .demo-badge{
  3 + width: 42px;
  4 + height: 42px;
  5 + background: #eee;
  6 + border-radius: 6px;
  7 + display: inline-block;
  8 + }
  9 +</style>
  10 +<style>
  11 + .demo-badge-alone{
  12 + background: #5cb85c !important;
  13 + }
  14 +</style>
  15 +<template>
  16 + <div>
  17 + <Badge count="3">
  18 + <a href="#" class="demo-badge"></a>
  19 + </Badge>
  20 + <Badge dot>
  21 + <a href="#" class="demo-badge"></a>
  22 + </Badge>
  23 + <Badge dot>
  24 + <Icon type="ios-bell-outline" size="26"></Icon>
  25 + </Badge>
  26 + <Badge dot>
  27 + <a href="#">可以是一个链接</a>
  28 + </Badge>
  29 + <Badge count="100">
  30 + <a href="#" class="demo-badge"></a>
  31 + </Badge>
  32 + <Badge count="1000" overflow-count="999">
  33 + <a href="#" class="demo-badge"></a>
  34 + </Badge>
  35 + <br>
  36 + <Badge count="10"></Badge>
  37 + <br><br>
  38 + <Badge count="20" class-name="demo-badge-alone"></Badge>
  39 + </div>
  40 +</template>
  41 +<script>
  42 + export default {
  43 + props: {},
  44 + data () {
  45 + return {};
  46 + },
  47 + computed: {},
  48 + methods: {}
  49 + };
  50 +</script>
0 51 \ No newline at end of file
... ...