other / mew-iview

Commit 743d0278979a81f7b4e0ae0de4d201b0e93bf5ae

Authored by 梁灏
1 parent e6c0b158

update Card 

update Card @huixisheng
Showing 2 changed files with 80 additions and 38 deletions   Show diff stats
Inline Side-by-side
src/components/card/card.vue
  Show/Hide comments   View file @743d027
1 1 <template>
2 2 <div :class="classes">
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>
  3 + <div :class="headClasses" v-if="showHead"><slot name="title"></slot></div>
  4 + <div :class="extraClasses" v-if="showExtra"><slot name="extra"></slot></div>
5 5 <div :class="bodyClasses"><slot></slot></div>
6 6 </div>
7 7 </template>
... ... @@ -51,12 +51,8 @@
51 51 }
52 52 },
53 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   - }
  54 + this.showHead = this.$slots.title !== undefined;
  55 + this.showExtra = this.$slots.extra !== undefined;
60 56 }
61 57 };
62 58 </script>
... ...
test/routers/card.vue
  Show/Hide comments   View file @743d027
1 1 <template>
2   -<div>
3   - <Card :bordered="true" style="width:300px">
4   - <template slot="title">
5   - <p>iView2.0</p>
6   - </template>
7   - <template slot="extra">
8   - <Button size="small">More</Button>
9   - </template>
10   - <p>iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。</p>
  2 + <Card style="width:350px">
  3 + <p slot="title">
  4 + <Icon type="ios-film-outline"></Icon>
  5 + 经典电影
  6 + </p>
  7 + <a href="#" slot="extra" @click.prevent="changeLimit">
  8 + <Icon type="ios-loop-strong"></Icon>
  9 + 换一换
  10 + </a>
  11 + <ul>
  12 + <li v-for="item in movieList">
  13 + <a :href="item.url" target="_blank">{{ item.name }}</a>
  14 + <span>
  15 + <Icon type="ios-star" v-for="n in 4"></Icon><Icon type="ios-star" v-if="item.rate >= 9.5"></Icon><Icon type="ios-star-half" v-else></Icon>
  16 + {{ item.rate }}
  17 + </span>
  18 + </li>
  19 + </ul>
11 20 </Card>
12   - <br><br>
13   - <Card style="width:300px">
14   - <p>Hello</p>
15   - <p>iView2.0</p>
16   - <h3>Card</h3>
17   - </Card>
18   -</div>
19 21 </template>
20 22 <script>
21   - import { Card } from 'iview';
22   -
23 23 export default {
24   - components: {
25   - Card
26   - },
27   - props: {
28   -
29   - },
30 24 data () {
31 25 return {
32   -
  26 + limitNum: 5,
  27 + limitFrom: 0,
  28 + movieList: [
  29 + {
  30 + name: '肖申克的救赎',
  31 + url: 'https://movie.douban.com/subject/1292052/',
  32 + rate: 9.6
  33 + },
  34 + {
  35 + name: '这个杀手不太冷',
  36 + url: 'https://movie.douban.com/subject/1295644/',
  37 + rate: 9.4
  38 + },
  39 + {
  40 + name: '霸王别姬',
  41 + url: 'https://movie.douban.com/subject/1291546/',
  42 + rate: 9.5
  43 + },
  44 + {
  45 + name: '阿甘正传',
  46 + url: 'https://movie.douban.com/subject/1292720/',
  47 + rate: 9.4
  48 + },
  49 + {
  50 + name: '美丽人生',
  51 + url: 'https://movie.douban.com/subject/1292063/',
  52 + rate: 9.5
  53 + },
  54 + {
  55 + name: '千与千寻',
  56 + url: 'https://movie.douban.com/subject/1291561/',
  57 + rate: 9.2
  58 + },
  59 + {
  60 + name: '辛德勒的名单',
  61 + url: 'https://movie.douban.com/subject/1295124/',
  62 + rate: 9.4
  63 + },
  64 + {
  65 + name: '海上钢琴师',
  66 + url: 'https://movie.douban.com/subject/1292001/',
  67 + rate: 9.2
  68 + },
  69 + {
  70 + name: '机器人总动员',
  71 + url: 'https://movie.douban.com/subject/2131459/',
  72 + rate: 9.3
  73 + },
  74 + {
  75 + name: '盗梦空间',
  76 + url: 'https://movie.douban.com/subject/3541415/',
  77 + rate: 9.2
  78 + }
  79 + ]
33 80 }
34 81 },
35   - computed: {
36   -
37   - },
38 82 methods: {
39   -
  83 + changeLimit () {
  84 + this.limitFrom = this.limitFrom === 0 ? 5 : 0;
  85 + }
40 86 }
41 87 }
42   -</script>
43 88 \ No newline at end of file
  89 +</script>
... ...