wk-view

Appearance

On this page

wkv-badge ​

徽标，数字徽标/圆点徽标。

用法 ​

html
<wkv-badge :value="9"></wkv-badge>

Props ​

属性名类型默认值说明
typeStringnumber徽标类型，可选 number dot
valueNumber0数字徽标的值
maxValueNumber99数字徽标的最大值，超过此值会展示为 ···
zeroVisibleBooleanfalse数字徽标的值为 0 时是否展示徽标

示例 ​

vue
<template>
	<view class="wkv-badge-example">
		<wk-section>数字：</wk-section>
		<wkv-badge type="number" :value="0" zero-visible></wkv-badge>
		<wkv-badge type="number" :value="1"></wkv-badge>
		<wkv-badge type="number" :value="9"></wkv-badge>
		<wkv-badge type="number" :value="99"></wkv-badge>
		<wkv-badge type="number" :value="999" :max-value="99"></wkv-badge>
		<wk-section>圆点：</wk-section>
		<wkv-badge type="dot"></wkv-badge>
	</view>
</template>
vue
<script setup lang="ts"></script>
scss
<style lang="scss">
.wkv-badge-example {
    padding: 20px;

    .wkv-badge {
        margin-right: 10px;
    }
}
</style>