BannerCard 横幅卡片

BannerCard 横幅卡片 的基础用法、公开 API 与示例。

基础示例

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

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

const demoProps = { title: "IDX Web", subtitle: "组件文档", buttonConfig: { show: true, text: "查看" } };
</script>

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

隐藏源代码

引入方式

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

Props

参数	说明	类型	默认值	必填
height	横幅高度，默认 11rem	string	"11rem"	否
title	标题文本	string	""	否
subtitle	副标题文本	string	""	否
titleColor	标题颜色，默认 #ffffff	string	"#ffffff"	否
subtitleColor	副标题颜色，默认 #ffffff	string	"#ffffff"	否
backgroundColor	背景颜色，默认 var("el-color-primary-light-3")	string	useNamespace().cssVarEl("color-primary-light-3")	否
backgroundImage	整个卡片的背景图片	string	""	否
decoration	是否显示装饰效果，默认 true	boolean	true	否
buttonConfig	按钮配置	ButtonConfig	{ show: true, text: "查看", color: "#ffffff", textColor: "#333", radius: "6px", }	否
meteorConfig	流星配置	MeteorConfig	{ enabled: false, count: 10 }	否
imageConfig	图片配置	ImageConfig	{ src: "", width: "12rem", bottom: "-3rem", right: "0" }	否

Events

事件名	说明	回调参数
click	整体点击事件。	-
buttonClick	按钮点击事件。	-

Slots

插槽名	说明	参数
title	标题内容插槽。	-
subtitle	subtitle 内容插槽。	-
button	button 内容插槽。	-
default	默认内容插槽。	-

Expose

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

Module API

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

Types

BannerCardProps

横幅卡片组件属性。

字段	说明	类型	默认值	必填
height	横幅高度，默认 11rem	string	-	否
title	标题文本	string	-	否
subtitle	副标题文本	string	-	否
titleColor	标题颜色，默认 #ffffff	string	-	否
subtitleColor	副标题颜色，默认 #ffffff	string	-	否
backgroundColor	背景颜色，默认 var("el-color-primary-light-3")	string	-	否
backgroundImage	整个卡片的背景图片	string	-	否
decoration	是否显示装饰效果，默认 true	boolean	-	否
buttonConfig	按钮配置	ButtonConfig	-	否
meteorConfig	流星配置	MeteorConfig	-	否
imageConfig	图片配置	ImageConfig	-	否

ButtonConfig

横幅卡片按钮配置。

字段	说明	类型	默认值	必填
show	是否启用按钮	boolean	-	是
text	按钮文本	string	-	是
color	按钮背景色	string	-	否
textColor	按钮文字颜色	string	-	否
radius	按钮圆角大小	string	-	否

MeteorConfig

横幅卡片流星效果配置。

字段	说明	类型	默认值	必填
enabled	是否启用流星效果	boolean	-	是
count	流星数量	number	-	否

ImageConfig

横幅卡片背景图片配置。

字段	说明	类型	默认值	必填
src	图片源地址	string	-	是
width	图片宽度	string	-	否
bottom	距底部距离	string	-	否
right	距右侧距离	string	-	否

BannerCardEmits

横幅卡片组件事件。

字段	说明	类型	默认值	必填
click	整体点击事件。	[]	-	是
buttonClick	按钮点击事件。	[]	-	是

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