init

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

@@ -0,0 +1,8 @@
+.nut-steps {
+  display: flex;
+}
+
+.nut-steps-vertical {
+  flex-flow: column;
+  height: 100%;
+}

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

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

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

@@ -0,0 +1,26 @@
+import type { ExtractPropTypes } from 'vue'
+import { commonProps, isNumber, makeNumericProp, makeStringProp } from '../_utils'
+
+export const stepsProps = {
+  ...commonProps,
+  /**
+   * @description 显示方向，`horizontal`,`vertical`
+   */
+  direction: makeStringProp<'horizontal' | 'vertical'>('horizontal'),
+  /**
+   * @description 当前所在的步骤
+   */
+  current: makeNumericProp(0),
+  /**
+   * @description 点状步骤条
+   */
+  progressDot: Boolean,
+}
+
+export type StepsProps = ExtractPropTypes<typeof stepsProps>
+
+export const stepsEmits = {
+  clickStep: (val: number) => isNumber(val),
+}
+
+export type StepsEmits = typeof stepsEmits

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { ComponentInternalInstance } from 'vue'
+import { computed, defineComponent, provide, reactive } from 'vue'
+import { PREFIX } from '../_constants'
+import { getMainClass } from '../_utils'
+import { stepsEmits, stepsProps } from './steps'
+
+const props = defineProps(stepsProps)
+const emit = defineEmits(stepsEmits)
+
+const state = reactive({
+  children: [] as ComponentInternalInstance[],
+})
+
+const classes = computed(() => {
+  return getMainClass(props, componentName, {
+    [`${componentName}-${props.direction}`]: true,
+    [`${componentName}-dot`]: !!props.progressDot,
+  })
+})
+
+function relation(child: ComponentInternalInstance) {
+  child && state.children.push(child as any)
+}
+
+function onEmit(index: number) {
+  emit('clickStep', index)
+}
+
+provide('parent', {
+  relation,
+  state,
+  props,
+  onEmit,
+})
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-steps`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view :class="classes" :style="customStyle">
+    <slot />
+  </view>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>