Element Card 卡片的具体使用


Posted in Javascript onJuly 26, 2020

组件— 卡片

基础用法

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 ? 2 : 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 卡片内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js 设置选中行的样式的实现代码
May 24 Javascript
js确定对象类型方法
Mar 30 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
Element Carousel 走马灯的具体实现
Jul 26 #Javascript
three.js欧拉角和四元数的使用方法
Jul 26 #Javascript
Element Collapse 折叠面板的使用方法
Jul 26 #Javascript
Element Input输入框的使用方法
Jul 26 #Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 #Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 #Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 #Javascript
You might like
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
python使用matplotlib画饼状图
2018/09/25 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
python读写csv文件实例代码
2019/07/05 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
Python异常处理机制结构实例解析
2020/07/23 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
Python中如何定义一个函数
2016/09/06 面试题
档案检查欢迎词
2014/01/13 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
运动会通讯稿100字
2015/07/20 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers