Element UI details + summary

Almost half a month on the job. I also knew more or less about the business of the company, had few tasks during the period, and the working arrangement was not ideal.

First of all, I would like to thank my team leader for helping me solve many problems. It’s also the group leader who brought me here. Thank you again.

The company is making an iPad application. When I started, the project was already half developed, and the technology used was Vue + Element UI.

As for the effect and implementation of various functions, I have been working on these functions for nearly half a month. I did not touch Element UI before, thinking it was just a matter of copy and paste, but in fact, there are many details that NEED to be experienced by myself.

The following are some of the problems encountered in the project. Here is a summary, I believe that this summary will be helpful.

Question:

When using the Element UI Dailog popup, the popup is not in the vue mounted app, and the custom styles do not override the default styles.

Solution:

The custom style is written globally and wrapped with a parent element, and the style works.

Question:

Reference to the element UI dialog box, the pop-up box will load the inside of the Dom, js is not yet in the Dom, has started to execute, can not obtain and manipulate the Dom element

Solution:

1. Instead of using the Element UI to the Dialog box, write the HTML element by hand, fix the Dom structure, let the Dom load first, then execute js on the element.

2. The Element UI Dig log popup, using the open callback, dynamically generates the Dom and executes the open method, which executes immediately

3. Do not write JS in the parent component, separate to the child component can be, click the pop-up box directly load the child component, there will be no execution problems

Question:

Element UI adds validation to the form, in the el-Col tag

Solution:

