chenhaodong / 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 1 <template>
2 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 5 <div :class="bodyClasses"><slot></slot></div>
6 6 </div>
7 7 </template>
... ... @@ -50,9 +50,13 @@
50 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 62 </script>
... ...
src/index.js
  Show/Hide comments   View file @130a9f5
... ... @@ -7,7 +7,7 @@ import Alert from &#39;./components/alert&#39;;
7 7 import Badge from './components/badge';
8 8 // import Breadcrumb from './components/breadcrumb';
9 9 import Button from './components/button';
10   -// import Card from './components/card';
  10 +import Card from './components/card';
11 11 import Carousel from './components/carousel';
12 12 // import Cascader from './components/cascader';
13 13 import Checkbox from './components/checkbox';
... ... @@ -56,7 +56,7 @@ const iview = {
56 56 // iButton: Button,
57 57 Button,
58 58 ButtonGroup: Button.Group,
59   - // Card,
  59 + Card,
60 60 Carousel,
61 61 CarouselItem: Carousel.Item,
62 62 // Cascader,
... ...
test/app.vue
  Show/Hide comments   View file @130a9f5
... ... @@ -30,6 +30,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
30 30 <li><router-link to="/upload">Upload</router-link></li>
31 31 <li><router-link to="/collapse">Collapse</router-link></li>
32 32 <li><router-link to="/carousel">Carousel</router-link></li>
  33 + <li><router-link to="/card">Card</router-link></li>
33 34 <li><router-link to="/tree">Tree</router-link></li>
34 35 </ul>
35 36 </nav>
... ...
test/main.js
  Show/Hide comments   View file @130a9f5
... ... @@ -86,6 +86,10 @@ const router = new VueRouter({
86 86 component: require('./routers/carousel.vue')
87 87 },
88 88 {
  89 + path: '/card',
  90 + component: require('./routers/card.vue')
  91 + },
  92 + {
89 93 path: '/tree',
90 94 component: require('./routers/tree.vue')
91 95 }
... ...
test/routers/card.vue
  Show/Hide comments   View file @130a9f5
1 1 <template>
  2 +<div>
2 3 <Card :bordered="true" style="width:300px">
3 4 <template slot="title">
4   - <p>放寒假的发货会计师</p>
  5 + <p>iView2.0</p>
5 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 11 </Card>
  12 + <br><br>
8 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 17 </Card>
  18 +</div>
13 19 </template>
14 20 <script>
15   - import { Row, Col, Card } from 'iview';
  21 + import { Card } from 'iview';
16 22  
17 23 export default {
18 24 components: {
19   - Row,
20   - iCol: Col,
21 25 Card
22 26 },
23 27 props: {
24   -
  28 +
25 29 },
26 30 data () {
27 31 return {
28   -
  32 +
29 33 }
30 34 },
31 35 computed: {
32   -
  36 +
33 37 },
34 38 methods: {
35   -
  39 +
36 40 }
37 41 }
38 42 </script>
39 43 \ No newline at end of file
... ...