Code address: gitee.com/wyh-19/supe… This code branch: Essage-5

Series of articles:

  • Vue + Element Large Forms solution (1)– Overview
  • Vue + Element Large Forms solution (2)– Form splitting
  • Vue + Element Large Forms Solution (3)– Anchor Components (part 1)
  • Vue + Element Large Form Solution (4)– Anchor Component (2)
  • Vue + Element Large Forms solution (5)– Validation identifier
  • Vue + Element Large Forms solution (6)– Automatic identification
  • Vue + Element Large Forms solution (7)– Form form
  • Vue + Element Large Form Solution (8)– Data comparison (1)
  • Vue + Element Large Form Solution (9)– Data comparison (2)
  • Vue + Element Large Forms solution (10)– Form communication and dynamic forms

preface

The anchor component, which was completed in two previous articles, was originally designed to help scroll through the page content of large forms. The autonomous implementation further drove me to explore more possibilities for this form solution. The first thing THAT came to mind was that if the subform failed, it would be convenient to flag it at the anchor point. Take steps toward that goal now.

The preparatory work

After removing the placeholder code added in the previous article, the template code for the main form looks like this:

<div ref="pageBlock" class="form-wrapper">
    <el-button type="primary" @click="handleSave">save</el-button>
    <div data-section="Basic Information" data-ismain></div>
    <div data-section="Personal Information"></div>
    <form1 ref="form1" :data="formDataMap.form1" />
    <div data-section="Advanced information" data-ismain></div>
    <div data-section="Company Information"></div>
    <form2 ref="form2" :data="formDataMap.form2" />
    <div class="anchor-wrapper">
      <anchor :page-block="pageBlock" />
    </div>
</div>
Copy the code

Now it is equivalent to returning to the state where the form is completely dismantled, but more anchor components are used.

Implementation approach

Since the anchor component’s data is all parsed out of the DOM structure, if you want to tag the anchor, you need to write the information into the DOM. When the form fails validation, attach the data-tip attribute to the section and notify the anchor to update. To bind a section to a specific form, add the data-for= form name attribute to the section, which specifies the specific form. Let’s look at the implementation.

The specific implementation

Modify the dom

Add the data-for attribute to secton to specify the form. The modified code is as follows:

.<div data-section="Personal Information" data-for="form1"></div>.<div data-section="Company Information" data-for="form2"></div>.Copy the code

[data-for=${formKey}] [data-for=${formKey}] [data-for=${formKey}] Add the data-tip attribute to it, otherwise remove the attribute, the specific code is as follows:

this.$message.warning('Verification failed')
// Mark the corresponding failure form
formKeys.map((formKey, index) = > {
  const section = this.pageBlock.querySelector(`[data-for=${formKey}] `)
  if(! validResults[index]) { section? .setAttribute('data-tip'.' ')}else{ section? .removeAttribute('data-tip')}})Copy the code

Click save to verify the effect and corresponding properties as shown in the picture below:

Update the anchor

Add a data-tip to the section above, and try to pull it out of the anchor and draw it. Back in the Anchor component, first add a data output to getSectionsData as follows:

return {
  // True if data-tip is present, false otherwise
  tip: 'tip' in item.dataset,
  ismain,
  index: ismain ? mainIndex : `${mainIndex}.${subIndex}`.label: item.dataset.section,
  top: item.offsetTop
}
Copy the code

In template, add ! , the corresponding style is as follows:

.highlight-tag {
  display: inline-block;
  text-align: center;
  margin-left: 8px;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  background: crimson;
  color: #efefef;
}
Copy the code

All that remains is how to notify the anchor component of the update. The watchpageBlock property changes when the DOM changes. The pageBlock property changes when the DOM changes. The pageBlock property changes when the DOM changes.

Since this path fails, it is necessary to return to the most basic approach and add a redraw interface to anchor. During calibration, the outside world will actively call this redraw interface. Inside the Anchor component, add the reRender method as follows:

reRender() {
  this.sections = this.getSectionsData(this.pageBlock)
  this.currentSection = this.getCurrentSection()
}
Copy the code

As the Anchor component has done layer packaging, it also needs to modify the packaging layer, from which the real reRender is output. The code of the packaging layer is as follows:

<template>
  <anchor v-if="pageBlock" ref="anchor" :page-block="pageBlock" />
</template>
<script>
import Anchor from './anchor'
export default {
  components: {
    Anchor
  },
  props: {
    pageBlock: HTMLElement
  },
  methods: {
    reRender() {
      this.$nextTick(() = > {
        this.$refs['anchor'].reRender()
      })
    }
  }
}
</script>
Copy the code

Back inside the form component, add ref=”anchor” to the Anchor component, and then add this.$refs[‘anchor’].rerender () to the end of handleSave. Click Save again to get the following effect:

Pretty good. Pretty much what I wanted. However, there is still one more step to be done, that is, when the verification is successful, the anchor point can no longer display red warning, the following add to the assembly of data logic, remove all red warning code, the code is as follows:

formKeys.map(formKey= > {
  // Add code to remove warnings
  const section = this.pageBlock.querySelector(`[data-for=${formKey}] `) section? .removeAttribute('data-tip')
  const partFormData = this.$refs[formKey].formData
  Object.assign(formData, partFormData)
})
Copy the code

Now we test it again, and it’s perfectly normal. But the effect is still not amazing, you have to click save at the end to locate the problem, can you locate it in real time? For the sake of time, this question will be left to the next paper. Thank you for reading, and your comments are welcome!