1. Start by adding: model, : rules,
2. Then add the el-form-item tag wrap to the input box you want to validate, and add prop
3. Add rules rules to vue Data, where rules are defined as prop
4. $refs[‘inHosForm’].validate((valid) will check whether the form is filled in with prop

 1. <el-form ref="inHosForm" label-width="80px" label-position="left" class="form" :model="inHosData" :rules="rules"> // :model is the field that defines the input of the V-model form, and :rules is the validation rule"12" class="collabel">
               <el-form-item label="Degree of reliability" prop="reliable">
                <el-input size="mini" class="inputWidth1" placeholder="Please fill in" v-if=! "" previewMode" v-model="inHosData.reliable"></el-input>
              </el-form-item>
              <span v-if="previewMode"> {{inHosData.reliable}}</span>
</el-col>

 3. data () {
    return {
      rules: {
        reliable: [
          { required: true, message: 'Please enter reliability', trigger: 'blur'// Trigger is a method in element UI that uses blur to enter the box, isSlect to change the box, methods: {4.saveMedical () {
      // $refs['This must be the one defined in model.']
      this.$refs['inHosForm'].validate((valid) => {
        if(valid) {} // The valid form is not filled in asfalseAnd fill in fortrue}}}Copy the code

Question:

El-dialog__body setting overflow: hidden does not work, the scroll bar will not appear, hidden content will not be displayed

Solution:

Elemnet UI diglog pop-up, global. El-dialog__body set overflow: auto; Can be

Question:

There are some default styles in the Element UI that aren’t very good, and you need to define some of them yourself, which won’t override the original

Solution:

Define styles in the tag and write inline styles

<el-col :span=24 style="margin:20px"></el-col>
Copy the code

Question:

The El-Botton element UI property disabled when disabled does not work

<el-button :disabled="false"> Default button </el-button>Copy the code

Solution:

Disabled accepts a Boolean value. = is not followed by quotes

 <el-button :disabled=false> Default button </el-button>Copy the code

Other questions:

Question:

The position of canvas tracing line is not accurate and deviates from the normal position. Base64 cannot be converted to IMG image normally. This points to the current Canvas instance but not to vue instance

Solution:

Unwrap the canvas as a component and introduce a component call without being affected

Question:

The form verification function is not 100% complete, there are defects, the current page after filling in the form, can not slide, found that this points to the vue instance, need to point to the swiper instance, the current swiper instance is not mounted,

You need to change the this reference and ensure that the previous this refers to the vue instance

Solution:

Read the Swiper API documentation.

Problem: When base64 is converted to an image, this cannot point to an IMG problem

Solution:

Base64 to image, this points to constructor, cannot point to vu e instance, convert this, define variable let that = this, convert this, complete online signature function.

Conclusion:

1. The Elemnet UI dailog bullet box should not be written into the tag, but should be written in the root element instead of being wrapped. The structure is as follows

            </el-col>
          </el-row>
            <el-dialog
            title="Signature"
            :visible.sync="centerDialogVisible"
            width="85%"
            center>
            <sign @draw_save="getSignImg"></sign>
          </el-dialog>
        </div>
Copy the code

2. When you want to click on an element to appear in a Dialog box, you add the click event () provided by Element to that element, and then the definition (:visible.sync) in the Dialog must be consistent

3. Before introducing the component, I write js code in the parent component, because when the dialog dialog appears, the DOM inside the dialog will be loaded, js will execute immediately, and the open method provided by it is not very ideal, JS code will always execute one step before DOM, I also put the timer to let JS execute slowly. Then clearing timers became an issue, so we abandoned this notation in favor of component import.

4. If an element is bound to an Element’s click event and you want to bind another click event, write the provided method in your own method

<div class="canva" @click="isShow"> methods: {isShow () {this.centerdialogVisible =true
        //...
    }
}
Copy the code

5. Pass the parameter to the background and use value to accept the value to be passed

Res. data The data returned by the background is traversed by forEach loop. You can customize the data according to the fields and manipulate the data

API.diseaseByTod(params).then((res) => {
this.isSerthe = []
res.data.forEach(item => {
this.isSerthe.push({
chapter: item.fields.icd_code,
chapter_icd: item.fields.icd_code,
illness_name: item.fields.illness,
level: 4
})
})
console.log(res.data)
})
Copy the code

An array data that need to store multiple interfaces, and four parts need to use the data in this array, can iterate over the data first, and then according to the field push objects, the custom data object, then cycle before the next interface data push, emptying the original array, define an empty array to store data interface.

The parameter passed to the background is the value of isslect. chapter each time

<li v-for="(isSlect,index) in isSerthe" :key="index" class="lilists" @click="diseaseByCod(isSlect.chapter,isSlect.level)">
    <span class="fontSize">{{isSlect.chapter_icd}}</span><span class="fontSizes">{{isSlect.illness_name}}<span class="el-icon-arrow-right" v-if="isShow"></span>
    <input type="checkbox" v-if="isShaow" name="1" value="isSlect" class="radio"/>
    </span>
</li>
Copy the code

A LI loop displays the data of the four interfaces, realizing hierarchy switching and reducing the amount of code.

diseaseCoding () {
      API.diseaseCoding().then((res) => {
        this.isShaow = false
        this.isShow = true
        this.isSerthe = []
        res.data.forEach(item => {
          this.isSerthe.push({
            chapter: item.fields.chapter,
            chapter_icd: item.fields.chapter_range,
            illness_name: item.fields.illnessname,
            level: 1
          })
        })
        console.log(this.isSerthe)
      })
    },
    
    diseaseByCod (value, number) {
      if (number === 1) {
        this.isShaow = false
        this.isShow = true
        this.centerDialogVisible = true

        let params = {
          chapter: value
        }
        API.diseaseByCod(params).then((res) => {
          this.isSerthe = []
          res.data.forEach(item => {
            this.isSerthe.push({
              chapter: item.fields.chapter_range,
              chapter_icd: item.fields.chapter_range,
              illness_name: item.fields.illnessname,
              level: 2
            })
             console.log(item.fields.chapter_range)
          })
          console.log(res.data)
        })
      } else if (number === 2) {
        this.isShaow = false
        this.isShow = true
        let params = {
          chapter_range: value
        }
        API.diseaseByDod(params).then((res) => {
          this.isSerthe = []
          res.data.forEach(item => {
            this.isSerthe.push({
              chapter: item.fields.icd_code,
              chapter_icd: item.fields.icd_code,
              illness_name: item.fields.illness,
              level: 3
            })
          })
          console.log(res.data)
        })
      } else if (number === 3) {
        this.isShaow = true
        this.isShow = false
        let params = {
          icd_code: value
        }
        console.log(value)
        API.diseaseByTod(params).then((res) => {
          this.isSerthe = []
          res.data.forEach(item => {
            this.isSerthe.push({
              chapter: item.fields.icd_code,
              chapter_icd: item.fields.icd_code,
              illness_name: item.fields.illness,
              level: 4
            })
          })
          console.log(res.data)
        })
      }
    }
Copy the code

In the browser console, Preview checks the complete data in the background, and Headers requests check whether the parameters are sent to the background

Troubleshooting: analyze errors, view error information, upward investigation, problem recurrence, retractable elimination

console.log(_) alert(…) Debugger debug method alert to check whether the execution, code execution order, synchronous asynchronous execution process, Dom element loading is not js has been executed, variable can not get the value…

You don’t have to write one step at a time. Write a line of code to see the effect, their own mind should have a picture of what the next effect will be. You won’t be slow and you won’t fall short of the expectations of others.

Ok, the above is the summary of the problems encountered in the project.

I also believe that steady step by step, there will be harvest, who are from what will not come over, just a matter of time.

To be continued…