引入组件

局部引入

// parent.vue
const FBadge = defineAsyncComponent(() => import('@/components/formaui/f-badge/f-badge.vue'))

基础用法

type属性：徽章类型（默认primary）

例：primary、success、warning、danger、white、whitePrimary、whiteSuccess、whiteWarning、whiteDanger、gray、black

<f-badge type="primary">primary</f-badge>
<f-badge type="success">success</f-badge>
<f-badge type="warning">warning</f-badge>
<f-badge type="danger">danger</f-badge>
<f-badge type="whitePrimary">whitePrimary</f-badge>
<f-badge type="whiteSuccess">whiteSuccess</f-badge>
<f-badge type="whiteWarning">whiteWarning</f-badge>
<f-badge type="whiteDanger">whiteDanger</f-badge>
<f-badge type="gray">gray</f-badge>
<f-badge type="black">black</f-badge>

isDot属性：是否为圆点

<f-badge is-dot is-absolute />

bgColor、textColor：自定义颜色

<f-badge bg-color="#000" text-color="#fff">自定义背景色</f-badge>

插槽

名称	说明
default	显示内容

属性

名称	类型	说明	默认值
type	string	样式类型，可传入[primary、success、warning、danger、white、whitePrimary、whiteSuccess、whiteWarning、whiteDanger、gray、black]	primary
isDot	boolean	是否为圆点	false
margin	string	徽章外边距	0
isAbsolute	boolean	是否绝对定位	false
top	string	绝对定位时 top	-8rpx
right	string	绝对定位时 right	0
scaleRatio	number	缩放比例	1
translateX	string	水平偏移量	0
bgColor	string	自定义背景色	-
textColor	string	自定义文字颜色	-

事件

事件名	说明	回调参数
click	点击事件	-