前端自定义组件之单页面步骤条

本文将讲解如何通过自定义,实现单页面的步骤条组件。其中每个步骤的元素里都是界面设计器拖出来的。
前端自定义组件之单页面步骤条

实现路径

整体的实现思路是界面设计器拖个选项卡组件,自定义这个选项卡,里面的每个选项页都当成一步渲染出来,每一步的名称是选项页的标题。

1. 界面设计器拖出页面

我们界面设计器拖个选项卡组件,然后在每个选项页里拖拽任意元素。完成后点击右上角九宫格,选中选项卡,填入组件 api 名称,作用是把选项卡切换成我们自定义的步骤条组件,这里的 api 名称和自定义组件的 widget 对应。最后发布页面,并绑定菜单。
前端自定义组件之单页面步骤条

2. 组件实现

widget 组件重写了选项卡,核心函数 renderStep,通过 DslRender.render 方法渲染界面设计器拖拽的元素,每一步的 step 又是解析选卡页得到的。

import {
  SPI,
  Widget,
  DefaultTabsWidget,
  BasePackWidget,
  DslDefinition,
  DslRender,
  DslDefinitionType,
  CallChaining,
  customMutation
} from '@oinone/kunlun-dependencies';
import { VNode } from 'vue';
import NextStepSinglePage from './NextStepSinglePage.vue';

@SPI.ClassFactory(BasePackWidget.Token({ widget: 'NextStepSinglePage' }))
export class NextStepSinglePageWidget extends DefaultTabsWidget {
  public initialize(props) {
    super.initialize(props);
    this.setComponent(NextStepSinglePage);
    return this;
  }

  @Widget.Reactive()
  public get invisible() {
    return false;
  }

  // 配置的每一步名称,解析选项页的标题
  @Widget.Reactive()
  public get titles() {
    return this.template?.widgets?.map((item) => item.title) || [];
  }

  // region 上一步下一步配置

  // 步骤数组,数组里的元素即步骤要渲染的内容
  @Widget.Reactive()
  public get steps(): DslDefinition[] {
    // 每个 tab 是一个步骤,这里会有多个步骤
    // 每个步骤里有多个元素,又是数组
    // 所以这里是二维数组
    const tabDsls: DslDefinition[][] = this.template?.widgets.map((item) => item.widgets) || [];

    // 对每个步骤的子元素们,外侧包一层 row 布局,所以变回了一维数组
    return tabDsls.map((tabDsl) => {
      return {
        ...(this.template || {}),
        dslNodeType: DslDefinitionType.PACK,
        widgets: tabDsl,
        widget: 'row',
        resolveOptions: {
          mode: 1
        }
      };
    });
  }

  // 渲染步骤,每个步骤有多个子元素
  @Widget.Method()
  public renderStep(step: DslDefinition): VNode | undefined {
    return DslRender.render(step);
  }

  // region 校验相关

  // 校验的钩子
  @Widget.Reactive()
  @Widget.Inject('validatorCallChaining')
  protected parentValidatorCallChaining: CallChaining<boolean> | undefined;

  // 校验步骤表单
  @Widget.Method()
  public async onValidator(): Promise<boolean> {
    const res = await this.parentValidatorCallChaining?.syncCall();
    return res ?? true;
  }

  // region 数据提交相关

  // 提交数据的方法
  @Widget.Method()
  public async onSave() {
    const submitData = this.formData;
    await customMutation(this.model.model, 'create', submitData || {});
    window.history.back();
  }
}

vue组件核心内容是用component :is属性,渲染出配置的选项页组件

<template>
  <div class="next-step">
    <a-steps :current="current">
      <a-step v-for="title in titles" :title="title" />
    </a-steps>
    <OioSpin :loading="loading" class="oio-spin">
      <div class="step-main">
        <template v-for="(stepEl, index) in stepsVNodes">
          <div v-if="current === index" class="step-item">
            <component :is="stepEl" />
          </div>
        </template>
      </div>
      <div class="step-footer" v-if="stepsVNodes.length">
        <a-button v-if="current > 0" class="oio-button" type="primary" @click="previous"> 上一步 </a-button>
        <a-button v-if="current < stepsVNodes.length - 1" class="oio-button" type="primary" @click="next">
          下一步
        </a-button>
        <a-button v-if="current === stepsVNodes.length - 1" class="oio-button" type="primary" @click="finish">
          完成
        </a-button>
      </div>
    </OioSpin>
  </div>
</template>
<script setup lang="ts">
import { computed, PropType, ref, VNode } from 'vue';
import { OioSpin } from '@oinone/kunlun-vue-ui-antd';
import { DslDefinition } from '@oinone/kunlun-dependencies';

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  titles: {
    type: Array as PropType<string[]>,
    default: []
  },
  steps: {
    type: Array as PropType<DslDefinition[][]>,
    default: []
  },
  renderStep: {
    type: Function as PropType<(step: DslDefinition[]) => VNode[]>
  },
  onValidator: {
    type: Function
  },
  onSave: {
    type: Function
  }
});

const stepsVNodes = computed(() => {
  return props.steps?.map((step) => props.renderStep?.(step));
});

const current = ref<number>(0);

const next = async () => {
  if (await props.onValidator?.()) {
    current.value++;
  }
};
const previous = async () => {
  // if (await props.onValidator?.()) {
  current.value--;
  // }
};
const finish = async () => {
  if (await props.onValidator?.()) {
    props.onSave?.();
  }
};
</script>
<style lang="scss" scoped>
.next-step {
  height: 100%;
  background-color: #fff;
  padding: 16px;

  .step-main {
    display: flex;
    justify-content: flex-start;

    .step-item {
      width: 100%;
    }
  }

  .step-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
  }
}
</style>

3. 效果

前端自定义组件之单页面步骤条

Oinone社区 作者:银时原创文章,如若转载,请注明出处:https://doc.oinone.top/frontend/components/21333.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(0)
银时的头像银时数式员工
上一篇 2025年7月8日 pm3:43
下一篇 2025年7月8日 pm5:58

相关推荐

  • oio-checkbox 对选框

    API 属性 Checkbox 参数 说明 类型 默认值 版本 autofocus 自动获取焦点 boolean false checked(v-model:checked) 指定当前是否选中 boolean false disabled 失效状态 boolean false indeterminate 设置 indeterminate 状态,只负责样式控制 boolean false value 与 CheckboxGroup 组合使用时的值 boolean | string | number – 事件 事件名称 说明 回调参数 版本 change 变化时回调函数 Function(e:Event) –

    2023年12月18日
    63600
  • oio-modal 对话框

    API 参数 说明 类型 默认值 版本 cancelText 取消按钮文字 string| slot 取消 closable 是否显示右上角的关闭按钮 boolean true closeIcon 自定义关闭图标 VNode | slot – confirmLoading 确定按钮 loading boolean 无 destroyOnClose 关闭时销毁 Modal 里的子元素 boolean false footer 底部内容,当不需要默认底部按钮时,可以设为 :footerInvisible="true" slot 确定取消按钮 getTriggerContainer 指定 Modal 挂载的 HTML 节点 (instance): HTMLElement () => document.body keyboard 是否支持键盘 esc 关闭 boolean true mask 是否展示遮罩 boolean true maskClosable 点击蒙层是否允许关闭 boolean true enterText 确认按钮文字 string 确定 title 标题 string|slot 无 visible(v-model:visible) 对话框是否可见 boolean 无 width 宽度 string|number 520 wrapClassName 对话框外层容器的类名 string – zIndex 设置 Modal 的 z-index number 1000 cancelCallback 点击遮罩层或右上角叉或取消按钮的回调, return true则关闭弹窗 function(e) enterCallback 点击确定回调 function(e)

    2023年12月18日
    57800
  • oio-switch 开关

    API 参数 说明 类型 默认值 版本 autofocus 组件自动获取焦点 boolean false checked(v-model: checked ) 指定当前是否选中 checkedValue | unCheckedValue false checkedChildren 选中时的内容 slot checkedValue 选中时的值 boolean | string | number true disabled 是否禁用 boolean false loading 加载中的开关 boolean false unCheckedChildren 非选中时的内容 slot unCheckedValue 非选中时的值 boolean | string | number false 事件 事件名称 说明 回调参数 change 变化时回调函数 Function(checked: boolean | string | number, event: Event)

    2023年12月18日
    55500
  • oio-button 按钮

    主按钮:用于主行动点,一个操作区域只能有一个主按钮。 默认按钮:用于没有主次之分的一组行动点。 虚线按钮:常用于添加操作。 文本按钮:用于最次级的行动点。 链接按钮:一般用于链接,即导航至某位置。 以及四种状态属性与上面配合使用。 危险:删除/移动/修改权限等危险操作,一般需要二次确认。 禁用:行动点不可用的时候,一般需要文案解释。 加载中:用于异步操作等待反馈的时候,也可以避免多次提交。 API 按钮的属性说明如下: 属性 说明 类型 默认值 版本 block 将按钮宽度调整为其父宽度的选项 boolean false disabled 按钮失效状态 boolean false icon 设置按钮的图标类型 v-slot – loading 设置按钮载入状态 boolean | { delay: number } false type 设置按钮类型 primary | ghost | dashed | link | text | default default 事件 事件名称 说明 回调参数 版本 click 点击按钮时的回调 (event) => void 支持原生 button 的其他所有属性。

    2023年12月18日
    40100
  • oio-spin 加载中

    用于页面和区块的加载中状态。 何时使用 页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。 API 参数 说明 类型 默认值 版本 delay 延迟显示加载效果的时间(防止闪烁) number (毫秒) – loading 是否为加载中状态 boolean true wrapperClassName 包装器的类属性 string –

    2023年12月18日
    61600

Leave a Reply

登录后才能评论