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 相关文章推荐
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
Mar 16 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 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
2019十大人气国漫
2020/03/13 国漫
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
浅谈Python中数据解析
2015/05/05 Python
Python中的推导式使用详解
2015/06/03 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
python3获取当前目录的实现方法
2019/07/29 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
毕业生求职简历的自我评价
2013/10/07 职场文书
应聘教师自荐信
2013/10/12 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
求职简历自我评价范例
2014/03/12 职场文书
cf收人广告词大全
2014/03/14 职场文书
社会发展项目建议书
2014/08/25 职场文书
助学贷款贫困证明
2014/09/23 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python