xiaodou-ai-admin/src/components/StepModal/index.tsx

import { Button, Col, Row, Space, Steps, Modal, Card } from 'ant-design-vue'
import { defineComponent, PropType, computed, ref, createApp } from 'vue'
import './index.less'

interface Steps {
  title: string,
  description?: string
  subTitle?: string
}

export const StepModal = defineComponent({
  name: 'step-modal',
  props: {
    steps: {
      type: Array as PropType<Steps[]>,
      default: () => []
    },
    step: {
      type: Number,
      default: 0
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  emits: ['next', 'pre', 'ok', 'close', 'submit'],
  setup (props, ctx) {
    const isLastStep = computed(() => props.step + 1 === props.steps.length)

    // 已经填写过的step的下标
    const writeSteped = ref([0])

    // 是否允许当前进行下一步
    const nextStep = () => {
      if (isLastStep.value) {
        ctx.emit('submit')
      } else {
        writeSteped.value.push(writeSteped.value.length)
        ctx.emit('next')
      }
    }
    const close = () => {
      ctx.emit('close')
    }

    const preStep = () => {
      ctx.emit('pre')
    }

    return () => (
      <Modal
        class='step-modal'
        visible={props.visible}
        title={false}
        closable={false}
        footer={null}
      >
        <Row class='steps' >
          <Steps
            size="small"
            current={props.step}
            items={props.steps}
          ></Steps>
        </Row>
        <Row class='step-modal-content' >
          {ctx.slots.default!()}
        </Row>
        <Row class='footer' align='middle' justify='space-between' >
          <Col>
            <Space>
              <Button disabled={props.step === 0} onClick={preStep} >上一步</Button>
              <Button onClick={nextStep} >{isLastStep.value ? '提交' : '下一步'}</Button>
              <Button onClick={close} >取消</Button>
            </Space>
          </Col>
        </Row>
      </Modal>
    )
  }
})