QinUi

# Badge 徽标数

图标右上角的圆形徽标数字。

# 基础用法

<template>
  <div>
    <qinui-badge text="1" />
    <qinui-badge text="2" type="primary" />
    <qinui-badge text="34" type="success" />
    <qinui-badge text="45" type="warning" />
    <qinui-badge text="123" type="info" />
  </div>
</template>

# 无底色

<template>
  <div>
    <qinui-badge :inverted="true" text="1" />
    <qinui-badge :inverted="true" text="2" type="primary" />
    <qinui-badge :inverted="true" text="34" type="success" />
    <qinui-badge :inverted="true" text="45" type="warning" />
    <qinui-badge :inverted="true" text="123" type="info" />
  </div>
</template>

# 自定义样式

<template>
  <div>
    <qinui-badge
      text="2"
      type="primary"
      diy-style="background:#4335d6"
    />
    <qinui-badge text="2" type="primary" :diy-style="theCustomStyle" />
  </div>
</template>

<script setup lang="ts">
  import { shallowRef } from 'vue';
  const theCustomStyle = shallowRef('backgroundColor: #62ed0d;color: #00f');
</script>

# 定位: placement 属性

<template>
  <qinui-badge :text="theValue" placement="rightTop" size="small">
    <view class="box"><text class="box-text">右上</text></view>
  </qinui-badge>
</template>

# 偏移: offset 属性(存在 placement)

<template>
  <div>
    <qinui-badge
      :text="8"
      placement="rightTop"
      :offset="[-3, -3]"
      size="small"
    >
      <view class="box"><text class="box-text">右上</text></view>
    </qinui-badge>
  </div>
</template>

# 圆点

添加 :is-dot="true"

<template>
  <qinui-badge
    :is-dot="true"
    :text="theValue"
    placement="rightTop"
    size="small"
  >
    <view class="box"
      ><text class="box-text">仅显示点: is-dot 属性</text></view
    >
  </qinui-badge>
</template>

# API

# Props

参数 说明 类型 默认值 可选值
text 展示的数字，大于 maxlength 时显示为 ${maxlength}+；为0且show-zero为false时隐藏 String | Number - -
isDot 不展示数字，只有一个小点 Boolean false true | false
maxlength 最大值，超过最大值会显示 '{maxlength}+' String | Number 99 -
type 主题类型 String primary error | warning | success | primary | info
inverted 是否反转背景和字体颜色 Boolean false true | false
placement 组件是否绝对定位，为true时，offset参数才有效 String false rightTop|rightBottom|leftBottom|leftTop
offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效 Array - -
diy-style 自定义外部样式 string - -

← Calendar 日历 →