1. 安装 Element Plus：
如果你还没有安装 Element Plus，请参考前面的步骤进行安装。
2. 导入和使用 Card：
在你的 Vue 组件中导入 Card，并在模板中使用它。以下是一个简单的示例：
<template>
<div>
<el-card>
<!-- 卡片内容 -->
<div slot="header" class="clearfix">
<span>卡片标题</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>
<div>
<p>这是卡片的内容。</p>
<p>可以放置文本、图片等任何内容。</p>
</div>
</el-card>
</div>
</template>
<script>
import { ElCard, ElButton } from 'element-plus';
export default {
components: {
ElCard,
ElButton,
},
};
</script>
在上述代码中，我们导入了 ElCard 和 ElButton 组件，并在模板中使用 ElCard 包裹一些内容。卡片中包含了一个标题和一些内容，你可以根据需要调整内容和样式。
3. 自定义 Card：
你可以根据需要自定义 Card，例如，设置样式、添加边框等：
<template>
<div>
<el-card class="custom-card" :header="cardHeader">
<!-- 自定义卡片内容 -->
<p>这是自定义卡片的内容。</p>
<el-button type="primary">自定义按钮</el-button>
</el-card>
</div>
</template>
<script>
import { ElCard, ElButton } from 'element-plus';
export default {
components: {
ElCard,
ElButton,
},
data() {
return {
cardHeader: '自定义卡片标题',
};
},
};
</script>
<style scoped>
.custom-card {
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.custom-card .el-card__header {
background-color: #f0f0f0;
border-bottom: 1px solid #ddd;
border-radius: 8px 8px 0 0;
padding: 10px;
}
</style>
在这个例子中，我们通过为 ElCard 添加自定义的样式来自定义卡片的外观。可以通过 header 属性设置卡片的标题。
转载请注明出处：http://www.zyzy.cn/article/detail/5579/ElementPlus