更新记录

1.0.0（2026-10-08） 下载此版本

• 首个版本，实现组件基础能力，支持 Vue2 / Vue3、全平台（App / H5 / 各家小程序）。

平台兼容性

uni-app(3.97)

e-card 卡片

卡片组件，提供常见的移动端卡片样式，适合商品卡、资讯卡、用户信息卡等场景。

特性

• 四段式结构：header（标题/缩略图） → 默认插槽（内容） → footer（操作区）
• 支持五种配色主题、细边框模式
• 支持点击跳转与按压反馈
• 各段均可用插槽完全自定义

基本用法

<template>
  <view>
    <!-- 纯文本卡片 -->
    <e-card title="今日路况" content="全省高速通行正常，无拥堵路段。" />

    <!-- 带缩略图与副标题 -->
    <e-card
      title="昌九高速"
      sub-title="G70 福银高速"
      thumbnail="/static/road.jpg"
      content="当前平均车速 86 km/h，通行顺畅。"
    />

    <!-- 完整插槽用法 -->
    <e-card type="primary" clickable @click="goDetail">
      <template #header>
        <view class="head">
          <text class="head-title">事故预警</text>
        </view>
      </template>
      <text>沪昆高速 K1120 处发生追尾事故，占用行车道。</text>
      <template #footer>
        <button size="mini" @click.stop="ignore">忽略</button>
        <button size="mini" type="primary" @click.stop="handle">处理</button>
      </template>
    </e-card>
  </view>
</template>

属性

插槽

事件

使用提示

header / footer 自动隐藏

当你不传 title / thumbnail / subTitle 时，标题区不会被渲染；不传 footer 插槽时，底部区也不会出现。只有默认插槽内容时，卡片就是一块干净的内容容器。

footer 里按钮的点击冲突

footer 内如果放了按钮，建议加 .stop 修饰符阻止冒泡，否则点击按钮会同时触发卡片的 click：

<button @click.stop="handle">处理</button>

平台兼容

App (vue / nvue)、H5、全平台小程序均支持。

隐私与权限

纯前端渲染组件，不申请任何权限，不采集、不上传任何数据。