利用vue实现模态框组件


Posted in Javascript onDecember 19, 2016

基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现。

组件结构

<template>
 <div class="modal" v-show="show" transition="fade">
  <div class="modal-dialog">
   <div class="modal-content">
    <!--头部-->
    <div class="modal-header">
     <slot name="header">
      <p class="title">{{modal.title}}</p>
     </slot>
     <a v-touch:tap="close(0)" class="close" href="javascript:void(0)"></a>
    </div>
    <!--内容区域-->
    <div class="modal-body">
     <slot name="body">
      <p class="notice">{{modal.text}}</p>
     </slot>
    </div>
    <!--尾部,操作按钮-->
    <div class="modal-footer">
     <slot name="button">
      <a v-if="modal.showCancelButton" href="javascript:void(0)" class="button {{modal.cancelButtonClass}}" v-touch:tap="close(1)">{{modal.cancelButtonText}}</a>
      <a v-if="modal.showConfirmButton" href="javascript:void(0)" class="button {{modal.confirmButtonClass}}" v-touch:tap="submit">{{modal.confirmButtonText}}</a>
     </slot>
    </div>
   </div>
  </div>
 </div>
 <div v-show="show" class="modal-backup" transition="fade"></div>
</template>

模态框结构分为三部分,分别为头部、内部区域和操作区域,都提供了slot,可以根据需要定制。

样式

.modal {
 position: fixed;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 z-index: 1001;
 -webkit-overflow-scrolling: touch;
 outline: 0;
 overflow: scroll;
 margin: 30/@rate auto;
}
.modal-dialog {
 position: absolute;
 left: 50%;
 top: 0;
 transform: translate(-50%,0);
 width: 690/@rate;
 padding: 50/@rate 40/@rate;
 background: #fff;
}
.modal-backup {
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 1000;
 background: rgba(0, 0, 0, 0.5);
}

这里只是一些基本样式,没什么好说的,这次项目是在移动端,用了淘宝的自适应布局方案,@rate是切稿时候的转换率。

接口定义

/**
 * modal 模态接口参数
 * @param {string} modal.title 模态框标题
 * @param {string} modal.text 模态框内容
 * @param {boolean} modal.showCancelButton 是否显示取消按钮
 * @param {string} modal.cancelButtonClass 取消按钮样式
 * @param {string} modal.cancelButtonText 取消按钮文字
 * @param {string} modal.showConfirmButton 是否显示确定按钮
 * @param {string} modal.confirmButtonClass 确定按钮样式
 * @param {string} modal.confirmButtonText 确定按钮标文字
 */
props: ['modalOptions'],
computed: {
 /**
  * 格式化props进来的参数,对参数赋予默认值
  */
 modal: {
  get() {
   let modal = this.modalOptions;
   modal = {
    title: modal.title || '提示',
    text: modal.text,
    showCancelButton: typeof modal.showCancelButton === 'undefined' ? true : modal.showCancelButton,
    cancelButtonClass: modal.cancelButtonClass ? modal.showCancelButton : 'btn-default',
    cancelButtonText: modal.cancelButtonText ? modal.cancelButtonText : '取消',
    showConfirmButton: typeof modal.showConfirmButton === 'undefined' ? true : modal.cancelButtonClass,
    confirmButtonClass: modal.confirmButtonClass ? modal.confirmButtonClass : 'btn-active',
    confirmButtonText: modal.confirmButtonText ? modal.confirmButtonText : '确定',
   };
   return modal;
  },
 },
},

这里定义了接口的参数,可以自定义标题、内容、是否显示按钮和按钮的样式,用一个computed来做参数默认值的控制。

模态框内部方法

data() {
 return {
  show: false, // 是否显示模态框
  resolve: '',
  reject: '',
  promise: '', // 保存promise对象
 };
},
methods: {
 /**
  * 确定,将promise断定为完成态
  */
 submit() {
  this.resolve('submit');
 },
 /**
  * 关闭,将promise断定为reject状态
  * @param type {number} 关闭的方式 0表示关闭按钮关闭,1表示取消按钮关闭
  */
 close(type) {
  this.show = false;
  this.reject(type);
 },
 /**
  * 显示confirm弹出,并创建promise对象
  * @returns {Promise}
  */
 confirm() {
  this.show = true;
  this.promise = new Promise((resolve, reject) => {
   this.resolve = resolve;
   this.reject = reject;
  });
  return this.promise; //返回promise对象,给父级组件调用
 },
},

