1. Card卡片
1.1. Card卡片将信息聚合在卡片容器中展示。
1.2. Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
header | 设置header, 也可以通过slot#header传入DOM | string | 无 | 无 |
body-style | 设置body的样式 | object | 无 | { padding: '20px' } |
shadow | 设置阴影显示时机 | string | always / hover / never | always |
2. Card卡片例子
2.1. 使用脚手架新建一个名为element-ui-card的前端项目, 同时安装Element插件。
2.2. 编辑index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Card from '../components/Card.vue'
import ImgCard from '../components/ImgCard.vue'
import ShadowCard from '../components/ShadowCard.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', redirect: '/Card' },
{ path: '/Card', component: Card },
{ path: '/ImgCard', component: ImgCard },
{ path: '/ShadowCard', component: ShadowCard }
]
const router = new VueRouter({
routes
})
export default router
2.3. 在components下创建Card.vue
<template>
<div>
<h1>基础用法</h1>
<h4>Card组件包括header和body部分, header部分需要有显式具名slot分发, 同时也是可选的。</h4>
<el-card>
<div slot="header" class="clearfix">
<span>卡片名称</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'列表内容 ' + o }}
</div>
</el-card>
</div>
</template>
<style scoped>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.box-card {
width: 480px;
}
</style>
2.4. 在components下创建ImgCard.vue
<template>
<div>
<h1>带图片</h1>
<h4>配置body-style属性来自定义body部分的style, 我们还使用了布局组件。</h4>
<el-row>
<el-col :span="4" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
<el-card :body-style="{ padding: '0px' }">
<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
<div style="padding: 14px;">
<span>好吃的汉堡</span>
<div class="bottom clearfix">
<time class="time">{{ currentDate }}</time>
<el-button type="text" class="button">操作按钮</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<style scoped>
.time {
font-size: 13px;
color: #999;
}
.bottom {
margin-top: 13px;
line-height: 12px;
}
.button {
padding: 0;
float: right;
}
.image {
width: 100%;
display: block;
}
</style>
<script>
export default {
data () {
return {
currentDate: new Date()
}
}
}
</script>
2.5. 在components下创建ShadowCard.vue
<template>
<div>
<h1>卡片阴影</h1>
<h4>通过shadow属性设置卡片阴影出现的时机: always、hover或never。</h4>
<el-row :gutter="12">
<el-col :span="8">
<el-card shadow="always">总是显示</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover">鼠标悬浮时显示</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="never">从不显示</el-card>
</el-col>
</el-row>
</div>
</template>
2.6. 运行项目, 访问http://localhost:8080/#/Card
2.7. 运行项目, 访问http://localhost:8080/#/ImgCard
2.8. 运行项目, 访问http://localhost:8080/#/ShadowCard