css 弹框-vue实现弹框

vue实现弹框

课程项目中需要设计一些弹出框，我们的项目设计后端使用的是Vue框架。 为此，我们学习了如何制作一个弹出框，即点击一个按钮，就会弹出一个框。 这里说一下自己的实现经历吧。

参考博客：

实验效果

最终的疗效应该如右图所示。 感觉有点窄，勉强能满足工作要求。 疗效图如下：

点击快速查询按钮后，会弹出一个子组件，也就是之前的框。

简单的想法

首先我们创建两个.vue文件，我们分别称之为main.vue和dialog.vue，main.vue是我们要显示的主页面css 弹框，dialog.vue是组件的组件。

步骤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文件中导入相应的组件，然后在组件中进行注册css 弹框，然后在需要显示的地方添加标签。 这是第一步完成的，可以在组件内部添加相应的参数，用于与子组件进行通信。 一些参数信息如下：

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);
    }
},

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

之后，只需在组件内写入您需要的内容并显示即可。 大致的思路是这样的。