push

lib/component/form/steps/index.ts

@@ -0,0 +1,4 @@
+import nsSteps from './steps.vue';
+import { withInstall } from '/nerv-lib/util';
+
+export const NsSteps = withInstall(nsSteps);

lib/component/form/steps/steps.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <a-steps :current="current">
+      <a-step v-for="(step, i) of stepList" :title="step.label" />
+    </a-steps>
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    name: 'NsSteps',
+    props: {
+      current: {
+        type: Number,
+        default: 0,
+      },
+      stepList: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    setup() {},
+  });
+</script>
+<style scoped>
+  :deep(.ant-steps-item-icon) {
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+  }
+  :deep(.ant-steps-item-title) {
+    line-height: 24px;
+  }
+  :deep(.ant-steps-item-title::after) {
+    position: absolute;
+    top: 12px;
+    left: 100%;
+    display: block;
+    width: 150px;
+    height: 1px;
+    background: #f0f0f0;
+    content: '';
+    max-width: 200px;
+    min-width: 32px;
+  }
+  :deep(.ant-steps) {
+    margin: 0 !important;
+    justify-content: center;
+  }
+  :deep(.ant-steps-item) {
+    flex: none;
+    flex-shrink: 1;
+    margin-right: 0px !important;
+    width: 200px;
+  }
+  :deep(.ant-steps-item-container) {
+  }
+</style>