在模态框内部定义了三个方法,最核心部分confirm方法,这是一个定义在模态框内部,但是是给使用模态框的父级组件调用的方法,该方法返回的是一个promise对象,并将resolve和reject存放于modal组件的data中,点击取消按钮时,断定为reject状态,并将模态框关闭掉,点确定按钮时,断定为resolve状态,模态框没有关闭,由调用modal组件的父级组件的回调处理完成后手动控制关闭模态框。

调用

<!-- template -->
<confirm v-ref:dialog :modal-options.sync="modal"></confirm>
<!-- methods -->
this.$refs.dialog.confirm().then(() => {
 // 点击确定按钮的回调处理
 callback();
 this.$refs.dialog.show = false; 
}).catch(() => {
 // 点击取消按钮的回调处理
 callback();
});

用v-ref创建一个索引,就很方便拿到模态框组件内部的方法了。这样一个模态框组件就完成了。

其他实现方法

在模态框组件中,比较难实现的应该是点击确定和取消按钮时,父级的回调处理,我在做这个组件时,也参考了一些其实实现方案。

使用事件转发

这个方法是我的同事实现的,用在上一个项目,采用的是$dispatch和$broadcast来派发或广播事件。

首先在根组件接收dispatch过来的transmit事件,再将transmit事件传递过来的eventName广播下去

events: {
 /**
  * 转发事件
  * @param {string} eventName 事件名称
  * @param {object} arg  事件参数
  * @return {null}
  */
 'transmit': function (eventName, arg) {
  this.$broadcast(eventName, arg);
 }
},

其次是模态框组件内部接收从父级组件传递过来的确定和取消按钮所触发的事件名,点击取消和确定按钮的时候触发

// 接收事件,获得需要取消和确定按钮的事件名
events: {
 'tip': function(obj) {
  this.events = {
   cancel: obj.events.cancel,
   confirm: obj.events.confirm
  }
 }
}
// 取消按钮
cancel:function() {
 this.$dispatch('transmit',this.events.cancel);
}
// 确定按钮
submit: function() {
 this.$dispatch('transmit',this.events.submit);
}

在父级组件中调用模态框如下:

this.$dispatch('transmit','tip',{
 events: {
  confirm: 'confirmEvent'
 }
});
this.$once('confirmEvent',function() {
 callback();
}

先是传递tip事件,将事件名传递给模态框,再用$once监听确定或取消按钮所触发的事件,事件触发后进行回调。

这种方法看起来是不是很晕?所以vue 2.0取消了$dispatch和$broadcast,我们在最近的项目中虽然还在用1.0,但是也不再用$dispatch和$broadcast,方便以后的升级。

使用emit来触发

这种方法来自vue-bootstrap-modal,点击取消和确定按钮的时候分别emit一个事件,直接在组件上监听这个事件,这种做法的好处是事件比较容易追踪。

// 确定按钮
ok () {
 this.$emit('ok');
 if (this.closeWhenOK) {
  this.show = false;
 }
},
// 取消按钮
cancel () {
 this.$emit('cancel');
 this.show = false;
},

调用:

<modal title="Modal Title" :show.sync="show" @ok="ok" @cancel="cancel">
 Modal Text
</modal>

但是我们在使用的时候经常会遇到这样的场景,在一个组件的内部,经常会用到多个对话框,对话框可能只是文字有点区别,回调不同,这时就需要在template中为每个对话框都写一次,有点麻烦。

参考资料

vue.js dynamic create nest modal
es6 Promise对象
vue-bootstrap-modal

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
node实现基于token的身份验证
Apr 09 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
es6中let和const的使用方法详解
Feb 24 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
JS中如何实现复选框全选功能
Dec 19 #Javascript
BootStrapValidator校验方式
Dec 19 #Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 #Javascript
JavaScript中this的用法实例分析
Dec 19 #Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 #Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 #Javascript
快速入门Vue
Dec 19 #Javascript
You might like
如何去掉文章里的 html 语法
2006/10/09 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
显示、隐藏密码
2006/07/01 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
Python文件去除注释的方法
2015/05/25 Python
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
Python实现八大排序算法
2016/08/13 Python
python与C互相调用的方法详解
2017/07/14 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
python如何保证输入键入数字的方法
2019/08/23 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
《水乡歌》教学反思
2014/04/24 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
教师节标语大全
2014/10/07 职场文书
南湾猴岛导游词
2015/02/09 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang