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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
javascript 闭包详解
Feb 15 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
vue 实现特定条件下绑定事件
Nov 09 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 图片加水印与上传图片加水印php类
2010/05/12 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
php类常量用法实例分析
2015/07/09 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
JavaScript字符串对象
2017/01/14 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
python简单分割文件的方法
2015/07/30 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
Python3 中文文件读写方法
2018/01/23 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
numpy.random模块用法总结
2019/05/27 Python
Python Collatz序列实现过程解析
2019/10/12 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
html5时钟实现代码
2010/10/22 HTML / CSS
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
大学生入党思想汇报
2014/01/14 职场文书
大学生创业项目方案
2014/03/08 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
关于爱国的标语
2014/06/24 职场文书
2014年残联工作总结
2014/11/21 职场文书
语文复习计划
2015/01/19 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python