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 相关文章推荐
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
jquery的map与get方法详解
Nov 04 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
关于vue面试题汇总
Mar 20 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 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
使用PHP模拟HTTP认证
2006/10/09 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
javascript,jquery闭包概念分析
2010/06/19 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
详解pandas赋值失败问题解决
2020/11/29 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
订货会邀请函
2015/01/31 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
Python字典的基础操作
2021/11/01 Python