init

uni_modules/nutui-uni/components/badge/badge.ts

@@ -0,0 +1,52 @@
+import type { ExtractPropTypes } from 'vue'
+import { commonProps, makeNumberProp, makeStringProp } from '../_utils'
+
+export const badgeProps = {
+  ...commonProps,
+  /**
+   * @description 显示的内容
+   */
+  value: [String, Number],
+  /**
+   * @description `value` 为数值时，最大值
+   */
+  max: makeNumberProp(10000),
+
+  /**
+   * @description 是否为小点
+   */
+  dot: Boolean,
+
+  /**
+   * @description 是否为气泡形状
+   * @since >v4.0.0
+   */
+  bubble: Boolean,
+
+  /**
+   * @description 是否隐藏
+   */
+  hidden: Boolean,
+
+  /**
+   * @description 上下偏移量，支持单位设置，可设置为：`5px` 等
+   */
+  top: makeStringProp('0'),
+
+  /**
+   * @description 左右偏移量，支持单位设置，可设置为：`5px` 等
+   */
+  right: makeStringProp('0'),
+
+  /**
+   * @description 徽标的 `z-index` 值
+   */
+  zIndex: makeNumberProp(10),
+
+  /**
+   * @description 徽标背景颜色
+   */
+  customColor: makeStringProp(''),
+}
+
+export type BadgeProps = ExtractPropTypes<typeof badgeProps>

uni_modules/nutui-uni/components/badge/badge.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed, defineComponent } from 'vue'
+import { PREFIX } from '../_constants'
+import { getMainClass, getMainStyle, pxCheck } from '../_utils'
+import { badgeProps } from './badge'
+
+const props = defineProps(badgeProps)
+
+const getStyle = computed(() => {
+  return getMainStyle(props, {
+    top: pxCheck(props.top),
+    right: pxCheck(props.right),
+    zIndex: props.zIndex,
+    background: props.customColor,
+  })
+})
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+
+const content = computed(() => {
+  if (props.dot)
+    return
+  const value = props.value
+  const max = props.max
+  if (typeof value === 'number' && typeof max === 'number')
+    return max < value ? `${max}+` : value
+
+  return value
+})
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-badge`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view :class="classes">
+    <view v-if="!props.hidden && !props.dot && $slots.icon" class="nut-badge__icon" :style="getStyle">
+      <slot name="icon" />
+    </view>
+    <slot />
+    <view
+      v-if="!props.hidden && (content || props.dot)"
+      class="nut-badge__content nut-badge__content--sup"
+      :class="{ 'nut-badge__content--dot': props.dot, 'nut-badge__content--bubble': !props.dot && props.bubble }"
+      :style="getStyle"
+    >
+      {{ content }}
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>

uni_modules/nutui-uni/components/badge/index.scss

@@ -0,0 +1,54 @@
+.nut-theme-dark {
+  .nut-badge {
+    &.show {
+      color: $dark-color;
+      background: $dark-background;
+    }
+  }
+}
+
+.nut-badge {
+  position: relative;
+  display: inline-block;
+
+  .nut-badge__icon {
+    position: absolute;
+    z-index: $badge-z-index;
+    display: flex;
+    align-items: center;
+    padding: $badge-icon-padding;
+    line-height: normal;
+    text-align: center;
+    background: $badge-background-color;
+    border-radius: $badge-border-radius;
+    transform: $badge-content-transform;
+  }
+
+  .nut-badge__content {
+    display: flex;
+    align-items: center;
+    transform: $badge-content-transform;
+
+    &--sup {
+      position: absolute;
+      padding: $badge-padding;
+      font-size: $badge-font-size;
+      font-weight: normal;
+      color: $badge-color;
+      text-align: center;
+      background: $badge-background-color;
+      border-radius: $badge-border-radius;
+    }
+
+    &--dot {
+      width: $badge-dot-width;
+      height: $badge-dot-height;
+      padding: $badge-dot-padding;
+      border-radius: $badge-dot-border-radius;
+    }
+
+    &--bubble {
+      border-bottom-left-radius: 0;
+    }
+  }
+}

uni_modules/nutui-uni/components/badge/index.ts

@@ -0,0 +1 @@
+export * from './badge'