BannerImageCard 图文横幅

BannerImageCard 图文横幅 的基础用法、公开 API 与示例。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref, } from "vue";
import { BannerImageCard } from "@/components/card/banner-image-card";

const demoProps = { title: "材料资产", description: "业务入口卡片" };
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <BannerImageCard v-bind="demoProps"></BannerImageCard>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { BannerImageCard } from "@/components/card/banner-image-card";

Props

参数	说明	类型	默认值	必填
height	高度	string	"24rem"	否
image	图片路径	string	defaultIcon	否
title	标题文本	string	""	否
description	描述文本	string	""	否
button	主按钮配置	{<br> /** 是否显示 */<br> show?: boolean;<br> /** 按钮文本 */<br> text?: string;<br> /** 背景颜色 */<br> color?: string;<br> /** 文字颜色 */<br> textColor?: string;<br> }	{ show: true, text: "查看详情", color: useNamespace().cssVar("color-primary"), textColor: "#fff", }	否
cancelButton	取消按钮配置	{<br> /** 是否显示 */<br> show?: boolean;<br> /** 按钮文本 */<br> text?: string;<br> /** 背景颜色 */<br> color?: string;<br> /** 文字颜色 */<br> textColor?: string;<br> }	{ show: false, text: "取消", color: "#f5f5f5", textColor: "#666", }	否

Events

事件名	说明	回调参数
click	主按钮点击事件。	-
cancel	取消按钮点击事件。	-

Slots

插槽名	说明	参数
-	该组件未声明 Slots。	-

Expose

名称	说明	类型
-	该组件未声明 Expose。	-

Module API

名称	说明	类型
BannerImageCard	导出 BannerImageCard 供业务侧复用。	useInstall(index)

Types

CardBannerProps

横幅图标卡片属性。

字段	说明	类型	默认值	必填
height	高度	string	-	否
image	图片路径	string	-	否
title	标题文本	string	-	否
description	描述文本	string	-	否
button	主按钮配置	{<br> /** 是否显示 */<br> show?: boolean;<br> /** 按钮文本 */<br> text?: string;<br> /** 背景颜色 */<br> color?: string;<br> /** 文字颜色 */<br> textColor?: string;<br> }	-	否
cancelButton	取消按钮配置	{<br> /** 是否显示 */<br> show?: boolean;<br> /** 按钮文本 */<br> text?: string;<br> /** 背景颜色 */<br> color?: string;<br> /** 文字颜色 */<br> textColor?: string;<br> }	-	否

BannerImageCardEmits

横幅图标卡片事件。

字段	说明	类型	默认值	必填
click	主按钮点击事件。	[]	-	是
cancel	取消按钮点击事件。	[]	-	是

API 根据当前组件源码生成；同步版本与验证记录见维护说明。