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>
之后,只需在组件内写入您需要的内容并显示即可。 大致的思路是这样的。
发表评论