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 学习之旅 (3)
Feb 05 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
js电话号码验证方法
Sep 28 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
js实现经典贪吃蛇小游戏
Mar 19 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 程序员应该使用的10个组件
2009/10/31 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
python实现的希尔排序算法实例
2015/07/01 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
中国跨境电商:Tomtop
2017/03/16 全球购物
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
《兰亭集序》教学反思
2014/02/11 职场文书
优乐美广告词
2014/03/14 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
最感人的道歉情书
2015/05/12 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python