diff --git a/src/components/card/card.vue b/src/components/card/card.vue index d336ca9..bfb973a 100644 --- a/src/components/card/card.vue +++ b/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> diff --git a/src/index.js b/src/index.js index de48edf..ab173e0 100644 --- a/src/index.js +++ b/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, diff --git a/test/app.vue b/test/app.vue index 0c01427..72d52d9 100644 --- a/test/app.vue +++ b/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> </ul> </nav> <router-view></router-view> diff --git a/test/main.js b/test/main.js index 36ab8d9..04712e0 100644 --- a/test/main.js +++ b/test/main.js @@ -84,6 +84,10 @@ const router = new VueRouter({ { path: '/carousel', component: require('./routers/carousel.vue') + }, + { + path: '/card', + component: require('./routers/card.vue') } ] }); diff --git a/test/routers/card.vue b/test/routers/card.vue index 75fb31b..06f94d6 100644 --- a/test/routers/card.vue +++ b/test/routers/card.vue @@ -1,38 +1,42 @@ <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: { - + }, data () { return { - + } }, computed: { - + }, methods: { - + } } </script> \ No newline at end of file -- libgit2 0.21.4