基本上每个项目都需要用到模态框组件，由于在最近的项目中，alert组件和confirm是两套完全不一样的设计，所以我将他们分成了两个组件，本文主要讨论的是confirm组件的实现。
组件结构
<template> <div v-show="show" transition="fade"> <div> <div> <!--头部--> <div> <slot> <p>{{modal.title}}</p> </slot> <a v-touch:tap="close(0)" href="javascript:void(0)"></a> </div> <!--内容区域--> <div> <slot> <p>{{modal.text}}</p> </slot> </div> <!--尾部,操作按钮--> <div> <slot> <a v-if="modal.showCancelButton" href="javascript:void(0)" v-touch:tap="close(1)">{{modal.cancelButtonText}}</a> <a v-if="modal.showConfirmButton" href="javascript:void(0)" v-touch:tap="submit">{{modal.confirmButtonText}}</a> </slot> </div> </div> </div> </div> <div v-show="show" 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广播下去