Vue.js encapsulates regional cascading components

Why would you want to encapsulate it yourself?

When we meet with the demand of the complex or more bad implementation of interactions, we must have thought of using the component in the first place, and now there are a lot of good component library for us to use, but in the company of the project, all the theme of the color is dark, because we are to do for the GA project, want to put these components are modified into a unified style, That’s a lot of work, so let’s do it ourselves.

The preparatory work

  • We need to have a demo page, or something we can show in our existing VUE project, because we’re building a component library, so we’ll just create a vue-CLI project.
  • Prepare the data for the district cascade. I downloaded the data from Github to the district level.
  • Get yourself a cup of coffee and get going

Regional data connection: github.com/modood/Admi…

Start typing code

First, write the component structure

Create a new component file and name it if-Cascader, the Sass editing style used here.

Once the component is created, we also need to introduce it into our presentation page to test if it has been successfully introduced

The next step is to take a moment to think about whether the locale data needs to be filled in by the user or encapsulated in a component. The answer, of course, is to let the user fill it in, because encapsulating locale data within a component leads to several problems:

  • After the locale data is updated, the component needs to maintain the new data and the user needs to update the component.
  • Encapsulation in a component will cause the size of the component to become large and the component cannot be loaded quickly.

Therefore, the best way is to use the component, after the local server request data to fill in the component, but this requires a unified format, we use the above link to download the data format for data processing.

Start writing style and logic

After processing the data, write the basic style:

Note: In the figure: Dynamic data can only be realized when value is changed to V-model, which has not been modified when the screenshot is taken. Add inputVal <input type="text" readonly :value="inputVal" @change="changeSelect()"> ··· Computed: {changeSelect() {return this.inputVal; }},Copy the code
  • Readonly is used because the data in the input box is selected and does not require manual input.
  • Dynamically bound variables are used to store user-selected data;
  • The second close icon can be clicked to clear the input field data;
  • Here I have removed the border of the demo file and added the component style that our UI requires.

Now it’s time for us to pass in the locale data passed in by the user via props and go through the render!

  • Edit the style given by the UI, and render the region name of the first level, and create the cascading style below, where the location is used to write down the location of the pull container.
  • Note that the key is bound to the code of the region, rather than the index generated by v-for. The level 1 directory does not change, so there is no problem. When the level 2, 3 and 4 drop down according to the change of the level 2, 3 and 4, the problem will be found that the data does not change dynamically.

Third, increase interaction

Now we need to add the click event to enable the click input box to appear dropdown, click the primary directory to appear secondary directory:

Here is the basic realization of the principle, the following will be three or four together to achieve!

Because the data layer is covered by layer, taking level 3 as an example, it is necessary to consider the user’s first selection and re-selection after selecting level 4, so it is necessary to make a judgment and data re-processing.

Add a ref to the component and add a method in Mounted cycle. Of course, you can also automatically close the component after the user has selected the fourth level. Here is the requirement.

4. Bidirectional binding

The next most important step is to enable bidirectional binding of the data. Add the model according to the documentation, and then call $emit to send the processed data to the user when needed. The best time to call is to pass a value to the user (parent) as the data changes, so add watch!

  • Change event to return to the data format: [{” name “:” in jilin province “, “code” : “220000”}, {” name “:” siping “, “code” : “220300”}, {” name “:” lishu county “, “code” : “220322”}, {” name “:” pear town “, “code” : “220322100”});
  • Adding the change event returns a raw selection of data that gives the user the freedom to manipulate the data style and structure as he desires;

Next is the data echo, just need to load the component when the user to the data (such as: Jilin Province/Siping city/Lishu county/Lishu town) decomposition, after traversing get code and index variable assignment can be, but this needs to specify a good interval!

Optimize components

Since we are making components, we also need something customizable, so here are a few more configurations that can be used freely by the user. This is already shown in the screenshot above, where I added four custom options.

1.placeholder

Used to display prompts, add props passes, and add dynamic binding to input in the component

<input type="text" readonly v-model="inputVal" @click="showSelectFn($event)" :placeholder="placeholder ? Placeholder :' Please select. '">
Copy the code

2.level

Use to customize the display of several levels of menus, add props pass values, and add judgments to each level of containers

html:

<div class="if-cascader-level if-cascader-level-one if-cascader-level-district" 
     v-show="showSele && selectLevel >= 1">...</div>
<div class="if-cascader-level if-cascader-level-two if-cascader-level-district"
      v-if="selectedValue.length >= 1 && showSele && selectLevel >= 2">...</div>   
<div class="if-cascader-level if-cascader-level-three if-cascader-level-district"
     v-if="selectedValue.length >= 2 && showSele && selectLevel >= 3">...</div>   
<div class="if-cascader-level if-cascader-level-four if-cascader-level-district"
     v-if="selectedValue.length >= 3 && showSele && district[firstIndex].children[secondIndex].children[thirdIndex].children && selectLevel >= 4">...</div> 
Copy the code

Add a default value of 3 to js

Data () {return {selectLevel: this level | | 3,...}; },Copy the code

3.spacer

For user-defined spacers, add props pass and replace “/” when processing data as a variable.

Data () {return {spacerStr: this spacer | | '/',...}; }, methods:{··· selectThree(){··· this.inputVal = this.selectedValue.join(this.spacerstr);}, methods:{··· · selectThree(){··· this.inputVal = this.selectedValue.join(this.spacerstr); ...}},Copy the code

4.options/district

Props props props props props props props props props props props props props props

  • If district has a value, a district cascade is used, that is, the logic written above. If options has a value, a different set of judgments is used, specifying that the user uses the data structure [label:””,value:””,children:[]].
  • The key of the traversal can’t be the code of the locale, but it can’t be the index of the V-for, it should be the value of the key.

There are still many compatibility problems that need to be modified slowly in use, because it is the first time for me to study and there are not enough application scenarios, so…… I think there are still a lot of bugs (SHH), I’m using a different structure here, but the logic is basically the same, only the variable names mentioned above need to be changed.

Write API documentation

Finally according to the configuration to write a good document for the user, that is, we use later to view. Screenshots directly used by the company in the use of the API so is GDV – prefix, components to the end here scatter flowers! ✿ Angry, (° °) Blue ✿

The first time to write an article is a little messy, I hope you can forgive me, inadequate place to put forward, I want to follow the leaders together!