简要介绍vue常用的对话框组件包；

实现动态传入内容、取消、确认等回调功能。

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

介绍需要弹出窗口的组件：

从“”导入对话框栏。/dialog . vue ' components : { ' dialog-bar ' 3360 dialog-bar，}，dialog-bar/dialog-bar单击一个按钮以显示弹出窗口，并确保在关闭弹出窗口后它仍然显示

在弹出组件中定义了一个值值：v-model='sendVal '，sendVal的初始值为false。

在打开弹出窗口的方法中，分配值：

openMask(){ this . send val=true；}在dialog.vue组件中执行以下操作：

prop : { value : } }//注意，这里得到的值对应于组件标签中的v型。定义一个showMask变量来控制是否显示弹出窗口。

mounted(){ this . show mask=this . value；//在生命周期中，获取获取的值到showmash}，watch: {value (newval，oldval) {this。showmask=newval//监控值的变化并赋值。}，showMask(val) { this。$emit('input '，val)；//这里监控showMask的目的是在关闭弹出窗口时替换值，注意emit的事件必须输入。}}，如果你想关闭弹出窗口，你只需要定义一个方法：

closeMask(){ this . show mask=false；}，现在可以显示弹出窗口并退出。

我们接下来要实现的是动态添加标题、内容等。并将标题和内容添加到组件标签中：

对话框栏title='我就是标题' content='我就是内容'/对话框栏可以用vue的数据双向绑定来代替标题和内容。

在dialog.vue中获取内容：

props: { value: {、content: { type: String、default: '' }、title: { type: String、default: '' }、}、Div class=' dialog-title ' { title } }/Div class=' content ' v-html=' content '/Div我们可以使用相同的原理在不同的按钮中获取自定义名称。

接下来，我们使用传入的不同类型来标识不同的按钮，并提供不同的回调函数。

对话框栏标题='我是标题'内容='我是内容'类型='危险' dangerText='这是删除按钮'/对话框栏如果传入的类型是危险，我们可以从dialog.vue中的道具获取类型，并定义一个按钮如下：

div v-if=' type=' danger ' ' class=' danger-BTN ' @ click=' danger TN ' { { danger text } }/divdanger TN(){ this。$emit('危险')；//发送危险事件作为回调函数this . closemask()；//关闭弹出窗口}，在标签中定义危险回调，并做一些操作：

对话框栏标题='我就是标题'内容='我就是内容'类型='危险' dangerText='这是删除按钮' @ danger=' click danger()'/对话框-barclickdanger () {console.log('这里是回调函数')}，同样的原理可以用来获取和添加一些其他的

Props: { value: {、//类型包括默认默认、危险、确认、type: {type: string，default :' default'}、content: { type: String，default: '' }、title: { type: String，default 3: ' ' }、confirm text 3: { type 33: String，Default: ' confirm=' confirm ' ' class=' default-BTN ' @ Click=' closeBtn ' { { cancelText } }/div div v-if=' type=' danger ' ' class=' danger-BTN ' @ Click=' dangerBtn ' { { dangerText } }/div div v v-if=' type=' confirm ' ' class=' confirm-BTN ' @ Click=' confirm BTN ' { confirm text } }/div/div单击此处转到github下载弹出代码：https://github.com/wwjhzc/vue-dialog

摘要

以上是使用vue实现各种弹出组件的介绍。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！