Comparison of two implementation methods of Vue drop-down list

Two implementations of Vue drop-down list

The first method uses v-for

  <el-select v-model="form.columeType" placeholder="field type">
           <el-option v-for="(item,index) in columeTypeArr" :key="index" :label="item.label" :value="item.value">
           </el-option>
  </el-select>

This method requires defining columeTypeArr in data, as follows

data(){
    return {
       columeTypeArr:[{
            value:'String',
            label:'string'
        },{
            value:'Int',
            label:'integer',
        },{
            value:'Decimal',
            label:'numeric type'
        }],
    }
}

The second method is to use the dead writing method

Write it directly under select

  <el-select v-model="form.fileOrgType" placeholder="Please select">
        <el-option label="Yes" value="Y"> </el-option>
        <el-option label="No" value="N"></el-option>
  </el-select>

Comparison of the two methods:

The two methods are similar, except that the first method needs to be configured in data. If data needs to be echoed from the background, the first method is obviously better.

For a simple drop-down list with few parameters, the second method is clearly more advantageous.

Implementation of Vue drop-down menu component

Let's implement a Vue drop-down menu component.

There are already many basic UI components like this on the Internet, so why should we implement them ourselves? In fact, I don’t intend to reinvent the wheel, but I want to review some details and precautions of Vue component development through this process.

Why choose the Dropdown Menu component?

Because: Although small, it has all the necessary functions. This small component involves a lot of knowledge points in Vue component development.

Okay, let’s get started!

First, create a vue-cli project. I use vue-cli3. The creation process is omitted. Then create a vue component: DropDownList.vue

Before writing the template, let's analyze the view structure and functionality of this component.

The drop-down menu component should consist of two parts:

The text of the selected item

Selection menu (hidden by default)

Its main features include:

When the mouse passes over the drop-down menu component, the menu to be selected is displayed

Slide the mouse out of the drop-down menu component to hide the menu to be selected

When you click on an item in the selection menu, the text of the selected item is updated and the component dispatches a change event.

We write the following template:

<template>
  <div class="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
        <span>Text of the selected item<i></i></span>
        <ul>
            <li>Beijing</li>
            <li>Shanghai</li>
            <li>Guangzhou</li>
        </ul>
    </div>
</template>

The i tag to the right of the selected item text is used to implement the triangle icon of the drop-down menu. In the CSS below, we use the background image to implement it.

We have added callback functions for mouse over and mouse out to the root element div. See below for the specific implementation.

Next, we write a style for this drop-down menu and add a style tag below the template. In order to prevent conflicts with the styles of other components, I recommend that you add the scoped attribute to the style when developing components. In addition, the author used scss here, the specific code is as follows:

