drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Card

Browse source 
update Card @huixisheng
This commit is contained in:
梁灏 2017-03-03 10:46:19 +08:00
parent e6c0b158e9
commit 743d027897
2 changed files with 80 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/card/card.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div :class="classes"> <div :class="classes">
<div :class="headClasses" v-if="showHead" ref="head"><slot name="title"></slot></div> <div :class="headClasses" v-if="showHead"><slot name="title"></slot></div>
<div :class="extraClasses" v-if="showExtra" ref="extra"><slot name="extra"></slot></div> <div :class="extraClasses" v-if="showExtra"><slot name="extra"></slot></div>
<div :class="bodyClasses"><slot></slot></div> <div :class="bodyClasses"><slot></slot></div>
</div> </div>
</template> </template>
@ -51,12 +51,8 @@
} }
}, },
mounted () { mounted () {
if (this.$refs.head) { this.showHead = this.$slots.title !== undefined;
this.showHead = this.$refs.head.innerHTML != ''; this.showExtra = this.$slots.extra !== undefined;
}
if (this.$refs.extra) {
this.showExtra = this.$refs.extra.innerHTML != '';
}
} }
}; };
</script> </script>

106
test/routers/card.vue
View file

@ -1,42 +1,88 @@
<template> <template>
<div> <Card style="width:350px">
<Card :bordered="true" style="width:300px"> <p slot="title">
<template slot="title"> <Icon type="ios-film-outline"></Icon>
<p>iView2.0</p> 经典电影
</template> </p>
<template slot="extra"> <a href="#" slot="extra" @click.prevent="changeLimit">
<Button size="small">More</Button> <Icon type="ios-loop-strong"></Icon>
</template> 换一换
<p>iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。</p> </a>
<ul>
<li v-for="item in movieList">
<a :href="item.url" target="_blank">{{ item.name }}</a>
<span>
<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>
{{ item.rate }}
</span>
</li>
</ul>
</Card> </Card>
<br><br>
<Card style="width:300px">
<p>Hello</p>
<p>iView2.0</p>
<h3>Card</h3>
</Card>
</div>
</template> </template>
<script> <script>
import { Card } from 'iview';
export default { export default {
components: {
Card
},
props: {
},
data () { data () {
return { return {
limitNum: 5,
limitFrom: 0,
movieList: [
{
name: '肖申克的救赎',
url: 'https://movie.douban.com/subject/1292052/',
rate: 9.6
},
{
name: '这个杀手不太冷',
url: 'https://movie.douban.com/subject/1295644/',
rate: 9.4
},
{
name: '霸王别姬',
url: 'https://movie.douban.com/subject/1291546/',
rate: 9.5
},
{
name: '阿甘正传',
url: 'https://movie.douban.com/subject/1292720/',
rate: 9.4
},
{
name: '美丽人生',
url: 'https://movie.douban.com/subject/1292063/',
rate: 9.5
},
{
name: '千与千寻',
url: 'https://movie.douban.com/subject/1291561/',
rate: 9.2
},
{
name: '辛德勒的名单',
url: 'https://movie.douban.com/subject/1295124/',
rate: 9.4
},
{
name: '海上钢琴师',
url: 'https://movie.douban.com/subject/1292001/',
rate: 9.2
},
{
name: '机器人总动员',
url: 'https://movie.douban.com/subject/2131459/',
rate: 9.3
},
{
name: '盗梦空间',
url: 'https://movie.douban.com/subject/3541415/',
rate: 9.2
}
]
} }
},
computed: {
}, },
methods: { methods: {
changeLimit () {
this.limitFrom = this.limitFrom === 0 ? 5 : 0;
}
} }
} }
</script> </script>