圆月山庄资源网 Design By www.vgjia.com

组件— 卡片

基础用法

Element Card 卡片的具体使用

<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>

简单卡片

Element Card 卡片的具体使用

<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>

带图片

Element Card 卡片的具体使用

<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>

卡片阴影

Element Card 卡片的具体使用

<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' }

标签:
Element,Card,卡片,Element,Card,Element,卡片

圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com