vue-dialog的弹出层组件


Posted in Javascript onMay 25, 2020

本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用。

功能说明

多层弹出时,只有一个背景层。
弹出层嵌入内部组件。
弹出层按钮支持回调
源码下载

实现

vue-dialog的弹出层组件

多层弹出时,只有一个背景层

利用两个组件实现,一个背景层组件(只提供一个背景层,组件名:background.vue),一个弹出层内容管理组件(实现多个内容层的管理,组件名:master.vue)。

弹出层嵌入内部组件

使用vue的component组件实现,他可以完美支持。

弹出层按钮支持回调

在master.vue中实现,详细解析此代码

html代码

<template>
 <div> 
 <div class="modal-content" v-for="(comp,index) in comps" v-bind:style="style(index,comp)" >
 <div class="modal-header" >
 header
 </div>
 <div class="modal-body">
 <component :is="comp"></component>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" v-on:click="clickHandler(btn.value, comp, index)" v-for="btn in btns" >{{btn.text}}</button>
 </div>
 </div> 
 <hDialogBack ref="back" v-bind:z-index="realIndex-1" ></hDialogBack>
 </div>
</template>

comps:内部组件的集合
realIndex:一个computed属性,读取props的mIndex属性,表示内部层的zIndex层级关系。
component加载组件
btns:表示按钮的集合,现还不支持组件独立配置按钮列表。
style:此方法用于生成内部组件居中的css代码。

js代码:

<script>
import hDialogBack from './background'

function getclientPoint () {
 return {
 width: document.documentElement.clientWidth || document.body.clientWidth,
 height: document.documentElement.clientHeight || document.body.clientHeight
 }
}

export default {
 name: 'HDialog',
 data () {
 return {
 comps: []
 }
 },
 props: {
 'btns': {
 type: Array,
 default: function () {
 return [{ text: 'ok', value: 'ok'}, { text: 'cancel', value: 'cancel'}]
 }
 },
 'mIndex': {
 type: Number,
 default: 19861016
 }
 },
 computed: {
 realIndex: function () {
 return this.mIndex
 }
 },
 components: {
 hDialogBack
 },
 methods: {
 open: function (comp) {
 comp.promise = new Promise(function (resolve, reject) {
 comp.resolve = resolve
 comp.reject = reject
 })
 comp.width = comp.width || 600
 comp.height = comp.height || 400
 this.comps.push(comp)
 if (!this.$refs.back.show) {
 this.$refs.back.open()
 }
 return comp.promise
 },
 clickHandler: function (type, comp, index) {
 let self = this
 let close = function () {
 self.comps.splice(index, 1)
 if (self.comps.length === 0 && self.$refs.back.show) {
 self.$refs.back.close()
 }
 }
 /** 只提供promise模式 */
 comp.resolve({'type': type, 'close': close})
 },
 style: function (index, comp) {
 let point = getclientPoint()
 return {
 zIndex: this.realIndex + index,
 width: comp.width + 'px',
 height: comp.height + 'px',
 left: ((point.width - comp.width) / 2) + 'px',
 top: ((point.height - comp.height) / 2) + 'px'
 }
 }
 }
}
</script>

open方法,用于打开弹出层,且返回一个Promise。

嵌入background.vue组件,用于提供背景层。

clickHandler方法:master.vue组件按钮的事件响应函数,会resolve在open方法中提供的promise。

css代码:

<style>
.modal-content {
 position: absolute;
}
</style>

如何实用

首先需要在顶层引入master.vue,然后嵌入到与app组件平级,如下代码:

new Vue({
 el: '#app',
 template: '<div><App></App><HDialog ref="hDialog" ></HDialog></div>',
 components: { App }
})

一定要指定ref值,这是弹出层实现的关键。

在任意一个子组件中如下使用:

let promise = this.$root.$refs.hDialog.open({
 template: '<div>第二层了</div>'
 })
 promise.then(function (arg) {
 alert('第二层' + arg.type)
 arg.close()
})

使用$root.$refs找到弹出层管理组件

使用调用其open方法,并接受一个promise类型的返回值

使用promise即可。

发布到npm

如果组件需要被其他人引用,最好使用commonjs2规范,webapck如下配置:

output: {
path: './dist',
filename: '[name].js',
library: 'vue-hdialog',
libraryTarget: 'commonjs2'
}
  • 在npmjs上注册一个账号
  • 利用npm login 登录
  • 使用npm publish 发布,如果你想卸载可以用npm unpublish --force.
  • 发布是需要package.json检测version和name字段,如果已存,或者是存在被卸载的都不行。
  • package.json中的main节点是指定其他引用时,默认导出的文件。

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

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

更多vue学习教程请阅读专题《vue实战教程》

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

Javascript 相关文章推荐
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 #Javascript
基于Bootstrap的网页设计实例
Mar 01 #Javascript
JS中的作用域链
Mar 01 #Javascript
javascript html5轻松实现拖动功能
Mar 01 #Javascript
详解数组Array.sort()排序的方法
May 09 #Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 #Javascript
javascript中replace使用方法总结
Mar 01 #Javascript
You might like
PHP如何得到当前页和上一页的地址?
2006/11/27 PHP
php去除HTML标签实例
2013/11/06 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
jQuery中after的两种用法实例
2013/07/03 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
javascript实现简易计算器
2017/02/01 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
Python面向对象特殊成员
2017/04/24 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
SQL数据库笔试题
2016/03/08 面试题
互联网创业计划书的书写步骤
2014/01/28 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
消防隐患整改通知书
2015/04/22 职场文书
社区敬老月活动总结
2015/05/07 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
python实现的人脸识别打卡系统
2021/05/08 Python
javascript canvas实现雨滴效果
2021/06/09 Javascript