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 渐变下拉菜单
Dec 15 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
vue如何截取字符串
May 06 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读MYSQL中文乱码的解决方法
2006/12/17 PHP
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
Python中内建函数的简单用法说明
2016/05/05 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
python dlib人脸识别代码实例
2019/04/04 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
土地租赁意向书
2014/07/30 职场文书
查摆剖析材料范文
2014/09/30 职场文书
实习介绍信模板
2015/01/30 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL