This is the 21st day of my participation in the August More Text Challenge

why

The previous articles on system components can be seen in the column, and they are common components that are essential to front-end development today.

The Steps step bar component is relatively uncommon, only used in specific situations, and is not fungible.

It’s kind of a functional component.

But here, since it is packaged into components, it is natural to improve it and make it more abundant.

The main consideration is landscape and vertical, the diversity of ICONS. You also have more options when you use it.

structure

Structured, simple practices can be designed to be one-way, fixed icon based on business requirements. But in the construction, naturally, it’s horizontal and vertical.

In addition to ICONS, you can use ready-made components directly, but you can also add slot slots to achieve custom ICONS.

block content div.yx-steps( :class="[`yx-steps-${direction}`, size ? `yx-steps-${size}` : '']" ) div.yx-steps-wrap( :class="[`yx-steps-item`, `yx-steps-${status}`, icon || $slots.icon ? 'yx-stpes-custom' : '']" ) div.yx-steps-item-head div.yx-steps-item-head-inner span( v-if="! icon && ! $slots.icon && status ! == 'finish' && status ! == 'error'" ) {{stepNumber}} span( :class="icon ? `yx-items-step-${icon}` : ''" v-else ) div.yx-steps-item-main div.yx-steps-item-title slot(name="title") {{ title }} div.yx-steps-items-content( v-if="content || $slots.content" ) slot(name="content") {{ content }}Copy the code

The structure here is mainly the title and content sections of the contained steps.

The style can be customized.

The logical part.

Because it’s just a step bar, there’s no complicated logic.

Note that when the state of the current step changes, events need to be triggered to change the state of the current step.

For example, when you go to the next step, change the current step to the completed state, and then change the corresponding style.

const updateChildProps = (isInit) = > {
  const total = ctx.$children.length;
  ctx.$children.forEach((child, index) = > {
    child.stepNumber = index + 1;

    if (props.direction === 'horizontal') {
      child.total = total;
    }
    if(! (isInit && child.status)) {if (index === props.current) {
        if(props.status ! = ='error') {
          child.status = 'process'; }}else if (index < props.current) {
        child.status = 'finish';
      } else {
        child.status = 'wait'; }}if(child.status ! = ='error'&& index ! = =0) {
      .$children[index - 1].nextError = false; }}); }Copy the code

The state of a step can be customized, and here it is handled according to three states.

The last

The content and width/height of the steps are allowed to scale in real development.

So the handling of overflow also needs to be considered.

const updateCurrent = (isInit) = > {
  if (ctx.current < 0 || ctx.current >= ctx.$children.length ) {
    return;
  }
  if (isInit) {
    const current_status = ctx.$children[props.current].currentStatus;
    if (!current_status) {
      ctx.$children[props.current].currentStatus = props.status;
    }
  } else{ ctx.$children[props.current].currentStatus = props.status; }}Copy the code