lb-vue-ui

Appearance

Card 卡片 ​

用于展示信息内容的容器组件。

基础用法 ​

卡片标题

这是一个基础的卡片组件，用于展示信息内容。卡片可以包含标题、内容和操作按钮等元素。 

<template>
  <lb-card header="卡片标题">
    <p>
      这是一个基础的卡片组件，用于展示信息内容。卡片可以包含标题、内容和操作按钮等元素。
    </p>
  </lb-card>
</template>

带副标题 ​

卡片标题

这是一个副标题

卡片内容区域，可以包含任何内容。副标题提供了额外的描述信息。

<template>
  <lb-card header="卡片标题" subtitle="这是一个副标题">
    <p>卡片内容区域，可以包含任何内容。副标题提供了额外的描述信息。</p>
  </lb-card>
</template>

自定义头部 ​

自定义头部

使用具名插槽可以完全自定义头部内容，包括添加按钮、图标等交互元素。

<template>
  <lb-card>
    <template #header>
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <span>自定义头部</span>
        <lb-button size="small" type="primary">操作</lb-button>
      </div>
    </template>
    <p>使用具名插槽可以完全自定义头部内容，包括添加按钮、图标等交互元素。</p>
  </lb-card>
</template>

带底部 ​

带底部的卡片

卡片的主要内容区域，可以包含文本、图片、表格等各种内容。

<template>
  <lb-card header="带底部的卡片">
    <p>卡片的主要内容区域，可以包含文本、图片、表格等各种内容。</p>
    <template #footer>
      <div style="text-align: right; display: flex; justify-content: flex-end">
        <lb-button size="small">取消</lb-button>
        <lb-button size="small" type="primary" style="margin-left: 8px"
          >确定</lb-button
        >
      </div>
    </template>
  </lb-card>
</template>

阴影效果 ​

始终显示阴影

始终显示阴影效果，提供更好的视觉层次感。

悬停显示阴影

鼠标悬停时显示阴影，提供交互反馈。

无阴影

不显示阴影效果，适合扁平化设计风格。

<template>
  <div style="display: flex; gap: 16px">
    <lb-card header="始终显示阴影" shadow="always" style="width: 200px">
      <p>始终显示阴影效果，提供更好的视觉层次感。</p>
    </lb-card>

    <lb-card header="悬停显示阴影" shadow="hover" style="width: 200px">
      <p>鼠标悬停时显示阴影，提供交互反馈。</p>
    </lb-card>

    <lb-card header="无阴影" shadow="never" style="width: 200px">
      <p>不显示阴影效果，适合扁平化设计风格。</p>
    </lb-card>
  </div>
</template>

可点击卡片 ​

可点击卡片

点击此卡片会触发点击事件，鼠标悬停时会有视觉反馈。

<template>
  <lb-card header="可点击卡片" clickable @click="handleCardClick">
    <p>点击此卡片会触发点击事件，鼠标悬停时会有视觉反馈。</p>
  </lb-card>
</template>

<script setup>
const handleCardClick = () => {
  console.log("卡片被点击了");
};
</script>

禁用状态 ​

禁用状态

此卡片处于禁用状态，无法进行交互操作。禁用状态下会显示半透明效果。

<template>
  <lb-card header="禁用状态" disabled>
    <p>此卡片处于禁用状态，无法进行交互操作。禁用状态下会显示半透明效果。</p>
  </lb-card>
</template>

加载状态 ​

加载状态

卡片内容正在加载中，会显示加载动画遮罩层。

<template>
  <lb-card header="加载状态" loading>
    <p>卡片内容正在加载中，会显示加载动画遮罩层。</p>
  </lb-card>
</template>

自定义样式 ​

自定义样式

自定义宽度、高度、圆角和背景色，满足不同的设计需求。

<template>
  <lb-card
    header="自定义样式"
    :width="300"
    :height="200"
    :radius="16"
    backgroundColor="#f8f9fa"
    headerBackgroundColor="#e9ecef"
  >
    <p>自定义宽度、高度、圆角和背景色，满足不同的设计需求。</p>
  </lb-card>
</template>

无边框 ​

无边框卡片

没有边框的卡片，适合在背景色较深的场景中使用。

<template>
  <lb-card header="无边框卡片" :bordered="false">
    <p>没有边框的卡片，适合在背景色较深的场景中使用。</p>
  </lb-card>
</template>

隐藏头部 ​

没有头部的卡片，适合展示纯内容或图片等。

<template>
  <lb-card :showHeader="false">
    <p>没有头部的卡片，适合展示纯内容或图片等。</p>
  </lb-card>
</template>

实际应用场景 ​

产品信息

¥299.00

产品图片

这是一个高质量的产品，具有优秀的性能和设计。

库存: 50

用户信息

用户

张三

前端开发工程师

拥有5年前端开发经验，擅长Vue.js、React等前端技术栈。

数据统计

