1.步骤条封装

2022-01-04 18:12:13 +08:00
parent af5a0e0cc9
commit acef2f91b0
11 changed files with 1236 additions and 422 deletions
--- a/src/module/slider/index.vue
+++ b/src/module/slider/index.vue
@@ -108,13 +108,13 @@ const props = withDefaults(defineProps<LaySliderProps>(), {

 let rangeValue: Ref<number[]> = ref([0, 0]);
 if (Array.isArray(props.modelValue)) {
-  // eslint-disable-next-line vue/no-setup-props-destructure
+  // eslint-disable-next-line vue/no-step-props-destructure
  rangeValue.value = props.modelValue;
 }

 let verticalRangeValue: Ref<number[]> = ref([0, 0]);
 if (Array.isArray(props.modelValue)) {
-  // eslint-disable-next-line vue/no-setup-props-destructure
+  // eslint-disable-next-line vue/no-step-props-destructure
  verticalRangeValue.value = props.modelValue;
 }

--- a/src/module/step/index.less
+++ b/src/module/step/index.less
@@ -0,0 +1,191 @@
+@width-height-pace: 20px;
+@step-color: #5FB878;
+
+.lay-step{
+  display: flex;
+  flex-wrap: nowrap;
+  .lay-step-item{
+    flex-grow: 1;
+  }
+
+  .is-item-center{
+    text-align: center;
+  }
+
+  .lay-step-item-last {
+    flex-grow: 0 !important;
+  }
+  .lay-step-item-pace{
+    width: @width-height-pace;
+    height: @width-height-pace;
+    border: 2px #8D8D8D solid;
+    border-radius: 50%;
+    text-align: center;
+    line-height: @width-height-pace;
+    background: #FFFFFF;
+  }
+  .is-center{
+    margin: 0 auto;
+  }
+  .lay-step-item-active{
+    border: 2px @step-color solid;
+    color: #FFFFFF;
+    background: @step-color;
+  }
+  .lay-step-item-wait{
+    border: 2px #000000 solid;
+    color: #000000;
+  }
+
+  .lay-step-item--success {
+    border: 2px @step-color solid;
+    color: #FFFFFF;
+    background: @step-color;
+  }
+
+  .lay-step-item--fail{
+    border: 2px #FF5722 solid;
+    color: #FFFFFF;
+    background: #FF5722;
+  }
+
+  .lay-step-item--warning{
+    border: 2px #FFB800 solid;
+    color: #FFFFFF;
+    background: #FFB800;
+  }
+  .lay-step-item--primary{
+    border: 2px #1E9FFF solid;
+    color: #FFFFFF;
+    background: #1E9FFF;
+  }
+
+  .lay-step-item-success {
+    border: 2px @step-color solid;
+    color: #FFFFFF;
+    background: @step-color;
+  }
+
+  .lay-step-item-fail{
+    border: 2px #FF5722 solid;
+    color: #FFFFFF;
+    background: #FF5722;
+  }
+
+  .lay-step-item-warning{
+    border: 2px #FFB800 solid;
+    color: #FFFFFF;
+    background: #FFB800;
+  }
+  .lay-step-item-primary{
+    border: 2px #1E9FFF solid;
+    color: #FFFFFF;
+    background: #1E9FFF;
+  }
+
+  .lay-step-item-content{
+    color: #8D8D8D;
+    .lay-step-item-content-title{
+      font-weight: bold;
+      font-size: 16px;
+    }
+  }
+
+  .lay-step-item-content-active{
+    color: @step-color;
+  }
+
+  .lay-step-item-content--success{
+    color: @step-color;
+  }
+  .lay-step-item-content--fail{
+    color: #FF5722;
+  }
+  .lay-step-item-content--warning{
+    color: #FFB800;
+  }
+  .lay-step-item-content--primary{
+    color: #1E9FFF;
+  }
+
+  .lay-step-item-content-wait{
+    color: #000000;
+  }
+  .lay-step-item-content-success{
+    color: @step-color;
+  }
+  .lay-step-item-content-fail{
+    color: #FF5722;
+  }
+  .lay-step-item-content-warning{
+    color: #FFB800;
+  }
+  .lay-step-item-content-primary{
+    color: #1E9FFF;
+  }
+
+
+  .lay-step-item-line{
+    position: relative;
+  }
+
+  .lay-step-item-line:before {
+    z-index: -1;
+    content: "";
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    display: block;
+    height: 2px;
+    width: 100%;
+    background: #C9C5C5;
+  }
+  .is-line-center:before {
+    left: 50%;
+  }
+
+  .lay-step-item-line-active:before {
+    transition: background 150ms;
+    background: #5FB878 !important;
+  }
+
+  .lay-step-item-line-fail:before {
+    transition: background 150ms;
+    background: #FF5722 !important;
+  }
+
+  .lay-step-item-line-warning:before {
+    transition: background 150ms;
+    background: #FFB800 !important;
+  }
+
+  .lay-step-item-line-primary:before {
+    transition: background 150ms;
+    background: #1E9FFF !important;
+  }
+
+}
+.lay-step-column {
+  height: 100%;
+  flex-flow: column;
+  .lay-step-item-line{
+    position: relative;
+    height: 100%;
+    width: 24px;
+  }
+  .lay-step-item-line:before {
+    z-index: -1;
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    display: block;
+    width: 2px;
+    height: 100%;
+    background: #C9C5C5;
+  }
+  .is-vertical{
+    display: flex;
+  }
+}
--- a/src/module/step/index.ts
+++ b/src/module/step/index.ts
@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+import type { IDefineComponent } from "../type/index";
+
+Component.install = (app: App) => {
+  app.component(Component.name || "laySetup", Component);
+};
+
+export default Component as IDefineComponent;
--- a/src/module/step/index.vue
+++ b/src/module/step/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <div :class="['lay-step', direction !== 'vertical' ? '' : 'lay-step-column']">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup name="layStep" lang="ts">
+import { ref, watch, provide, defineProps, withDefaults } from "vue";
+import "./index.less";
+
+export interface LayStepProps {
+  active?: number;
+  center?: boolean;
+  direction?: string;
+  space?: string;
+  currentStatus?: string;
+}
+
+const props = withDefaults(defineProps<LayStepProps>(), {
+  active: 0,
+  center: false,
+  direction: "horizontal",
+  space: "auto",
+  currentStatus: "primary",
+});
+
+const steps = ref([]);
+
+watch(steps, () => {
+  steps.value.forEach(
+    (instance: { setIndex: (arg0: any) => void }, index: any) => {
+      instance.setIndex(index);
+    }
+  );
+});
+
+provide("LayStep", {
+  props,
+  steps,
+});
+</script>
+
+<style scoped></style>
--- a/src/module/stepItem/index.ts
+++ b/src/module/stepItem/index.ts
@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+import type { IDefineComponent } from "../type/index";
+
+Component.install = (app: App) => {
+  app.component(Component.name || "laySetupItem", Component);
+};
+
+export default Component as IDefineComponent;
--- a/src/module/stepItem/index.vue
+++ b/src/module/stepItem/index.vue
@@ -0,0 +1,152 @@
+<template>
+  <div
+    :class="[
+      'lay-step-item',
+      isLast && !isCenter ? 'lay-step-item-last' : '',
+      isCenter ? 'is-item-center' : '',
+      isVertical ? 'is-vertical' : '',
+    ]"
+    :style="{ flexBasis: space, flexGrow: space === 'auto' ? 1 : 0 }"
+  >
+    <div
+      :class="[
+        !isLast
+          ? isLineActive
+            ? `lay-step-item-line lay-step-item-line-${status || 'active'}`
+            : 'lay-step-item-line'
+          : '',
+        isCenter ? 'is-line-center' : '',
+      ]"
+    >
+      <div
+        :class="[
+          'lay-step-item-pace',
+          isActive ? `lay-step-item-active` : '',
+          isCurrent === index ? `lay-step-item--${currentStatus}` : '',
+          status ? `lay-step-item-${status}` : '',
+          isWait ? 'lay-step-item-wait' : '',
+          isCenter ? 'is-center' : '',
+        ]"
+      >
+        <slot name="pace">
+          <template v-if="icon">
+            <lay-icon :type="icon"></lay-icon>
+          </template>
+          <template v-else>
+            <span v-if="!isActive">{{ index + 1 }}</span>
+            <lay-icon
+              v-else
+              :type="status === 'fail' ? 'layui-icon-close' : 'layui-icon-ok'"
+            ></lay-icon>
+          </template>
+        </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-title">{{ title }}</div>
+        <p>{{ content }}</p>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script setup name="LayStepItem" lang="ts">
+import {
+  ref,
+  inject,
+  onMounted,
+  computed,
+  getCurrentInstance,
+  onBeforeUnmount,
+  reactive,
+  defineProps,
+  withDefaults,
+} from "vue";
+
+import type { ComputedRef } from "vue";
+
+export interface LayStepItemProps {
+  title?: string;
+  content?: string;
+  icon?: string;
+  status?: string;
+}
+
+const props = withDefaults(defineProps<LayStepItemProps>(), {
+  title: "",
+  content: "",
+  icon: "",
+  status: "",
+});
+
+const index = ref(-1);
+const parents: any = inject("LayStep");
+const currentInstance: any = getCurrentInstance();
+const setIndex = (val: number) => {
+  index.value = val;
+};
+
+const stepsCount = computed(() => {
+  return parents.steps.value.length;
+});
+
+const currentStatus = computed(() => {
+  return parents.props.currentStatus;
+});
+const isCurrent = computed(() => {
+  return parents.props.active;
+});
+console.log(isCurrent);
+const space = computed(() => {
+  return parents.props.space;
+});
+
+const isVertical = computed(() => {
+  return parents.props.direction === "vertical";
+});
+
+const isCenter = computed(() => {
+  return parents.props.center;
+});
+
+const isLineActive: ComputedRef<boolean> = computed(() => {
+  return index.value <= parents.props.active - 1;
+});
+
+const isWait: ComputedRef<boolean> = computed(() => {
+  return index.value === parents.props.active + 1;
+});
+
+const isActive: ComputedRef<boolean> = computed(() => {
+  return index.value <= parents.props.active;
+});
+const isLast: ComputedRef<boolean> = computed(() => {
+  return (
+    parents.steps.value[stepsCount.value - 1]?.itemId === currentInstance.uid
+  );
+});
+
+const stepItemState = reactive({
+  itemId: computed(() => currentInstance?.uid),
+  setIndex,
+});
+
+parents.steps.value = [...parents.steps.value, stepItemState];
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {
+  parents.steps.value = parents.steps.value.filter(
+    (instance: { itemId: any }) => instance.itemId !== currentInstance.uid
+  );
+});
+</script>