Merge pull request #334 from huixisheng/feature-card

Support card

src/components/card/card.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="classes">
-        <div :class="headClasses" v-if="showHead" v-el:head><slot name="title"></slot></div>
-        <div :class="extraClasses" v-if="showExtra" v-el:extra><slot name="extra"></slot></div>
+        <div :class="headClasses" v-if="showHead" ref="head"><slot name="title"></slot></div>
+        <div :class="extraClasses" v-if="showExtra" ref="extra"><slot name="extra"></slot></div>
         <div :class="bodyClasses"><slot></slot></div>
     </div>
 </template>
@@ -50,9 +50,13 @@
                 return `${prefixCls}-body`;
             }
         },
-        compiled () {
-            this.showHead = this.$els.head.innerHTML != '';
-            this.showExtra = this.$els.extra.innerHTML != '';
+        mounted () {
+            if (this.$refs.head) {
+                this.showHead = this.$refs.head.innerHTML != '';
+            }
+            if (this.$refs.extra) {
+                this.showExtra = this.$refs.extra.innerHTML != '';
+            }
         }
     };
 </script>

src/index.js

@@ -7,7 +7,7 @@ import Alert from './components/alert';
 import Badge from './components/badge';
 // import Breadcrumb from './components/breadcrumb';
 import Button from './components/button';
-// import Card from './components/card';
+import Card from './components/card';
 import Carousel from './components/carousel';
 // import Cascader from './components/cascader';
 import Checkbox from './components/checkbox';
@@ -56,7 +56,7 @@ const iview = {
     // iButton: Button,
     Button,
     ButtonGroup: Button.Group,
-    // Card,
+    Card,
     Carousel,
     CarouselItem: Carousel.Item,
     // Cascader,

test/app.vue

@@ -30,6 +30,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/upload">Upload</router-link></li>
                 <li><router-link to="/collapse">Collapse</router-link></li>
                 <li><router-link to="/carousel">Carousel</router-link></li>
+                <li><router-link to="/card">Card</router-link></li>
                 <li><router-link to="/tree">Tree</router-link></li>
             </ul>
         </nav>

test/main.js

@@ -85,6 +85,10 @@ const router = new VueRouter({
             path: '/carousel',
             component: require('./routers/carousel.vue')
         },
+        {
+            path: '/card',
+            component: require('./routers/card.vue')
+        },
         {
             path: '/tree',
             component: require('./routers/tree.vue')

test/routers/card.vue

@@ -1,23 +1,27 @@
 <template>
+<div>
     <Card :bordered="true" style="width:300px">
         <template slot="title">
-            <p>放寒假的发货会计师</p>
+            <p>iView2.0</p>
         </template>
-        <a href="#" slot="extra">More</a>
+        <template slot="extra">
+            <Button size="small">More</Button>
+        </template>
+        <p>iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。</p>
     </Card>
+    <br><br>
     <Card style="width:300px">
-        <p>hello</p>
-        <p>hndshf</p>
-        <h3>jfds</h3>
+        <p>Hello</p>
+        <p>iView2.0</p>
+        <h3>Card</h3>
     </Card>
+</div>
 </template>
 <script>
-    import { Row, Col, Card } from 'iview';
+    import { Card } from 'iview';
 
     export default {
         components: {
-            Row,
-            iCol: Col,
             Card
         },
         props: {