Vue实现弹框

Vue实现弹框

课程项目中需要设计一些弹出框，而我们的项目设计前端用的是Vue框架，因此学习了下怎么制作一个弹框，即点击某个按钮，然后就会弹出一个框，在这里说一下自己的实现心得。

参考博客：https://blog.csdn.net/qq_33599109/article/details/79883766

---

实验效果

最终达到的效果应该是下图所示，感觉有点简陋，但是勉强能够达到作业要求，效果图如下所示：

点击快递查询的按钮以后，就能够弹出一个子组件，也就是上面这个框框。

---

简单思路

首先我们先生成两个.vue文件，我们暂且称之为main.vue和dialog.vue吧，main.vue就是我们要显示的主页面，dialog.vue就是组件的成分。

Step 1

首先我们要引入组件，在main.vue文件中的

<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>

在上述代码中，首先我们需要从dialog.vue文件中引入相应的组件，然后在components中进行注册，然后在需要显示地方加入标签即可，这是完成的第一步，在组件的内部可以加入相应的参数来进行与子组件的沟通，参数的一些信息如下：

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

其次，我们需要定义一个按钮，用于触发这个事件：

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

上述代码中，click函数用于修改queryVal的值，queryVal的值默认为false，表示不显示弹框，点击后会变成true，并且传递给子组件，进行显示弹框，因此在子组件中需要监测它的值：

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

Step 2

在dialog.vue文件中，根据main.vue文件中传进来的type的类型，通过v-if来判断是否生成相应的子组件，title的值就是我们刚才传进来的值：

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

然后在组件内部写自己需要的内容就可以了显示了，大致是这么个思路吧。