1,234
总用户数
567
活跃用户
89%
满意度

系统设置

<template>
  <div
    style="
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    "
  >
    <!-- 产品卡片 -->
    <lb-card
      header="产品信息"
      subtitle="¥299.00"
      clickable
      shadow="hover"
      @click="handleProductClick"
    >
      <div style="text-align: center; margin-bottom: 16px">
        <div
          style="
            width: 100px;
            height: 100px;
            background: #f0f0f0;
            border-radius: 8px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
          "
        >
          产品图片
        </div>
      </div>
      <p style="margin: 0 0 16px 0">
        这是一个高质量的产品，具有优秀的性能和设计。
      </p>
      <template #footer>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <span style="color: #999; font-size: 14px">库存: 50</span>
          <lb-button size="small" type="primary">立即购买</lb-button>
        </div>
      </template>
    </lb-card>

    <!-- 用户信息卡片 -->
    <lb-card header="用户信息" :bordered="false" backgroundColor="#f8f9fa">
      <div style="display: flex; align-items: center; margin-bottom: 16px">
        <div
          style="
            width: 60px;
            height: 60px;
            background: #409eff;
            border-radius: 50%;
            margin-right: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
          "
        >
          用户
        </div>
        <div>
          <h4 style="margin: 0 0 4px 0">张三</h4>
          <p style="margin: 0; color: #666; font-size: 14px">前端开发工程师</p>
        </div>
      </div>
      <p style="margin: 0; color: #666">
        拥有5年前端开发经验，擅长Vue.js、React等前端技术栈。
      </p>
    </lb-card>

    <!-- 统计卡片 -->
    <lb-card header="数据统计" shadow="always" :radius="12">
      <div
        style="display: flex; justify-content: space-around; text-align: center"
      >
        <div>
          <div style="font-size: 24px; font-weight: bold; color: #409eff">
            1,234
          </div>
          <div style="font-size: 14px; color: #666">总用户数</div>
        </div>
        <div>
          <div style="font-size: 24px; font-weight: bold; color: #67c23a">
            567
          </div>
          <div style="font-size: 14px; color: #666">活跃用户</div>
        </div>
        <div>
          <div style="font-size: 24px; font-weight: bold; color: #e6a23c">
            89%
          </div>
          <div style="font-size: 14px; color: #666">满意度</div>
        </div>
      </div>
    </lb-card>

    <!-- 设置卡片 -->
    <lb-card header="系统设置">
      <div style="margin-bottom: 16px">
        <label style="display: block; margin-bottom: 8px; font-weight: 500"
          >通知设置</label
        >
        <div style="display: flex; align-items: center; margin-bottom: 8px">
          <input type="checkbox" id="email" style="margin-right: 8px" />
          <label for="email" style="margin: 0">邮件通知</label>
        </div>
        <div style="display: flex; align-items: center">
          <input type="checkbox" id="sms" style="margin-right: 8px" />
          <label for="sms" style="margin: 0">短信通知</label>
        </div>
      </div>
      <template #footer>
        <div
          style="text-align: right; display: flex; justify-content: flex-end"
        >
          <lb-button size="small" style="margin-right: 8px">重置</lb-button>
          <lb-button size="small" type="primary">保存</lb-button>
        </div>
      </template>
    </lb-card>
  </div>
</template>

<script setup>
const handleProductClick = () => {
  console.log("产品卡片被点击");
};
</script>

API ​

Props ​

属性名类型默认值说明
headerstring—卡片标题，会显示在头部区域
subtitlestring—卡片副标题，显示在标题下方
showHeaderbooleantrue是否显示头部区域，包括header插槽
borderedbooleantrue是否显示边框
shadow'always' | 'hover' | 'never''always'阴影效果：always(始终显示)、hover(悬停显示)、never(不显示)
widthstring | number—卡片宽度，数字单位为px
heightstring | number—卡片高度，数字单位为px
headerClassstring—头部区域的自定义CSS类名
bodyClassstring—内容区域的自定义CSS类名
disabledbooleanfalse是否禁用，禁用时无法交互且显示半透明效果
clickablebooleanfalse是否可点击，开启后鼠标悬停会有视觉反馈
loadingbooleanfalse是否显示加载状态，会显示加载动画遮罩
radiusstring | number'8px'卡片圆角，数字单位为px
backgroundColorstring—卡片背景色，支持任何有效的CSS颜色值
headerBackgroundColorstring—头部背景色，支持任何有效的CSS颜色值

Events ​

事件名说明回调参数
click点击卡片时触发，需要设置 clickable 为 true(event: MouseEvent)
header-click点击头部时触发，即使卡片不可点击也会触发(event: MouseEvent)

Slots ​

插槽名说明
default卡片内容，可以包含任何HTML元素或组件
header自定义头部内容，会覆盖默认的header和subtitle
footer自定义底部内容，通常用于放置操作按钮