如何用Vue技术实现多样化的弹出框组件设计？

本文共计915个文字，预计阅读时间需要4分钟。

简单介绍一下Vue中常用Dialog组件的封装：实现动态传入内容，实现取消、确认等回调函数。首先写一个基本的弹窗样式，如图所示。在需要使用弹窗的地方引入组件：import Dialog。

简单介绍一下vue中常用dialog组件的封装：

实现动态传入内容，实现取消，确认等回调函数。

首先写一个基本的弹窗样式，如上图所示。

在需要用到弹窗的地方中引入组件：

import dialogBar from './dialog.vue' components:{ 'dialog-bar': dialogBar, }, <dialog-bar></dialog-bar>

点击一个按钮显示弹窗，并保证关闭弹窗后再次点击依旧显示

在弹窗组件中定义一个value值：v-model="sendVal"，sendVal初始值为false。

在打开弹窗的方法中赋值：

openMask(){ this.sendVal = true; }

在dialog.vue组件中做如下操作：

props: { value: {} // 注意此处获取的value对应的就是组件标签中的v-model }

定义一个showMask变量用于控制是否显示弹窗

mounted(){ this.showMask = this.value; // 在生命周期中，把获取的value值获取给showMash }, watch:{ value(newVal, oldVal){ this.showMask = newVal; // 监测value的变化，并赋值。 }, showMask(val) { this.$emit('input', val); // 此处监测showMask目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。