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


Posted in Javascript onJuly 26, 2017

前言

在开发项目的过程中,经常会需要开发一些弹出框效果,但原生的alert和confirm往往都无法满足项目的要求。这次在开发基于Vue.js的读书WebApp的时候总共有两处需要进行提示的地方,因为一开始就没有引入其他的组件库,现在只好自己写一个模态框组件了。目前只是一个仅满足当前项目需求的初始版本,因为这个项目比较简单,也就没有保留很多的扩展功能。这个组件还是有很多扩展空间的,可以增加更多的自定义内容和样式。这里只介绍如何去开发一个模态框组件,有需要进行更多扩展的,可以根据自己的需求自行开发。

组件模板

<template>
<div class="dialog">
 <div class="mask"></div>
 <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.cancelButtonText }}</div>
   <div class="btn" @click="submit">{{ modal.confirmButtonText }}</div>
  </div>
 </div>
</div>
</template>

模态框结构分为:头部标题、提示内容和操作区域。同时一般还会有一个遮罩层。此次需求比较简单,也无需图标等内容,所以结构上写的也比较简单。实际开发中可根据需求对结构进行相应的调整。

组件样式

.dialog {
 position: relative;

 .dialog-content {
  position: fixed;
  box-sizing: border-box;
  padding: 20px;
  width: 80%;
  min-height: 140px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background: #fff;
  z-index: 50002;
  .title {
   font-size: 16px;
   font-weight: 600;
   line-height: 30px;
  }
  .text {
   font-size: 14px;
   line-height: 30px;
   color: #555;
  }
  .btn-group {
   display: flex;
   position: absolute;
   right: 0;
   bottom: 10px;
   .btn {
    padding: 10px 20px;
    font-size: 14px;
    &:last-child {
     color: #76D49B;
    }
   }
  }
 }
 .mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 50001;
  background: rgba(0,0,0,.5);
 }
}

样式比较简单,就不多说了。

组件接口

export default {
 name: 'dialog',
 props: {
  dialogOption: Object
 },
 data() {
  return {
   resolve: '',
   reject: '',
   promise: '', // 保存promise对象
  }
 },
 computed: {
  modal: function() {
   let options = this.dialogOption;
   return {
    title: options.title || '提示',
    text: options.text,
    cancelButtonText: options.cancelButtonText ? options.cancelButtonText : '取消',
    confirmButtonText: options.confirmButtonText ? options.confirmButtonText : '确定',
   }
  }
 },
 methods: {
  //确定,将promise断定为完成态
  submit() {
   this.resolve('submit');
  },
  // 取消,将promise断定为reject状态
  cancel() {
   this.reject('cancel');
  },
  //显示confirm弹出,并创建promise对象,给父组件调用
  confirm() {
   this.promise = new Promise((resolve, reject) => {
    this.resolve = resolve;
    this.reject = reject;
   });
   return this.promise; //返回promise对象,给父级组件调用
  }
 }

}

在模态框组件中定义了三个方法,核心的方法是confirm,此方法是提供给父级组件调用的,返回一个promise对象。使用promise对象主要是为了异步调用,因为很多时候我们使用模态框时需要根据返回结果再进行下一步处理。

扩展提示:

如果需要扩展的话,可以通过props的dialogOption传递更多的字段,在computed中进行判断,比如增加一个字段isShowCancelButton可以控制取消按钮是否显示。其他扩展同理。

调用

<v-dialog v-show="showDialog" :dialog-option="dialogOption" ref="dialog"></v-dialog>

this.showDialog = true;
this.$refs.dialog.confirm().then(() => {
 this.showDialog = false;
 next();
}).catch(() => {
 this.showDialog = false;
 next();
})

源码地址

Dialog组件源码

实现效果

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery下的动画处理总结
Oct 10 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
javascript控制台详解
Jun 25 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 Javascript
vue中template的三种写法示例
Oct 21 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 #Javascript
node实现简单的反向代理服务器
Jul 26 #Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 #Javascript
Vue中计算属性computed的示例解读
Jul 26 #Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 #Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 #Javascript
js实现图片轮播效果学习笔记
Jul 26 #Javascript
You might like
php日期操作技巧小结
2016/06/25 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
JavaScript 学习历程和心得分享
2010/12/12 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python pickle 和 shelve模块的用法
2013/09/16 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
python机器学习之神经网络实现
2018/10/13 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
python递归函数用法详解
2020/10/26 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
怎样在程序里获得一个空指针
2015/01/24 面试题
史上最全面的Java面试题汇总!
2015/02/03 面试题
财务管理专业应届毕业生求职信
2013/09/22 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
法人授权委托书样本
2014/09/19 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
Python实现自动玩连连看的脚本分享
2022/04/04 Python
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js