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 相关文章推荐
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
jquery实现拖动效果
Aug 10 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
js表达式与运算符简单操作示例
Feb 15 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中判断变量为空的几种方法分享
2013/08/26 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
python多线程并发及测试框架案例
2019/10/15 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
python 实现端口扫描工具
2020/12/18 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
煤矿班组长的职责
2013/12/25 职场文书
教师专业自荐信
2014/05/31 职场文书
实习护士自荐信
2014/06/21 职场文书
春游踏青活动方案
2014/08/14 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
小学教师求职信范文
2015/03/20 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书