恰好写过。
ng的组件分为两种形式,一种是用directive封装的custom element形式的component,比如Button、Tooltip这种;另外一种则是以Service形式封装成一个单例的object由angular的IoC注入到controller中,比如notification、或者你需要的modal。
首先要为modal服务设计API,比如modal.open modal.close, 然后要为弹出的modal设计遮罩层,并且确定当同时有多个modal出现在页面上时,遮罩层唯一。
其次,出于ng的特殊性,每次open一个新modal时,都需要利用ng内置的$compile服务对modal内的模板进行编译,并且为了支持controllerAs的关键词,这部分连接需要手动在服务中处理(具体怎么处理百度一下吧,很容易)
以下是我当初设计时写的一些参数,或许你可以参照。
API:.open(options) => Modal Object Instance
options ::= {
template: String | dom<class|Id>,
className: String,
scope: AngularScope,
hooks:{
onOpen: Function,
onClose: Function
},
controller:String,
controllerAs:String,
title: String
}
.closeAll
.close(id)
id ::= Number
额外的,这里有一个简单的实现,供你参考https://github.com/btford/angular-modal/blob/master/modal.js
一. layer简介
layer是一款基于jquery的弹窗插件,浏览器兼容性很好,功能强大。
通过研究官方示例,发现使用layer分2步:
1.引入js:(jquery在前)
2. 写layer的函数:
二. 初步使用研究
1. title,maxmin,area:
2. end, layer.alert:
3. type和content:
type取值0-4共5个值。他的含义是弹窗的类型。最常用的是0,1,2.
1)type=0,content里面直接写提示的信息。
2)type=1,content里面写的是对象。将对象的内容弹出。
3)type=2,content里面写的网页的路径。将网页弹出。
-modules:放置模块的文件夹,里面有一个 alert 文件夹,用于存放 alert 插件 ; -Alert.vue:就是我们要在多处用到提示弹窗组件; -index.js:对于该自定义插件的一些配置; 1.alert 2.confirm原文 https://blog.csdn.net/sinat_40697723/article/details/106036056