1. Card卡片

1.1. Card卡片將信息聚合在卡片容器中展示。

1.2. Attributes

參數	說明	類型	可選值	默認值
header	設置header, 也可以通過slot#header傳入DOM	string	無	無
body-style	設置body的樣式	object	無	{ padding: '20px' }
shadow	設置陰影顯示時機	string	always / hover / never	always

2. Card卡片例子

2.1. 使用腳手架新建一個名為element-ui-card的前端項目, 同時安裝Element插件。

2.2. 編輯index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import Card from '../components/Card.vue' import ImgCard from '../components/ImgCard.vue' import ShadowCard from '../components/ShadowCard.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Card' },{ path: '/Card', component: Card },{ path: '/ImgCard', component: ImgCard },{ path: '/ShadowCard', component: ShadowCard } ]const router = new VueRouter({routes })export default router

2.3. 在components下創建Card.vue

<template><div><h1>基礎用法</h1><h4>Card組件包括header和body部分, header部分需要有顯式具名slot分發, 同時也是可選的。</h4><el-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></div> </template><style scoped>.text {font-size: 14px;}.item {margin-bottom: 18px;}.box-card {width: 480px;} </style>

2.4. 在components下創建ImgCard.vue

<template><div><h1>帶圖片</h1><h4>配置body-style屬性來自定義body部分的style, 我們還使用了布局組件。</h4><el-row><el-col :span="4" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0"><el-card :body-style="{ padding: '0px' }"><img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image"><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></div> </template><style scoped>.time {font-size: 13px;color: #999;}.bottom {margin-top: 13px;line-height: 12px;}.button {padding: 0;float: right;}.image {width: 100%;display: block;} </style><script> export default {data () {return {currentDate: new Date()}} } </script>

2.5. 在components下創建ShadowCard.vue

<template><div><h1>卡片陰影</h1><h4>通過shadow屬性設置卡片陰影出現的時機: always、hover或never。</h4><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></div> </template>

2.6. 運行項目, 訪問http://localhost:8080/#/Card

2.7. 運行項目, 訪問http://localhost:8080/#/ImgCard

2.8. 運行項目, 訪問http://localhost:8080/#/ShadowCard

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的043_Card卡片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。