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
@@ -9,4 +9,6 @@ value 改为了 label，使用 v-model，废弃 checked @@ -9,4 +9,6 @@ value 改为了 label，使用 v-model，废弃 checked
9 ### CheckboxGroup 9 ### CheckboxGroup
10 value 改为了 label，使用 v-model，废弃 checked 10 value 改为了 label，使用 v-model，废弃 checked
11 ### Switch 11 ### Switch
12 -废弃checked， 改为了 value，使用 v-model  
13 \ No newline at end of file 12 \ No newline at end of file
  13 +废弃checked， 改为了 value，使用 v-model
  14 +### Badge
  15 +class 改为了 className
14 \ No newline at end of file 16 \ No newline at end of file
@@ -41,7 +41,7 @@ @@ -41,7 +41,7 @@
41 - [ ] Notice 41 - [ ] Notice
42 - [ ] Modal 42 - [ ] Modal
43 - [ ] Progress 43 - [ ] Progress
44 -- [ ] Badge 44 +- [x] Badge
45 - [ ] Collapse 45 - [ ] Collapse
46 - [x] Timeline 46 - [x] Timeline
47 - [ ] Tag 47 - [ ] Tag
src/components/badge/badge.vue
  Show/Hide comments   View file @15368be
1 <template> 1 <template>
2 - <span v-if="dot" :class="classes" v-el:badge> 2 + <span v-if="dot" :class="classes" ref="badge">
3 <slot></slot> 3 <slot></slot>
4 <sup :class="dotClasses" v-show="badge"></sup> 4 <sup :class="dotClasses" v-show="badge"></sup>
5 </span> 5 </span>
6 - <span v-else :class="classes" v-el:badge> 6 + <span v-else :class="classes" ref="badge">
7 <slot></slot> 7 <slot></slot>
8 <sup v-if="count" :class="countClasses" v-show="badge">{{ finalCount }}</sup> 8 <sup v-if="count" :class="countClasses" v-show="badge">{{ finalCount }}</sup>
9 </span> 9 </span>
@@ -22,7 +22,7 @@ @@ -22,7 +22,7 @@
22 type: [Number, String], 22 type: [Number, String],
23 default: 99 23 default: 99
24 }, 24 },
25 - class: String 25 + className: String
26 }, 26 },
27 computed: { 27 computed: {
28 classes () { 28 classes () {
@@ -35,7 +35,7 @@ @@ -35,7 +35,7 @@
35 return [ 35 return [
36 `${prefixCls}-count`, 36 `${prefixCls}-count`,
37 { 37 {
38 - [`${this.class}`]: !!this.class, 38 + [`${this.className}`]: !!this.className,
39 [`${prefixCls}-count-alone`]: this.alone 39 [`${prefixCls}-count-alone`]: this.alone
40 } 40 }
41 ]; 41 ];
@@ -68,7 +68,7 @@ @@ -68,7 +68,7 @@
68 }; 68 };
69 }, 69 },
70 compiled () { 70 compiled () {
71 - const child_length = this.$els.badge.children.length; 71 + const child_length = this.$refs.badge.children.length;
72 if (child_length === 1) { 72 if (child_length === 1) {
73 this.alone = true; 73 this.alone = true;
74 } 74 }
@@ -4,7 +4,7 @@ import &#39;core-js/fn/array/find-index&#39;; @@ -4,7 +4,7 @@ import &#39;core-js/fn/array/find-index&#39;;
4 import Affix from './components/affix'; 4 import Affix from './components/affix';
5 import Alert from './components/alert'; 5 import Alert from './components/alert';
6 // import BackTop from './components/back-top'; 6 // import BackTop from './components/back-top';
7 -// import Badge from './components/badge'; 7 +import Badge from './components/badge';
8 // import Breadcrumb from './components/breadcrumb'; 8 // import Breadcrumb from './components/breadcrumb';
9 import Button from './components/button'; 9 import Button from './components/button';
10 // import Card from './components/card'; 10 // import Card from './components/card';
@@ -50,7 +50,7 @@ const iview = { @@ -50,7 +50,7 @@ const iview = {
50 Affix, 50 Affix,
51 Alert, 51 Alert,
52 // BackTop, 52 // BackTop,
53 - // Badge, 53 + Badge,
54 // Breadcrumb, 54 // Breadcrumb,
55 // BreadcrumbItem: Breadcrumb.Item, 55 // BreadcrumbItem: Breadcrumb.Item,
56 // iButton: Button, 56 // iButton: Button,
@@ -23,6 +23,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; } @@ -23,6 +23,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
23 <li><router-link to="/timeline">Timeline</router-link></li> 23 <li><router-link to="/timeline">Timeline</router-link></li>
24 <li><router-link to="/switch">Switch</router-link></li> 24 <li><router-link to="/switch">Switch</router-link></li>
25 <li><router-link to="/alert">Alert</router-link></li> 25 <li><router-link to="/alert">Alert</router-link></li>
  26 + <li><router-link to="/badge">Badge</router-link></li>
26 </ul> 27 </ul>
27 </nav> 28 </nav>
28 <router-view></router-view> 29 <router-view></router-view>
@@ -56,6 +56,10 @@ const router = new VueRouter({ @@ -56,6 +56,10 @@ const router = new VueRouter({
56 { 56 {
57 path: '/alert', 57 path: '/alert',
58 component: require('./routers/alert.vue') 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 \ No newline at end of file 51 \ No newline at end of file