看板

2026-03-25 14:54:15 +08:00
commit ab4646b43a
827 changed files with 123812 additions and 0 deletions
@@ -0,0 +1,31 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { StepDirection, StepMode, StepsListItem, ThemeType } from '../../types/global';
+import { baseProps } from '../common/props';
+import { getColor } from '../../';
+
+/**
+ * StepsProps 步骤条 props 类型定义
+ * @description 步骤条，支持横向/竖向、主题色、激活色等
+ */
+
+export const StepsProps = {
+    ...baseProps,
+    /** 步骤条的类型，dot|number */
+    mode: { type: String as PropType<StepMode>, default: 'dot' },
+    /** 步骤条的数据 */
+    list: { type: Array as PropType<StepsListItem[]>, default: () => [] },
+    /** 主题类型, primary|success|info|warning|error */
+    type: { type: String as PropType<ThemeType>, default: 'primary' },
+    /** 当前哪一步是激活的 */
+    current: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 激活步骤的颜色 */
+    activeColor: { type: String, default: () => getColor('primary') },
+    /** 未激活的颜色 */
+    unActiveColor: { type: String, default: () => getColor('info') },
+    /** 自定义图标 */
+    icon: { type: String, default: 'checkmark' },
+    /** step的排列方向，row-横向，column-竖向 */
+    direction: { type: String as PropType<StepDirection>, default: 'row' }
+};
+
+export type StepsProps = ExtractPropTypes<typeof StepsProps>;
@@ -0,0 +1,92 @@
+<template>
+    <view>
+        <view class="u-steps" :class="customClass" :style="$u.toStyle(directionStyle, customStyle)">
+            <slot>
+                <u-step
+                    :name="item.name"
+                    :desc="item.desc"
+                    :icon="item.icon"
+                    v-for="(item, index) in list"
+                    :key="index"
+                ></u-step>
+            </slot>
+            <!-- <view
+                class="u-steps__item"
+                :class="['u-steps__item--' + direction]"
+                v-for="(item, index) in list"
+                :key="index"
+            >
+                <view class="u-steps__item__num" v-if="mode == 'number'" :style="numberStyle(index)">
+                    <text v-if="currentIndex < index" :style="textStyle(index)">
+                        {{ index + 1 }}
+                    </text>
+                    <u-icon v-else size="22" color="var(--u-white-color)" :name="icon"></u-icon>
+                </view>
+                <view class="u-steps__item__dot" v-if="mode == 'dot'" :style="dotStyle(index)"></view>
+                <text class="u-line-1" :style="textStyle(index)" :class="['u-steps__item__text--' + direction]">
+                    {{ item.name }}
+                </text>
+                <view
+                    class="u-steps__item__line"
+                    :class="['u-steps__item__line--' + mode]"
+                    v-if="index < list.length - 1"
+                >
+                    <u-line :direction="direction" length="100%" :hair-line="false" :color="unActiveColor"></u-line>
+                </view>
+            </view> -->
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-steps',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { computed, getCurrentInstance } from 'vue';
+import { StepsProps } from './types';
+import { $u, useParent } from '../..';
+
+/**
+ * steps 步骤条
+ * @description 该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
+ * @tutorial https://uviewpro.cn/zh/components/steps.html
+ * @property {String} mode 设置模式（默认dot）
+ * @property {Array<{name: string}>} list 数轴条数据，数组。具体见上方示例
+ * @property {String} type type主题（默认primary）
+ * @property {String} direction row-横向，column-竖向（默认row）
+ * @property {Number|String} current 设置当前处于第几步
+ * @property {String} activeColor 已完成步骤的激活颜色，如设置，type值会失效
+ * @property {String} unActiveColor 未激活的颜色，用于表示未完成步骤的颜色（默认var(--u-content-color)）
+ * @property {String} icon 自定义图标
+ * @example <u-steps :list="numList" active-color="var(--u-type-error)"></u-steps>
+ */
+
+const props = defineProps(StepsProps);
+
+const { children } = useParent('u-steps');
+// 计算方向样式
+const directionStyle = computed(() => ({ flexDirection: props.direction as 'row' | 'column' }));
+
+defineExpose({
+    props,
+    childLen: () => children.length
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-steps {
+    @include vue-flex;
+}
+</style>