利用vue实现模态框组件

基本上每个项目都需要用到模态框组件，由于在最近的项目中，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;  }, },},