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 相关文章推荐
关于document.cookie的使用javascript
Oct 29 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
jQuery中extend函数详解
Feb 13 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 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
wordpress之wp-settings.php
2007/08/17 PHP
mysql+php分页类(已测)
2008/03/31 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
可选择和输入的下拉列表框示例
2013/11/05 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
js里面的变量范围分享
2020/07/18 Javascript
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Django REST framework 分页的实现代码
2019/06/19 Python
python列表推导式操作解析
2019/11/26 Python
python关于调用函数外的变量实例
2019/12/26 Python
Python更换pip源方法过程解析
2020/05/19 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
Python 图片处理库exifread详解
2021/02/25 Python
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
银行介绍信范文
2014/01/10 职场文书
面试后感谢信
2014/02/01 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书