<style scoped lang="scss">
    .zq-drop-list{
        display: inline-block;
        min-width: 100px;
        position: relative;
        span{
            display: block;
            height: 30px;
            line-height: 30px;
            background: #f1f1f1;
            font-size: 14px;
            text-align: center;
            color: #333333;
            border-radius: 4px;
            i{
                background: url(https://www.easyicon.net/api/resizeApi.php?id=1189852&size=16) no-repeat center center;
                margin-left: 6px;
                display: inline-block;
            }
        }
        ul{
            position: absolute;
            top: 30px;
            left: 0;
            width: 100%;
            margin: 0;
            padding: 0;
            border: solid 1px #f1f1f1;
            border-radius: 4px;
            overflow: hidden;
            li{
                list-style: none;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                border-bottom: solid 1px #f1f1f1;
                background: #ffffff;
            }
            li:last-child{
                border-bottom: none;
            }
            li:hover{
                background: #f6f6f6;
            }
        }
    }
</style>

Regarding the style, I will not go into detail here, but just mention a few points that need attention:

For the style of the i element, I used an image from the Internet. You can change it yourself.

The ul of the selection menu is not hidden in the css, because we want to control it through js. The specific reasons are as follows

The selection menu ul uses absolute positioning because when it is expanded, it should not affect the layout of other elements on the page.

Now the component looks like this:

We continue to define properties for this component. Obviously, the menu to be selected should be passed in as a property and must not be hard-coded internally. The property definition is as follows:

<script>
export default {
    name: "DropDownList",
    props:{
        dataList:{
            type:Array,
            default(){
                return [
                    {name: "Option 1"},
                    {name: "Option 2"}
                ]
            }
        },
        labelProperty:{
            type:String,
            default(){ return "name" }
        }
    },
    data(){
        return {
            activeIndex:0
        }
    },
}

Among them, dataList is the data source attribute of the menu to be selected. Here we define a default value for this attribute. This is also a habit that the author recommends that you develop. As a component, it is best to have a default value, because when others use your component, they can see the effect of a finished product without setting the relevant attributes first, and can also quickly view the data details of the attributes required by your component.

Another attribute is labelProperty. What is the function of this attribute? The data sources in our actual projects do not necessarily contain the name field, which may cause the drop-down menu to fail to render the data text. Therefore, we define this attribute to specify the field where the actual data source renders the text. This field must be a string. The default value of this property is name, because it needs to be consistent with the default data source. I believe you have also seen a component internal data, activeIndex, which is used to indicate the index of the currently selected item, which we will use later.

Now we can import and use this component elsewhere. Although it is not yet complete, let's display it on the interface first:

<template>
  <div class="home">
    <DropList :dataList="dplist" labelProperty="city" @change="onDpChange($event)"></DropList>
    <p>Other text content</p>
  </div>
</template>
<script>
  import DropList from '@/components/DropDownList.vue'
  //Other codes are omitted</script>

This page introduces and uses our DropDownList component. :dataList="dplist" binds the dplist array of the current page to the dataList property of the component. The objects in this array have a city field. We hope that this field will be displayed in the drop-down menu, so we set the component's labelProperty to city. We also register the change event for this component. This event needs to be dispatched internally, as shown below.

Now let's go back to the template part of the component and find that it is still static content. We modify these static contents to be rendered through attributes.

<template>
    <div class="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
        <span>{{dplLable}}<i></i></span>
        <ul>
            <li v-for="(item, index) in dataList" :key="index" @click="onLiClick(index, $event)">{{item[labelProperty]}}</li>
        </ul>
    </div>
</template>

The text of the selected menu li is item[labelProperty], so that the field specified by the developer can be displayed correctly.

Let's look at the text expression of the selected item: dplLabel. We have not defined this attribute, nor this internal data. Where does it come from? The text of the selected item should be dataList[activeIndex][labelProperty] (this is easy to understand, please leave a message if you have any questions), but this expression is too long and it is not easy to maintain if written in the template, so we will write it in the calculated property.

computed:{
        dplLabel(){
            return this.dataList[this.activeIndex][this.labelProperty]
        }
    }

So we have the dplLabel above. The calculated properties are really useful.

Now that we have written the view and data association part of the drop-down menu, we need to implement its functionality.

The first step is to hide the selection menu by default. Why don’t we just use CSS display:none here, and then use display:block when the mouse passes over it? Because of this, we cannot hide the menu item when clicking it, which is a bad experience. We use js to control it, but Vue does not support direct access to DOM elements very well. If we want to access DOM elements when the component is initialized, there is a most convenient way, that is: custom instructions.

We add a local custom instruction to the drop-down menu component. The code is as follows:

directives:{
        dpl:{
            bind(el){
                el.style.display = "none";
            }
        }
    },

This dpl is a custom instruction, please ignore my clumsy naming! Then we access the el element in the bind method of the custom instruction's hook function and control its style attribute display:none; finally, add this custom instruction to the ul tag in the template. Don’t forget to add v-. Now look at the effect. The selection menu has been hidden.

<ul v-dpl>

We use custom instruction hook functions to access DOM elements and achieve control over DOM, which is very practical!

Let's continue to implement the mouse over and mouse out monitoring defined at the beginning for the drop-down menu, and realize the display and hiding of the selected menu.

onDplOver(event){
    let ul = event.currentTarget.childNodes[1];
    ul.style.display = "block";
},
onDplOut(event){
    let ul = event.currentTarget.childNodes[1];
    ul.style.display = "none";
},

In a mouse event, we access the currentTarget object of event, why is it not target? Because the child elements of the drop-down menu will also trigger this event, if we access the target, it may not be the top-level element we expect.

In the last step, we implement the click event of the selected menu item. After clicking, the selected menu is hidden, the internal state is modified, and the change event is dispatched.

onLiClick(index){
    let path = event.path || (event.composedPath && event.composedPath()) //Compatible with Firefox and Safari
    path[1].style.display = "none";
    this.activeIndex = index;
    this.$emit("change", {
        index:index,
        value:this.dataList[index]
    })
}

There is a detail to note here. We need to find the outer ul element through the li element, but path does not support Firefox and Safari. Fortunately, these two browsers support composedPath, so the first line of code is compatible. Then update the selected item text by modifying the internal data activeIndex, and finally call the emit method to dispatch a change event to the parent element. Don't forget to encapsulate the event object and pass it out.

The complete code is as follows:

<template>
    <div class="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
        <span>{{dplLable}}<i></i></span>
        <ul v-dpl>
            <li v-for="(item, index) in dataList" :key="index" @click="onLiClick(index, $event)">{{item[labelProperty]}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "DropDownList",
    data(){
        return {
            activeIndex:0
        }
    },
    props:{
        dataList:{
            type:Array,
            default(){
                return [
                    {name: "Option 1"},
                    {name: "Option 2"}
                ]
            }
        },
        labelProperty:{
            type:String,
            default(){ return "name" }
        }
    },
    directives:{
        dpl:{
            bind(el){
                el.style.display = "none";
            }
        }
    },
    methods:{
        onDplOver(event){
            let ul = event.currentTarget.childNodes[1];
            ul.style.display = "block";
        },
        onDplOut(event){
            let ul = event.currentTarget.childNodes[1];
            ul.style.display = "none";
        },
        onLiClick(index){
            let path = event.path || (event.composedPath && event.composedPath()) //Compatible with Firefox and Safari
            path[1].style.display = "none";
            this.activeIndex = index;
            this.$emit("change", {
                index:index,
                value:this.dataList[index]
            })
        }
    },
    computed:{
        dplLabel(){
            return this.dataList[this.activeIndex][this.labelProperty]
        }
    }
}
</script>

<style scoped lang="scss">
    .zq-drop-list{
        display: inline-block;
        min-width: 100px;
        position: relative;
        span{
            display: block;
            height: 30px;
            line-height: 30px;
            background: #f1f1f1;
            font-size: 14px;
            text-align: center;
            color: #333333;
            border-radius: 4px;
            i{
                background: url(https://www.easyicon.net/api/resizeApi.php?id=1189852&size=16) no-repeat center center;
                margin-left: 6px;
                display: inline-block;
            }
        }
        ul{
            position: absolute;
            top: 30px;
            left: 0;
            width: 100%;
            margin: 0;
            padding: 0;
            border: solid 1px #f1f1f1;
            border-radius: 4px;
            overflow: hidden;
            li{
                list-style: none;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                border-bottom: solid 1px #f1f1f1;
                background: #ffffff;
            }
            li:last-child{
                border-bottom: none;
            }
            li:hover{
                background: #f6f6f6;
            }
        }
    }
</style>

The above shows you how to implement a drop-down menu component in Vue. Although it is relatively simple, it basically involves some common features of component development. I hope this can provide you with a reference, and I also hope that you will support 123WORDPRESS.COM.