other / mew-iview

Commit 130a9f583208c8bf0f90e5abc69d1a612ff980e8

Authored by Aresn
Committed by GitHub
2 parents 34ee7b4a 49dd45f4

Merge pull request #334 from huixisheng/feature-card 

Support card
Showing 5 changed files with 32 additions and 19 deletions   Show diff stats
Inline Side-by-side
src/components/card/card.vue
  Show/Hide comments   View file @130a9f5
1 <template> 1 <template>
2 <div :class="classes"> 2 <div :class="classes">
3 - <div :class="headClasses" v-if="showHead" v-el:head><slot name="title"></slot></div>  
4 - <div :class="extraClasses" v-if="showExtra" v-el:extra><slot name="extra"></slot></div> 3 + <div :class="headClasses" v-if="showHead" ref="head"><slot name="title"></slot></div>
  4 + <div :class="extraClasses" v-if="showExtra" ref="extra"><slot name="extra"></slot></div>
5 <div :class="bodyClasses"><slot></slot></div> 5 <div :class="bodyClasses"><slot></slot></div>
6 </div> 6 </div>
7 </template> 7 </template>
@@ -50,9 +50,13 @@ @@ -50,9 +50,13 @@
50 return `${prefixCls}-body`; 50 return `${prefixCls}-body`;
51 } 51 }
52 }, 52 },
53 - compiled () {  
54 - this.showHead = this.$els.head.innerHTML != '';  
55 - this.showExtra = this.$els.extra.innerHTML != ''; 53 + mounted () {
  54 + if (this.$refs.head) {
  55 + this.showHead = this.$refs.head.innerHTML != '';
  56 + }
  57 + if (this.$refs.extra) {
  58 + this.showExtra = this.$refs.extra.innerHTML != '';
  59 + }
56 } 60 }
57 }; 61 };
58 </script> 62 </script>
@@ -7,7 +7,7 @@ import Alert from &#39;./components/alert&#39;; @@ -7,7 +7,7 @@ import Alert from &#39;./components/alert&#39;;
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';
11 import Carousel from './components/carousel'; 11 import Carousel from './components/carousel';
12 // import Cascader from './components/cascader'; 12 // import Cascader from './components/cascader';
13 import Checkbox from './components/checkbox'; 13 import Checkbox from './components/checkbox';
@@ -56,7 +56,7 @@ const iview = { @@ -56,7 +56,7 @@ const iview = {
56 // iButton: Button, 56 // iButton: Button,
57 Button, 57 Button,
58 ButtonGroup: Button.Group, 58 ButtonGroup: Button.Group,
59 - // Card, 59 + Card,
60 Carousel, 60 Carousel,
61 CarouselItem: Carousel.Item, 61 CarouselItem: Carousel.Item,
62 // Cascader, 62 // Cascader,
@@ -30,6 +30,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; } @@ -30,6 +30,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
30 <li><router-link to="/upload">Upload</router-link></li> 30 <li><router-link to="/upload">Upload</router-link></li>
31 <li><router-link to="/collapse">Collapse</router-link></li> 31 <li><router-link to="/collapse">Collapse</router-link></li>
32 <li><router-link to="/carousel">Carousel</router-link></li> 32 <li><router-link to="/carousel">Carousel</router-link></li>
  33 + <li><router-link to="/card">Card</router-link></li>
33 <li><router-link to="/tree">Tree</router-link></li> 34 <li><router-link to="/tree">Tree</router-link></li>
34 </ul> 35 </ul>
35 </nav> 36 </nav>
@@ -86,6 +86,10 @@ const router = new VueRouter({ @@ -86,6 +86,10 @@ const router = new VueRouter({
86 component: require('./routers/carousel.vue') 86 component: require('./routers/carousel.vue')
87 }, 87 },
88 { 88 {
  89 + path: '/card',
  90 + component: require('./routers/card.vue')
  91 + },
  92 + {
89 path: '/tree', 93 path: '/tree',
90 component: require('./routers/tree.vue') 94 component: require('./routers/tree.vue')
91 } 95 }
test/routers/card.vue
  Show/Hide comments   View file @130a9f5
1 <template> 1 <template>
  2 +<div>
2 <Card :bordered="true" style="width:300px"> 3 <Card :bordered="true" style="width:300px">
3 <template slot="title"> 4 <template slot="title">
4 - <p>放寒假的发货会计师</p> 5 + <p>iView2.0</p>
5 </template> 6 </template>
6 - <a href="#" slot="extra">More</a> 7 + <template slot="extra">
  8 + <Button size="small">More</Button>
  9 + </template>
  10 + <p>iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。</p>
7 </Card> 11 </Card>
  12 + <br><br>
8 <Card style="width:300px"> 13 <Card style="width:300px">
9 - <p>hello</p>  
10 - <p>hndshf</p>  
11 - <h3>jfds</h3> 14 + <p>Hello</p>
  15 + <p>iView2.0</p>
  16 + <h3>Card</h3>
12 </Card> 17 </Card>
  18 +</div>
13 </template> 19 </template>
14 <script> 20 <script>
15 - import { Row, Col, Card } from 'iview'; 21 + import { Card } from 'iview';
16 22
17 export default { 23 export default {
18 components: { 24 components: {
19 - Row,  
20 - iCol: Col,  
21 Card 25 Card
22 }, 26 },
23 props: { 27 props: {
24 - 28 +
25 }, 29 },
26 data () { 30 data () {
27 return { 31 return {
28 - 32 +
29 } 33 }
30 }, 34 },
31 computed: { 35 computed: {
32 - 36 +
33 }, 37 },
34 methods: { 38 methods: {
35 - 39 +
36 } 40 }
37 } 41 }
38 </script> 42 </script>
39 \ No newline at end of file 43 \ No newline at end of file