1.步骤条样式优化

2.添加简洁版步骤条（属性：simple） 3.添加点击切换时间监听（属性：onChange）方法
2022-01-05 16:51:08 +08:00
parent d3e57feb5d
commit 44a74fc8e5
5 changed files with 317 additions and 60 deletions
--- a/src/module/step/index.less
+++ b/src/module/step/index.less
@@ -1,11 +1,16 @@
-@width-height-pace: 20px;
-@step-color: #5FB878;
+@width-height-pace: 24px;
+@step-color: @step-success-color;
+@step-fail-color: #FF5722;
+@step-primary-color: #1E9FFF;
+@step-warning-color: #FFB800;
+@step-success-color: #5FB878;

 .lay-step{
  display: flex;
  flex-wrap: nowrap;
  .lay-step-item{
    flex-grow: 1;
+    position: relative;
  }

  .is-item-center{
@@ -16,9 +21,10 @@
    flex-grow: 0 !important;
  }
  .lay-step-item-pace{
+    cursor: pointer;
    width: @width-height-pace;
    height: @width-height-pace;
-    border: 2px #8D8D8D solid;
+    border: 1px #8D8D8D solid;
    border-radius: 50%;
    text-align: center;
    line-height: @width-height-pace;
@@ -28,69 +34,88 @@
    margin: 0 auto;
  }
  .lay-step-item-active{
-    border: 2px @step-color solid;
-    color: #FFFFFF;
-    background: @step-color;
+    border: 1px @step-color solid;
+    color: @step-color;
  }
+
  .lay-step-item-wait{
-    border: 2px #000000 solid;
+    border: 1px #000000 solid;
    color: #000000;
  }

  .lay-step-item--success {
-    border: 2px @step-color solid;
+    border: 1px @step-color solid;
    color: #FFFFFF;
    background: @step-color;
  }

  .lay-step-item--fail{
-    border: 2px #FF5722 solid;
+    border: 1px @step-fail-color solid;
    color: #FFFFFF;
-    background: #FF5722;
+    background: @step-fail-color;
  }

  .lay-step-item--warning{
-    border: 2px #FFB800 solid;
+    border: 1px @step-warning-color solid;
    color: #FFFFFF;
-    background: #FFB800;
+    background: @step-warning-color;
  }
  .lay-step-item--primary{
-    border: 2px #1E9FFF solid;
+    border: 1px @step-primary-color solid;
    color: #FFFFFF;
-    background: #1E9FFF;
+    background: @step-primary-color;
  }

  .lay-step-item-success {
-    border: 2px @step-color solid;
+    border: 1px @step-color solid;
    color: #FFFFFF;
    background: @step-color;
  }

  .lay-step-item-fail{
-    border: 2px #FF5722 solid;
+    border: 1px @step-fail-color solid;
    color: #FFFFFF;
-    background: #FF5722;
+    background: @step-fail-color;
  }

  .lay-step-item-warning{
-    border: 2px #FFB800 solid;
+    border: 1px @step-warning-color solid;
    color: #FFFFFF;
-    background: #FFB800;
+    background: @step-warning-color;
  }
  .lay-step-item-primary{
-    border: 2px #1E9FFF solid;
+    border: 1px @step-primary-color solid;
    color: #FFFFFF;
-    background: #1E9FFF;
+    background: @step-primary-color;
  }

  .lay-step-item-content{
    color: #8D8D8D;
+    cursor: pointer;
    .lay-step-item-content-title{
      font-weight: bold;
      font-size: 16px;
    }
  }

+  .lay-step-item-content-row {
+    color: #8D8D8D;
+    position: absolute;
+    top: 5px;
+    left: 24px;
+    width: calc( 100% - 26px );
+    .lay-step-item-content-title{
+      word-wrap:break-word;
+      max-width: calc(100% - 8px);
+      font-weight: bold;
+      display: inline-block;
+      margin-left: 2px;
+      background: #ffffff;
+      padding: 0 8px;
+      font-size: 16px;
+    }
+  }
+
  .lay-step-item-content-active{
    color: @step-color;
  }
@@ -99,13 +124,13 @@
    color: @step-color;
  }
  .lay-step-item-content--fail{
-    color: #FF5722;
+    color: @step-fail-color;
  }
  .lay-step-item-content--warning{
-    color: #FFB800;
+    color: @step-warning-color;
  }
  .lay-step-item-content--primary{
-    color: #1E9FFF;
+    color: @step-primary-color;
  }

  .lay-step-item-content-wait{
@@ -115,13 +140,13 @@
    color: @step-color;
  }
  .lay-step-item-content-fail{
-    color: #FF5722;
+    color: @step-fail-color;
  }
  .lay-step-item-content-warning{
-    color: #FFB800;
+    color: @step-warning-color;
  }
  .lay-step-item-content-primary{
-    color: #1E9FFF;
+    color: @step-primary-color;
  }


