Vue implements pop-up box

Vue implements pop-up box

Some pop-up boxes need to be designed in the course project, and the front end of our project design uses the Vue framework, so I learned how to make a pop-up box, that is, click a button, and then a box will pop up, let me talk about my own here. Realize the experience.

Reference blog: https://blog.csdn.net/qq_33599109/article/details/79883766


Experimental effect

The final effect should be as shown in the figure below, which feels a bit rudimentary, but barely able to meet the job requirements. The renderings are as follows:

insert image description here

After clicking the button of express query , a sub-component will pop up, which is the box above.


simple idea

First, let's generate two .vue files. Let's call them main.vue and dialog.vue for now. main.vue is the main page we want to display, and dialog.vue is the component of the component.

Step 1

First we have to introduce components, in the main.vue file

<template>
    <div>
	<dialog-bar v-model="queryVal" 
				type="query" 
				title="查询快递"      
				@query="queryFunction()">
    </dialog-bar>
    </div>
</template>

<script>
    import dialogBar from './dialog.vue'
	export default {
    
    
        // 引入组件
        components: {
    
    
            'dialog-bar': dialogBar
        }
    }
</script>

In the above code, first we need to import the corresponding components from the dialog.vue file, then register them in components, and then add labels where they need to be displayed. This is the first step to be completed. It can be added inside the component. Corresponding parameters are used to communicate with subcomponents. Some information of the parameters is as follows:

1. v-model="queryVal" 		// 进行两个组件之间的一些信息沟通,v-model的值会在子组件中的value{}
2. type="accept":			// 定义弹框的类型,以在子组件中判断需要显示的框
3. @query="queryFunction(): // 定义一个回调函数
4. title="接受成功":		 // 传递title信息,显示弹框的title

Second, we need to define a button that will trigger this event:

<button id="submit" class="btn" @click="openQuery">确定快递</button>

In the above code, the click function is used to modify the value of queryVal. The value of queryVal is false by default, which means that the pop-up box is not displayed. After clicking, it will become true and passed to the sub-component to display the pop-up box, so it needs to be in the sub-component. Monitor its value:

watch:{
    
    
    value(newVal, oldVal){
    
    
        this.showMask = newVal;
    },
    showMask(val) {
    
    
        this.$emit('input', val);
    }
},

Step 2

In the dialog.vue file, according to the type of the type passed in in the main.vue file, v-if is used to determine whether to generate the corresponding subcomponent. The value of title is the value we just passed in:

<div class="dialog-container-query" v-if="type == 'query'">
    <div class="dialog-title-query">{
    
    {
    
    title}}</div>
</div>

Then write the content you need inside the component to display it, which is roughly the way of thinking.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324151779&siteId=291194637