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 相关文章推荐
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
基于javascript编写简单日历
May 02 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
vuex存储token示例
Nov 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
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
python实现的系统实用log类实例
2015/06/30 Python
Python3实现Web网页图片下载
2016/01/28 Python
python:接口间数据传递与调用方法
2018/12/17 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
python3实现弹弹球小游戏
2019/11/25 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
小学数学课后反思
2014/04/23 职场文书
项目验收申请报告
2015/05/15 职场文书
java代码实现空间切割
2022/01/18 Java/Android