Commit 743d0278979a81f7b4e0ae0de4d201b0e93bf5ae
1 parent
e6c0b158
update Card
update Card @huixisheng
Showing
2 changed files
with
80 additions
and
38 deletions
Show diff stats
src/components/card/card.vue
| 1 | <template> | 1 | <template> |
| 2 | <div :class="classes"> | 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 | <div :class="bodyClasses"><slot></slot></div> | 5 | <div :class="bodyClasses"><slot></slot></div> |
| 6 | </div> | 6 | </div> |
| 7 | </template> | 7 | </template> |
| @@ -51,12 +51,8 @@ | @@ -51,12 +51,8 @@ | ||
| 51 | } | 51 | } |
| 52 | }, | 52 | }, |
| 53 | mounted () { | 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 | </script> | 58 | </script> |
test/routers/card.vue
| 1 | <template> | 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 | </Card> | 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 | </template> | 21 | </template> |
| 20 | <script> | 22 | <script> |
| 21 | - import { Card } from 'iview'; | ||
| 22 | - | ||
| 23 | export default { | 23 | export default { |
| 24 | - components: { | ||
| 25 | - Card | ||
| 26 | - }, | ||
| 27 | - props: { | ||
| 28 | - | ||
| 29 | - }, | ||
| 30 | data () { | 24 | data () { |
| 31 | return { | 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 | methods: { | 82 | methods: { |
| 39 | - | 83 | + changeLimit () { |
| 84 | + this.limitFrom = this.limitFrom === 0 ? 5 : 0; | ||
| 85 | + } | ||
| 40 | } | 86 | } |
| 41 | } | 87 | } |
| 42 | -</script> | ||
| 43 | \ No newline at end of file | 88 | \ No newline at end of file |
| 89 | +</script> |