uView Pro X

简体中文

English

简体中文

English

主题

Card 卡片 ​

17:06

说明 ​

把头部、主体与底部组织成一张风格统一的卡片：头部由 title / sub-title 与可选 thumb 缩略图构成，主体与底部由默认插槽及 body / foot 插槽填充，传入 head 插槽则整体替换默认头部。支持圆角、外围阴影与边框。

兼容性 ​

平台支持情况
App✅ 支持
H5✅ 支持
微信小程序✅ 支持

示例 ​

基础用法 ​

通过 title / sub-title 配置头部标题与副标题，默认插槽填充主体内容。

查看源码
vue
<template>
    <ux-card title="卡片标题" sub-title="副标题" @click="onClick">
        <text class="body-text">卡片内容区域，支持自定义主体插槽，头部可配置标题与副标题。</text>
    </ux-card>
</template>

<script setup lang="uts">
const onClick = (index: string | number) => {
    console.log('card click:', index);
};
</script>

<style scoped>
.body-text {
    font-size: 13px;
    color: #909399;
    line-height: 20px;
}
</style>

缩略图 thumb ​

通过 thumb 在标题左侧显示缩略图，thumb-circle 控制是否为圆形。

查看源码
vue
<template>
    <ux-card
        title="带缩略图"
        sub-title="圆角头像"
        thumb="https://ik.imagekit.io/anyup/uview-pro/common/logo-new.png"
        :thumb-circle="true"
    >
        <text class="body-text">通过 thumb 属性在标题左侧显示缩略图。</text>
    </ux-card>
</template>

<style scoped>
.body-text {
    font-size: 13px;
    color: #909399;
    line-height: 20px;
}
</style>

自定义插槽 ​

通过 head / foot 插槽自定义头部与底部，默认插槽填充主体，组合出图文信息流卡片。

查看源码
vue
<template>
    <ux-card :border-radius="14" box-shadow="0 2px 12px rgba(0, 0, 0, 0.06)">
        <template #head>
            <view class="feed-head">
                <text class="feed-title">设计分享圈</text>
                <text class="feed-follow">+ 关注</text>
            </view>
        </template>
        <view class="feed-author">
            <image class="feed-avatar" src="https://picsum.photos/seed/card-avatar/72/72" mode="aspectFill" />
            <view class="feed-meta">
                <text class="feed-name">uView 设计</text>
                <text class="feed-time">3分钟前</text>
            </view>
        </view>
        <text class="feed-content">今晚分享一套新的配色方案，主打暖橙渐变，适合电商促销场景……</text>
        <image class="feed-image" src="https://picsum.photos/seed/card-post/600/360" mode="widthFix" />
        <template #foot>
            <view class="feed-actions">
                <text class="feed-action">点赞 128</text>
                <text class="feed-action">评论 32</text>
                <text class="feed-action">转发 12</text>
            </view>
        </template>
    </ux-card>
</template>

<style scoped>
.feed-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.feed-title {
    font-size: 15px;
    font-weight: bold;
    color: #303133;
}
.feed-follow {
    font-size: 13px;
    color: #2979ff;
}
.feed-author {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
}
.feed-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 10px;
}
.feed-meta {
    display: flex;
    flex-direction: column;
}
.feed-name {
    font-size: 14px;
    color: #303133;
    font-weight: bold;
}
.feed-time {
    font-size: 12px;
    color: #909399;
    margin-top: 2px;
}
.feed-content {
    font-size: 14px;
    color: #606266;
    line-height: 21px;
    margin-bottom: 12px;
}
.feed-image {
    width: 100%;
    border-radius: 8px;
}
.feed-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.feed-action {
    font-size: 13px;
    color: #909399;
    margin-right: 28px;
}
</style>

阴影 box-shadow ​

通过 box-shadow 为卡片添加外围阴影，字符串形式。

查看源码
vue
<template>
    <ux-card title="数据概览" box-shadow="0 6px 18px rgba(0, 0, 0, 0.08)" :border-radius="12">
        <view class="stats">
            <view class="stat">
                <text class="stat-num">128</text>
                <text class="stat-label">今日访问</text>
            </view>
            <view class="stat-divider" />
            <view class="stat">
                <text class="stat-num">3.2w</text>
                <text class="stat-label">累计订单</text>
            </view>
            <view class="stat-divider" />
            <view class="stat">
                <text class="stat-num">209</text>
                <text class="stat-label">会员数</text>
            </view>
        </view>
    </ux-card>