@@ -134,9 +159,9 @@
    content: "";
    position: absolute;
    top: 50%;
-    transform: translateY(-50%);
+    // transform: translateY(-50%);
    display: block;
-    height: 2px;
+    height: 1px;
    width: 100%;
    background: #C9C5C5;
  }
@@ -146,22 +171,99 @@

  .lay-step-item-line-active:before {
    transition: background 150ms;
-    background: #5FB878 !important;
+    background: @step-success-color !important;
  }

  .lay-step-item-line-fail:before {
    transition: background 150ms;
-    background: #FF5722 !important;
+    background: @step-fail-color !important;
  }

  .lay-step-item-line-warning:before {
    transition: background 150ms;
-    background: #FFB800 !important;
+    background: @step-warning-color !important;
  }

  .lay-step-item-line-primary:before {
    transition: background 150ms;
-    background: #1E9FFF !important;
+    background: @step-primary-color !important;
+  }
+
+  .lay-step-simple{
+    height: 30px;
+    padding: 0 8px;
+    line-height: 30px;
+    color: #ffffff;
+    background-color: #cecece;
+    cursor: pointer;
+  }
+  .lay-step-item-simple{
+    padding: 0 18px;
+  }
+  .lay-step-item-simple:after{
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: auto;
+    bottom: auto;
+    border: 15px solid;
+    border-color: transparent transparent transparent #cecece;
+    background-color: transparent;
+    border-radius: 0;
+    display: block;
+    height: auto;
+    width: auto;
+  }
+  .lay-step-item-simple:before{
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: auto;
+    bottom: auto;
+    border: 15px solid;
+    border-color: transparent transparent transparent #cecece;
+    background-color: transparent;
+    border-radius: 0;
+    display: block;
+    height: auto;
+    width: auto;
+  }
+  .lay-step-item-simple-border:before{
+    left: 1px;
+    border-color: transparent transparent transparent #ffffff;
+  }
+
+  .lay-step-item-simple-active {
+    background-color: #9fd4ae;
+  }
+  .lay-step-item-simple-success {
+    background-color: @step-color;
+  }
+  .lay-step-item-simple-fail {
+    background-color: @step-fail-color;
+  }
+  .lay-step-item-simple-warning {
+    background-color: @step-warning-color;
+  }
+  .lay-step-item-simple-primary {
+    background-color: @step-primary-color;
+  }
+  .lay-step-item-simple-active-border:after{
+    border-color: transparent transparent transparent #9fd4ae !important;
+  }
+  .lay-step-item-simple-success-border:after{
+    border-color: transparent transparent transparent @step-success-color!important;
+  }
+  .lay-step-item-simple-fail-border:after{
+    border-color: transparent transparent transparent @step-fail-color!important;
+  }
+  .lay-step-item-simple-warning-border:after{
+    border-color: transparent transparent transparent @step-warning-color!important;
+  }
+  .lay-step-item-simple-primary-border:after{
+    border-color: transparent transparent transparent @step-primary-color!important;
  }

 }
@@ -179,12 +281,15 @@
    position: absolute;
    top: 0;
    left: 50%;
-    transform: translateX(-50%);
+   // transform: translateX(-50%);
    display: block;
-    width: 2px;
+    width: 1px;
    height: 100%;
    background: #C9C5C5;
  }
+  .lay-step-item-content{
+    margin-left: 8px;
+  }
  .is-vertical{
    display: flex;
  }
--- a/src/module/step/index.vue
+++ b/src/module/step/index.vue
@@ -5,7 +5,14 @@
 </template>

 <script setup name="layStep" lang="ts">
-import { ref, watch, provide, defineProps, withDefaults } from "vue";
+import {
+  ref,
+  watch,
+  provide,
+  defineProps,
+  withDefaults,
+  defineEmits,
+} from "vue";
 import "./index.less";

 export interface LayStepProps {
@@ -14,6 +21,8 @@ export interface LayStepProps {
  direction?: string;
  space?: string;
  currentStatus?: string;
+  composition?: string;
+  simple?: boolean;
 }

 const props = withDefaults(defineProps<LayStepProps>(), {
@@ -21,11 +30,19 @@ const props = withDefaults(defineProps<LayStepProps>(), {
  center: false,
  direction: "horizontal",
  space: "auto",
-  currentStatus: "primary",
+  currentStatus: "success",
+  composition: "default",
+  simple: false,
 });

 const steps = ref([]);

+const emits = defineEmits(["onChange"]);
+
+const change = (index) => {
+  emits("onChange", index - 1);
+};
+
 watch(steps, () => {
  steps.value.forEach(
    (instance: { setIndex: (arg0: any) => void }, index: any) => {
@@ -37,6 +54,7 @@ watch(steps, () => {
 provide("LayStep", {
  props,
  steps,
+  change,
 });
 </script>

--- a/src/module/stepItem/index.vue
+++ b/src/module/stepItem/index.vue
@@ -1,8 +1,9 @@
 <template>
  <div
+    v-if="!simple"
    :class="[
      'lay-step-item',
-      isLast && !isCenter ? 'lay-step-item-last' : '',
+      isLast && !isCenter && composition !== 'row' ? 'lay-step-item-last' : '',
      isCenter ? 'is-item-center' : '',
      isVertical ? 'is-vertical' : '',
    ]"
@@ -27,6 +28,7 @@
          isWait ? 'lay-step-item-wait' : '',
          isCenter ? 'is-center' : '',
        ]"
+        @click="onChange(index + 1)"
      >
        <slot name="pace">
          <template v-if="icon">
@@ -42,20 +44,40 @@
        </slot>
      </div>
    </div>
-    <slot>
-      <div
-        :class="[
-          'lay-step-item-content',
-          isActive ? `lay-step-item-content-active` : '',
-          isCurrent === index ? `lay-step-item-content--${currentStatus}` : '',
-          status ? `lay-step-item-content-${status}` : '',
-          isWait ? 'lay-step-item-content-wait' : '',
-        ]"
-      >
+    <div
+      :class="[
+        'lay-step-item-content',
+        composition === 'row' ? 'lay-step-item-content-row' : '',
+        isActive ? `lay-step-item-content-active` : '',
+        isCurrent === index ? `lay-step-item-content--${currentStatus}` : '',
+        status ? `lay-step-item-content-${status}` : '',
+        isWait ? 'lay-step-item-content-wait' : '',
+      ]"
+      @click="onChange(index + 1)"
+    >
+      <slot>
        <div class="lay-step-item-content-title">{{ title }}</div>
        <p>{{ content }}</p>
-      </div>
-    </slot>
+      </slot>
+    </div>
+  </div>
+  <div
+    v-else
+    :class="[
+      'lay-step-item',
+      'lay-step-simple',
+      !isStart ? 'lay-step-item-simple' : '',
+      'lay-step-item-simple-border',
+      isActive ? 'lay-step-item-simple-active' : '',
+      isCurrent === index ? `lay-step-item-simple-${currentStatus}` : '',
+      isCurrentBorder === index
+        ? `lay-step-item-simple-${currentStatus}-border`
+        : '',
+      isSimpleActive ? 'lay-step-item-simple-active-border' : '',
+    ]"
+    @click="onChange(index + 1)"
+  >
+    <slot>{{ index + 1 }}.{{ title }}</slot>
  </div>
 </template>

@@ -95,6 +117,10 @@ const setIndex = (val: number) => {
  index.value = val;
 };

+const onChange = (index) => {
+  parents.change(index);
+};
+
 const stepsCount = computed(() => {
  return parents.steps.value.length;
 });
@@ -102,10 +128,21 @@ const stepsCount = computed(() => {
 const currentStatus = computed(() => {
  return parents.props.currentStatus;
 });
+
+const simple = computed(() => {
+  return parents.props.simple;
+});
+
+const composition = computed(() => {
+  return parents.props.composition;
+});
 const isCurrent = computed(() => {
  return parents.props.active;
 });
-console.log(isCurrent);
+
+const isCurrentBorder = computed(() => {
+  return parents.props.active + 1;
+});
 const space = computed(() => {
  return parents.props.space;
 });
@@ -126,6 +163,10 @@ const isWait: ComputedRef<boolean> = computed(() => {
  return index.value === parents.props.active + 1;
 });

+const isSimpleActive: ComputedRef<boolean> = computed(() => {
+  return index.value - 1 <= parents.props.active;
+});
+
 const isActive: ComputedRef<boolean> = computed(() => {
  return index.value <= parents.props.active;
 });
@@ -135,6 +176,10 @@ const isLast: ComputedRef<boolean> = computed(() => {
  );
 });

+const isStart: ComputedRef<boolean> = computed(() => {
+  return parents.steps.value[0]?.itemId === currentInstance.uid;
+});
+
 const stepItemState = reactive({
  itemId: computed(() => currentInstance?.uid),
  setIndex,