init

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

@@ -0,0 +1,56 @@
+.nut-indicator {
+  &--block {
+    display: block;
+    width: 100%;
+  }
+
+  &--align__left {
+    text-align: left;
+  }
+
+  &--align__right {
+    text-align: right;
+  }
+
+  &--align__center {
+    text-align: center;
+  }
+
+  &--dot,
+  &--number {
+    margin: 0 4px;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &--dot {
+    display: inline-block;
+    width: $indicator-dot-size;
+    height: $indicator-dot-size;
+    vertical-align: middle;
+    background-color: $indicator-dot-color;
+    border-radius: 50%;
+  }
+
+  &--number {
+    position: relative;
+    display: inline-block;
+    width: $indicator-size;
+    height: $indicator-size;
+    font-size: $indicator-number-font-size;
+    line-height: $indicator-size;
+    color: $indicator-color;
+    text-align: center;
+    vertical-align: middle;
+    background-color: $indicator-bg-color;
+    border: 1px solid $indicator-color;
+    border-radius: 50%;
+    box-shadow: 0 0 1px 1px $indicator-bg-color;
+  }
+}

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

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

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

@@ -0,0 +1,28 @@
+import type { ExtractPropTypes } from 'vue'
+import { commonProps, makeNumberProp, makeStringProp, truthProp } from '../_utils'
+
+export const indicatorProps = {
+  ...commonProps,
+  /**
+   * @description 步骤长度
+   */
+  size: makeNumberProp(3),
+  /**
+   * @description 当前步骤
+   */
+  current: makeNumberProp(1),
+  /**
+   * @description 是否启用块级布局
+   */
+  block: Boolean,
+  /**
+   * @description 对齐方式，仅在 `block` 为 `true` 时生效, 可选值 `left`, `right`, `center`
+   */
+  align: makeStringProp<'left' | 'center' | 'right'>('left'),
+  /**
+   * @description 单数前面是否补 0
+   */
+  fillZero: truthProp,
+}
+
+export type IndicatorProps = ExtractPropTypes<typeof indicatorProps>

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed, defineComponent } from 'vue'
+import { PREFIX } from '../_constants'
+import { getMainClass, padZero } from '../_utils'
+import { indicatorProps } from './indicator'
+
+const props = defineProps(indicatorProps)
+
+const classes = computed(() => {
+  return getMainClass(props, componentName, {
+    [`${componentName}--block`]: props.block,
+    [`${componentName}--align__${props.align}`]: props.block && props.align,
+  })
+})
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-indicator`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view :class="classes" :style="customStyle">
+    <template v-for="item in size" :key="item">
+      <view v-if="item === current" :class="`${componentName}--number`">
+        {{ (fillZero && padZero(item)) || item }}
+      </view>
+      <view v-else :class="`${componentName}--dot`" />
+    </template>
+  </view>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>