Vue.js弹出模态框组件开发的示例代码
时间:2019-03-30
本文章向大家介绍Vue.js弹出模态框组件开发的示例代码,主要包括Vue.js弹出模态框组件开发的示例代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
在开发项目的过程中,经常会需要开发一些弹出框效果,但原生的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(); })
源码地址
实现效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- centos6下ActiveMQ+Zookeeper消息中间件集群部署记录
- 发布一个轻量级的滑块控件
- as3:sprite作为容器使用时,最好不要指定width,height
- openssl版本升级操作记录
- 清除浮动(clearfix hack)
- Linux下环境变量配置方法梳理(.bash_profile和.bashrc的区别)
- 小程序火爆的因素
- Log4Net使用心得
- nginx通过https方式反向代理多实例tomcat
- Linux系统下yum镜像源环境部署记录
- 特斯拉vs凯迪拉克vs奔驰:三大汽车自动驾驶系统比拼
- Centos下添加静态路由(临时和永久有效)的操作记录
- python如何保证输入键入数字
- 微信小程序自定义数据分析试水
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- TypeScript里的.d.ts语法
- 宋宝华:当Linux内核遭遇鲨鱼—kernelshark
- 基于Pytorch的动态卷积复现
- SAP Spartacus的StorefrontConfig对象
- Linux内核虚拟内存管理之匿名映射缺页异常分析
- Elasticsearch:如何把 Elasticsearch 中的数据导出为 CSV 格式的文件
- Nginx 负载均衡配置(实战教程)
- 教懂你什么是 “ 流量劫持 ”
- SAP Spartacus中使用到的Angular ModuleWithProviders类型
- 架构设计 | 基于消息中间件,图解柔性事务一致性
- 结构与算法(02):队列和栈结构
- 用Gaussian寻找圆锥交叉点
- kubernetes用户安全管理模型简析
- Unity3D网络通讯(一)--Asp.Net Core WebApi创建发布注意事项
- Unity3D网络通讯(二)--UnityWebRequest及JsonUtility请求Http Restful