Element Plus 的 Card 组件用于包裹和展示一些内容,具有边框、阴影等样式。以下是使用 Element Plus 中的 Card 组件的一些基本示例和代码:

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