开发Vue.js弹出模态框组件的示例代码

序

在开发一个项目的过程中，往往需要开发一些弹出效果，但是原来的提醒和确认并不能满足项目的要求。这次开发基于Vue.js的reading WebApp，有两个地方需要提示，因为一开始没有引入其他的组件库，现在要自己写一个模态盒组件。目前只是初步版本，只满足当前项目的需求，因为这个项目比较简单，所以没有保留很多扩展功能。这个组件还有很大的扩展空间，可以添加更多的自定义内容和样式。在这里，我们只介绍如何开发一个模态盒组件。如果需要更多的扩展，我们可以根据自己的需要进行开发。

组件模板

template div class=' dialog ' div class=' mask '/div class=' dialog-content ' H3 class=' title ' { modal . title } }/H3 P class=' text ' { modal . text } }/P div class=' BTN-group ' div class=' BTN ' @ click=' cancel ' { modal . cancelbutton text } }/div class=' BTN ' @ click=' submit ' { modal . confirm button text } }/div/div/div/template mode同时通常还有一个遮罩层。这个需求比较简单，不需要图标，所以结构比较简单。在实际开发中，可以根据需求调整结构。

组件样式。对话框{ position:相对；对话框内容{ position:固定；盒子尺寸：边框盒子；padding: 20px宽度：80%；最小高度： 140 px；左侧：50%；top : 50%；transform: translate(-50%，-50%)；border-radius : 5px；背景# fffz-index : 50002；title { font-size : 16px；font-weight : 600；线高： 30px；} .text { font-size : 14px；线高： 30px；color: # 555} .BTN-group { display : flex；绝对位置：right : 0；bottom: 10px。btn { padding: 10px 20pxfont-size : 14px； last-child { color : # 76D 49B；} } } } .掩模{位置：固定；top : 0；left : 0；bottom : 0；right : 0；z-index : 50001；background: rgba(0，0，0， 5)；}}风格比较简单，就不多说了。

组件接口

导出默认{ name: 'dialog '，prop : { dialog options : Object }，data() { return { resolve: ' '，reject: ' '，promise: ' '，//save promise object}}，computed : { modal : function(){ let options=this。对话框选项；返回{ title : options . title | | ' prompt '，text : options.text，cancel button text : options . cancel button text？选项。取消按钮文本：“取消”，确认按钮文本：选项。确认按钮文本？options . confirm buttontext : ' ok '，}} }，methods: {//ok，结束承诺为完成状态submit(){ this . resolve(' submit ')；}、//取消，判断承诺为拒绝状态cancel(){ this . reject(' cancel ')；}，//显示确认弹出窗口，创建承诺对象，并调用confirm () {this。promise=newpromise((解决，拒绝)={this。解决=解决；this.reject=拒绝；});归还这个。答应我；//返回promise对象并调用父组件。}}}模态框组件中定义了三种方法。核心方法是确认。此方法是为父组件提供的，用于调用并返回一个promise对象。使用promise对象的主要目的是异步调用，因为大多数时候当我们使用modal box时，我们需要根据返回的结果进行下一步。

展开提示：

如果需要扩展，可以通过道具的对话选项传递更多的字段，并在计算中进行判断。例如，添加一个字段isShowCancelButton可以控制是否显示取消按钮。其他扩展也是如此。

转移

v-dialog v-show=' show dialog ' : dialog-option=' dialog option ' ref=' dialog '/v-dialog this。显示对话框=真；这个$refs.dialog.confirm().然后(()={ this . showdialog=false next()；}).catch(()={ this。showdialog=falsenext()；}) 源码地址

对话组件源码

实现效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。