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 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
网络传输协议(http协议)
Nov 18 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
vue组件name的作用小结
May 23 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 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
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
php curl_init函数用法
2014/01/31 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
Python程序员面试题 你必须提前准备!
2018/01/16 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
德国网上宠物店:Zoobio
2018/05/23 全球购物
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
临床医学应届生求职信
2013/11/06 职场文书
现金出纳岗位职责
2014/03/15 职场文书
毕业留言寄语大全
2014/04/10 职场文书
成立公司计划书
2014/05/07 职场文书
英语教师自荐信
2014/05/26 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript