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 相关文章推荐
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
详释JavaScript执行环境与执行栈
Apr 02 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
详解python中的json的基本使用方法
2016/12/21 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
python 解压pkl文件的方法
2018/10/25 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
python实现程序重启和系统重启方式
2020/04/16 Python
详解python中的异常和文件读写
2021/01/03 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
会计岗位职责范本
2014/03/07 职场文书
少先队工作总结2015
2015/05/13 职场文书
MySQL基础(二)
2021/04/05 MySQL
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
python 详解turtle画爱心代码
2022/02/15 Python