</template>

<style scoped>
.stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px 0 2px;
}
.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}
.stat-num {
    font-size: 20px;
    font-weight: bold;
    color: #303133;
}
.stat-label {
    font-size: 12px;
    color: #909399;
    margin-top: 4px;
}
.stat-divider {
    width: 1px;
    height: 30px;
    background-color: #e4e7ed;
}
</style>

圆角 border-radius ​

通过 border-radius 设置卡片整体的圆角值，单位 px。

查看源码
vue
<template>
    <ux-card title="自定义圆角" :border-radius="15">
        <text class="body-text">通过 border-radius 属性调整卡片圆角，0 为直角。</text>
    </ux-card>
</template>

<style scoped>
.body-text {
    font-size: 13px;
    color: #909399;
    line-height: 20px;
}
</style>

边框 border ​

通过 border 控制是否显示卡片外部边框。

查看源码
vue
<template>
    <ux-card title="显示边框" sub-title="带边框" :border="true">
        <text class="body-text">通过 border 属性显示卡片外部边框。</text>
    </ux-card>
</template>

<style scoped>
.body-text {
    font-size: 13px;
    color: #909399;
    line-height: 20px;
}
</style>

全屏无间距 full ​

full=true 时卡片与屏幕两侧不留空隙，左右边距为 0。

查看源码
vue
<template>
    <ux-card title="全屏卡片" sub-title="无间距" :full="true" :border="true">
        <text class="body-text">full=true 时卡片与屏幕两侧不留空隙。</text>
    </ux-card>
</template>

<style scoped>
.body-text {
    font-size: 13px;
    color: #909399;
    line-height: 20px;
}
</style>

API ​

Props ​

属性说明类型默认值版本
customStyle自定义根节点样式UTSJSONObject--
customClass自定义根节点样式类string''-
full与屏幕两侧是否留空隙booleanfalse-
title头部左边的标题string''-
titleColor标题颜色string''-
titleSize标题字体大小，单位pxstring | number'15'-
subTitle头部右边的副标题string''-
subTitleColor副标题颜色string''-
subTitleSize副标题字体大小，单位pxstring | number'13'-
border是否显示外部边框booleanfalse-
index用于标识点击了第几个卡片CardIndex''-
boxShadow卡片外围阴影，字符串形式string'none'-
margin卡片与上下左右元素的间距，需带单位string'15px'-
borderRadius卡片整体的圆角值，单位pxstring | number'8'-
headStyle头部自定义样式UTSJSONObject--
bodyStyle主体自定义样式UTSJSONObject--
footStyle底部自定义样式UTSJSONObject--
headBorderBottom头部是否显示下边框booleantrue-
footBorderTop底部是否显示上边框booleantrue-
showHead是否显示头部booleantrue-
showFoot是否显示尾部booleantrue-
thumb标题左边缩略图路径string''-
thumbWidth缩略图宽度和高度，单位pxstring | number'30'-
thumbCircle缩略图是否为圆形booleanfalse-
padding头部/主体/底部的内边距，单位pxstring | number'15'-

Events ​

事件名说明回调参数版本
click整个卡片任意位置被点击时触发index: CardIndex-
head-click卡片头部被点击时触发index: CardIndex-
body-click卡片主体部分被点击时触发index: CardIndex-
foot-click卡片底部部分被点击时触发index: CardIndex-

Slots ​

插槽名说明版本
head自定义头部内容；传入后整体替换由 title / sub-title / thumb 组成的默认头部-
default卡片主体内容-
body附加到主体区域的内容，渲染在默认插槽之后-
foot自定义底部内容-

注意事项 ​

  1. 传入 head 插槽后，由 title / sub-title / thumb 组成的默认头部不再渲染，二者不会叠加。
  2. 头部与底部由 show-head / show-foot 控制显隐，主体区域始终渲染；show-foot 为 true 但未传 foot 插槽时，底部为空且内边距为 0。
  3. full=true 时组件用内联样式强制 margin: 0 并让卡片宽度占满父级，此时 margin 属性不再生效。
  4. head-border-bottom / foot-border-top 分别控制头部下边框与底部上边框，默认均为 true。
  5. 头部标题超长时限宽 200px 并以省略号截断；sub-title 与标题在同一行两端对齐。
  6. 除 click 外，源码还提供 head-click / body-click / foot-click，分别在头部、主体、底部被点击时触发（回调同为 index）。
Copyright © 2026 uView Pro X | 鲁ICP备2021040594号-5