用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;
},
},
},
这里定义了接口的参数,可以自定义标题、内容、是否显示按钮和按钮的样式,用一个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实现模态框组件的更多相关文章
- Angular2+之模态框-使用ngx-bootstrap包中的模态框组件实现
模态框是项目中经常会用到的一个公共功能,通常会被用左提示框或者扩展选项框. 下面,我用一个小例子来简单展示实现模态框功能的过程: 1.为项目加包: ng add ngx-bootstrap 2.在xx ...
- 教你使用HTML5原生对话框元素,轻松创建模态框组件
HTML 5.2草案加入了新的dialog元素.但是是一种实验技术. 以前,如果我们想要构建任何形式的模式对话框或对话框,我们需要有一个背景,一个关闭按钮,将事件绑定在对话框中的方式安排我们的标记,找 ...
- 解决vue中模态框内数据和外面的数据绑定的问题
1.做表格的修改,把整条数据传到模态框做修改,但是出现模态框改变数据没有保存时,表格的数据也会跟着改变,我想实现保存以后表格数据才会改变的功能. html:使用item整条数据都上传过去了,在upda ...
- vue 自定义modal 模态框组件
参数名 类型 说明 visible Boolean 是否显示,默认false title String 标题 update:visible Boolean 更新visible, 使用:visible. ...
- 打造 Vue.js 可复用组件
Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日益庞大,组 ...
- vue2.X 自定义 模态框 modal
1.自定义 modal Modal.vue <!-- 模态框 --> <template> <div class="modal-mask" v-sho ...
- 用jQuery写了一个模态框插件
用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...
- 每日质量NPM包模态框_react-modal
一.react-modal 官方定义: Accessible modal dialog component for React.JS 理解: 一个容易使用的React模态框组件 二.用法 有时候我们不 ...
- 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框
vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...
随机推荐
- Security Configuration and Auditing Scripts for Oracle E-Business Suite (文档 ID 2069190.1)
This document provides the security configuration and auditing scripts for Oracle E-Business Suite. ...
- linux-9基本命令之-查看系统负载 uptime
uptime 查看系统负载 uptime @1.查看每一秒的刷新一次系统负载运行情况 [root@localhost /]# watch -n uptime 系统当前时间 系统已运行时间 ...
- Node.js系列之node.js初探
官方介绍:Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable n ...
- EntityFunctions.AsNonUnicode
http://blog.csdn.net/zzx3q/article/details/7863797 使用工具VS2010 凡是调用FindAll的地方,如果传入参数是String类型的变量(数字类型 ...
- AlwaysOn 同步时间的测试
背景 <SQL Server 2012实施与管理实战指南>中指AlwaysON同步过程如下: 任何一个SQL Server里都有个叫Log Writer的线程,当任何一个SQL用户提交一个 ...
- 坑爹的BufferManager
特别记录一下 国内外各种关于 Socket 的例子或开源项目,大部分都采用了 BufferManager.cs(代码类似). 也不知道是哪一个坑货写的.有一定几率会导致内存无法复用,导致数据是上一个的 ...
- 作业七:团队项目——Alpha版本冲刺阶段-10
部分代码: public void run(){ while (true){ //单击棋子第一下开始闪烁 if (chessManClick){ play[Man].setVisible(false) ...
- Entity Framework 5.0系列之约定配置
Code First之所以能够让开发人员以一种更加高效.灵活的方式进行数据操作有一个重要的原因在于它的约定配置.现在软件开发越来复杂,大家也都试图将软件设计的越来越灵活,很多内容我们都希望是可配置的, ...
- AlwaysON同步的原理及可用模式
新一代读写分离技术——AlwaysOn 早在SQL Server 2005的时候微软就已经实现了数据库的查询分离技术——发布订阅.但生产库和查询库的同步性能较差,时常出现性能问题,因此在大型生产环境中 ...
- 目前在做的一个web应用程序的前端选型
最近进入了一个新的项目组,要新起一个项目.这个Web项目是一个企业内部使用的系统,主要用来记录.追踪.管理潜在客户的数据.该系统有以下特点: 需要支持IE10及以上版本: 后端采用micro serv ...