组件— 卡片
基础用法
<el-card class="box-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> <style> .text { font-size: 14px; } .item { margin-bottom: 18px; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both } .box-card { width: 480px; } </style>
简单卡片
<el-card class="box-card"> <div v-for="o in 4" :key="o" class="text item"> {{'列表内容 ' + o }} </div> </el-card> <style> .text { font-size: 14px; } .item { padding: 18px 0; } .box-card { width: 480px; } </style>
带图片
<el-row> <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 "> <el-card :body-style="{ padding: '0px' }"> ![在这里插入图片描述](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zaGFkb3cuZWxlbWVjZG4uY29tL2FwcC9lbGVtZW50L2hhbWJ1cmdlci45Y2Y3YjA5MS01NWU5LTExZTktYTk3Ni03ZjRkMGIwN2VlZjYucG5n) <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> <style> .time { font-size: 13px; color: #999; } .bottom { margin-top: 13px; line-height: 12px; } .button { padding: 0; float: right; } .image { width: 100%; display: block; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both } </style> <script> export default { data() { return { currentDate: new Date() }; } } </script>
卡片阴影
<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>
Attributes:
参数
类型
说明
可选值
默认值
header
设置 header,也可以通过 slot#header 传入 DOM
string
—
—
body-style
设置 body 的样式
object
—
{ padding: ‘20px' }
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“Element Card 卡片的具体使用”评论...
更新动态
2024年04月29日
2024年04月29日
- 4.6版本隐藏锚点位置一览,隐藏锚点在哪
- 群星.2024-追风者电视剧影视原声带【SONY】【FLAC分轨】
- 曾庆瑜.1992-18首中英文经典全集【派森】【WAV+CUE】
- 群星.1991-华纳浪漫心曲精丫华纳】【WAV+CUE】
- 幕府将军 Shogun
- 纳克鲁斯 Knuckles
- 特污兔《填空题》[FLAC/分轨][239.68MB]
- 陈奕迅《黑白灰》台湾版[WAV+CUE][400M]
- 群星《三大发烧女声》3CD[WAV+CUE][2G]
- 英雄传说闪之轨迹北方战役国际版 5月29日全球同步上市
- 仙剑世界风启测试定档5月31日 感受属于东方的浪漫幻想世界
- 元气骑士前传星界法师怎么玩 操控黑暗禁忌
- 物华弥新迷踪盘第二关怎么过 迷踪盘第二关通关方法
- 物华弥新迷踪盘第三关怎么过 迷踪盘第三关通关方法
- 物华弥新迷踪盘第四关怎么过 迷踪盘第四关通关方法