diff --git a/types/layui-layer/index.d.ts b/types/layui-layer/index.d.ts new file mode 100644 index 0000000000..7c5fabdb5b --- /dev/null +++ b/types/layui-layer/index.d.ts @@ -0,0 +1,540 @@ +// Type definitions for layui-layer 1.0 +// Project: https://github.com/sentsin/layer +// Definitions by: Zhuo Ning +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +/// + +/** + * @see https://www.layui.com/doc/modules/layer.html + */ +declare const layer: layer.Layer; + +declare namespace layer { + type Index = number; + type Selector = string; + + interface Types { + /** 信息框 */ + dialog: 0; + /** 页面层 */ + page: 1; + /** iframe层 */ + iframe: 2; + /** 加载层 */ + loading: 3; + /** tips层 */ + tips: 4; + } + + /** + * 基础参数 + */ + interface Options { + /** + * 基本层类型 + * @default 0 + */ + type?: Types[keyof Types]; + /** + * 标题 + * @default '信息' + * @example + * '我是标题' + * ['文本', 'font-size:18px;'] + * false //不显示标题栏 + */ + title?: string | false | [string, string]; + /** + * 内容 + * @default '' + */ + content?: string | HTMLElement | JQuery | [string, string]; + /** + * 样式类名 + * @default '' + */ + skin?: string; + /** + * 宽高 + * @default 'auto' + * @example + * '500px' //定义宽度，高度自适应 + * ['500px', '300px'] //定义宽高 + */ + area?: string | [string, string]; + /** + * 坐标 + * @default 'auto' + * @example + * 'auto' //默认坐标，即垂直水平居中 + * '100px' //只定义top坐标，水平保持居中 + * ['100px', '50px'] //同时定义top、left坐标 + * 't' //快捷设置顶部坐标 + * 'r' //快捷设置右边缘坐标 + * 'b' //快捷设置底部坐标 + * 'l' //快捷设置左边缘坐标 + * 'lt' //快捷设置左上角 + * 'lb' //快捷设置左下角 + * 'rt' //快捷设置右上角 + * 'rb' //快捷设置右下角 + */ + offset?: string | [string, string]; + /** + * 图标 + * 信息框和加载层的私有参数 + * @description 信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2。 + */ + icon?: number; + /** + * 按钮 + * @default '确认' + * @description 信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。 + */ + btn?: string | string[]; + /** + * 按钮排列 + * @default 'r' + * @example + * 'l' //按钮左对齐 + * 'c' //按钮居中对齐 + * 'r' //按钮右对齐。默认值，不用设置 + */ + btnAlign?: "l" | "c" | "r"; + /** + * 关闭按钮 + * @description layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0 + * @default 1 + */ + closeBtn?: 0 | 1 | 2; + /** + * 遮罩 + * @default 0.3 + * @example [0.8, '#393D49'] //透明度、颜色 + */ + shade?: number | false | [number, string]; + /** + * 是否点击遮罩关闭 + * @description 如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。 + * @default false + */ + shadeClose?: boolean; + /** + * 自动关闭所需毫秒 + * @default 0 //不会自动关闭 + */ + time?: number; + /** + * 用于控制弹层唯一标识 + * @description 设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式 + * @default '' + */ + id?: string; + /** + * 弹出动画 + * @default 0 + * @since 3.0 + * @example + * -1 //关闭动画 + * 0 //平滑放大。默认 + * 1 //从上掉落 + * 2 //从最底部往上滑入 + * 3 //从左滑入 + * 4 //从左翻滚 + * 5 //渐显 + * 6 //抖动 + */ + anim?: -1 | 0 | 1 | 2 | 3 | 4 | 5 | 6; + /** + * 关闭动画 + * @default true + * @since 3.0.3 + */ + isOutAnim?: boolean; + /** + * 最大最小化 + * @default false + * @description 显示最大小化按钮。该参数值对type:1和type:2有效。 + */ + maxmin?: boolean; + /** + * 固定 + * @default true + * @description 鼠标滚动时，层是否固定在可视区域。 + */ + fixed?: boolean; + /** + * 是否允许拉伸 + * @default true + * @description 可以在弹层右下角拖动来拉伸尺寸。该参数对loading、tips层无效 + */ + resize?: boolean; + /** + * 监听窗口拉伸动作 + * @param layero 当前层的DOM对象 + */ + resizing?(layero: JQuery): void; + /** + * 是否允许浏览器出现滚动条 + * @default true + */ + scrollbar?: boolean; + /** + * 最大宽度 + * @default 360 + * @description 只有当`area: 'auto'`时，maxWidth的设定才有效。 + */ + maxWidth?: number; + /** + * 最大高度 + * @since 3.1.0 + * @description 只有当高度自适应时，maxHeight的设定才有效。 + */ + maxHeight?: number; + /** + * 层叠顺序 + * @default 19891014 + * @description 一般用于解决和其它组件的层叠冲突。 + */ + zIndex?: number; + /** + * 触发拖动的元素 + * @default '.layui-layer-title' + */ + move?: Selector | false | JQuery; + /** + * 是否允许拖拽到窗口外 + * @default false + */ + moveOut?: boolean; + /** + * 拖动完毕后的回调方法 + * @param this 合并的选项 + * @param layero 当前层的DOM对象 + */ + moveEnd?(this: this, layero: JQuery): void; + /** + * tips方向和颜色 + * @default 2 + * @description tips层的私有参数。 + * @example + * 1 //上 + * 2 //右 + * 3 //下 + * 4 //左 + * [1, '#c00'] //方向，颜色 + */ + tips?: number | [number, string]; + /** + * 是否允许多个tips + * @default false + * @description 允许多个意味着不会销毁之前的tips层。 + */ + tipsMore?: boolean; + /** + * 层弹出后的成功回调方法 + * @param layero 当前层DOM + * @param index 当前层索引 + */ + success?(layero: JQuery, index: Index): void; + /** + * 确定按钮回调方法 + * @param index 当前层索引 + * @param layero 当前层DOM对象 + * @description 如果设定了yes回调，需进行手工关闭，`close(index)` + */ + yes?(index: Index, layero: JQuery): void; + //#region 按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推。 + btn2?(index: Index, layero: JQuery): false | void; + btn3?(index: Index, layero: JQuery): false | void; + btn4?(index: Index, layero: JQuery): false | void; + btn5?(index: Index, layero: JQuery): false | void; + btn6?(index: Index, layero: JQuery): false | void; + btn7?(index: Index, layero: JQuery): false | void; + btn8?(index: Index, layero: JQuery): false | void; + btn9?(index: Index, layero: JQuery): false | void; + //#endregion + /** + * 右上角关闭按钮触发的回调 + * @param index 当前层索引 + * @param layero 当前层的DOM对象 + * @description 默认会自动触发关闭。如果不想关闭，`return false` + */ + cancel?(index: Index, layero: JQuery): false | void; + /** + * 层销毁后触发的回调 + * @description 无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。 + */ + end?(): void; + /** + * 最大化后触发的回调 + * @param layero 当前层DOM + */ + full?(layero: JQuery): void; + /** + * 最小化后触发的回调 + * @param layero 当前层DOM + * @description `return false` 不执行默认最小化。 + */ + min?(layero: JQuery): false | void; + /** + * 还原后触发的回调 + * @param layero 当前层DOM + */ + restore?(layero: JQuery): void; + } + + interface ConfigOptions extends Options { + /** + * js所在的目录，可以是绝对目录，也可以是相对目录 + */ + path?: string; + /** + * 拓展的css皮肤 + */ + extend?: string | string[]; + } + + interface PromptOptions extends Options { + /** + * 输入框类型，支持0（文本）默认1（密码）2（多行文本） + */ + formType?: 0 | 1 | 2; + /** + * 初始时的值 + * @default '' + */ + value?: string; + /** + * 可输入文本的最大长度 + * @default 500 + */ + maxlength?: number; + } + + interface TabOptions extends Options { + tab: TabItem[]; + /** + * 监听选项卡的切换事件 + * @param this 传入的选项 + * @param tabIndex 选项卡索引 + */ + change?(this: this, tabIndex: number): void; + } + + interface TabItem { + title: string; + content: string; + } + + interface PhotosOptions extends Options { + photos: PhotosData | Selector; + /** + * 切换图片时触发 + * @param pic + * @param layero + */ + tab?(pic: PhotosDataItem, layero: JQuery): void; + } + + interface PhotosData { + /** 相册标题 */ + title: string; + /** 相册id */ + id: number; + /** + * 初始显示的图片序号 + * @default 0 + */ + start?: number; + /** 相册包含的图片 */ + data: PhotosDataItem[]; + } + + interface PhotosDataItem { + /** 图片名 */ + alt: string; + /** 图片id */ + pid?: number; + /** 原图地址 */ + src: string; + /** 缩略图地址 */ + thumb: string; + } + + namespace callback { + type Yes = NonNullable; + type Cancel = NonNullable; + type End = NonNullable; + type Prompt = (value: string, index: Index, elem: JQuery) => void; + } + + interface Layer { + /** + * 初始化全局配置 + * @param options + */ + config(options: ConfigOptions): this; + /** + * 初始化就绪 + * @param callback + */ + ready(callback: () => void): this; + /** + * 原始核心方法 + * @param options + */ + open(options?: Options): Index; + /** + * 普通信息框 + * @param content + * @param options + * @param yes + */ + alert(content?: string, options?: Options, yes?: callback.Yes): Index; + alert(content: string, yes: callback.Yes): Index; + alert(options: Options, yes?: callback.Yes): Index; + alert(yes: callback.Yes): Index; + /** + * 询问框 + * @param content + * @param options + * @param yes + * @param cancel + */ + confirm(content?: string, options?: Options, yes?: callback.Yes, cancel?: callback.Cancel): Index; + confirm(content: string, yes: callback.Yes, cancel?: callback.Cancel): Index; + confirm(options: Options, yes?: callback.Yes, cancel?: callback.Cancel): Index; + confirm(yes: callback.Yes, cancel?: callback.Cancel): Index; + /** + * 提示框 + * @param content + * @param options + * @param end + */ + msg(content: string, options?: Options, end?: callback.End): Index; + msg(content: string, end: callback.End): Index; + /** + * 加载层 + * @param icon + * @param options + */ + load(icon?: 0 | 1 | 2, options?: Options): Index; + /** + * tips层 + * @param content + * @param follow + * @param options + */ + tips(content: string, follow: Selector | HTMLElement, options?: Options): Index; + /** + * 关闭特定层 + * @param index + */ + close(index: Index): void; + /** + * 关闭所有层 + * @param type + */ + closeAll(type?: keyof Types): void; + /** + * 重新定义层的样式 + * @param index + * @param cssStyle + * @description 该方法对loading层和tips层无效。参数index为层的索引，cssStyle允许你传入任意的css属性 + */ + style(index: Index, cssStyle: Partial): void; + /** + * 改变层的标题 + * @param title + * @param index + */ + title(title: string, index: Index): void; + /** + * 获取iframe页的DOM + * @param selector + * @param index + */ + getChildFrame(selector: string, index: Index): JQuery; + /** + * 获取特定iframe层的索引 + * @param windowName + */ + getFrameIndex(windowName: string): Index; + /** + * 指定iframe层自适应 + * @param index + */ + iframeAuto(index: Index): void; + /** + * 重置特定iframe url + * @param index + * @param url + */ + iframeSrc(index: Index, url: string): void; + /** + * 置顶当前窗口 + */ + setTop(layero: JQuery): void; + /** + * 在自定义元素上触发最大化。 + * @param index + */ + full(index: Index): void; + /** + * 在自定义元素上触发最小化。 + * @param index + */ + min(index: Index): void; + /** + * 在自定义元素上触发还原。 + * @param index + */ + restore(index: Index): void; + /** + * 输入层 + * @param options + * @param yes + */ + prompt(options?: PromptOptions, yes?: callback.Prompt): Index; + prompt(yes: callback.Prompt): Index; + /** + * tab层 + * @param options + */ + tab(options: TabOptions): Index; + /** + * 相册层 + * @param options + */ + photos(options: PhotosOptions): Index; + /** + * 最新弹出的某个层 + */ + index: Index; + zIndex: number; + /** + * 版本字符串 + */ + v: string; + } + + interface Options { + /** + * @deprecated v3.0 + * @description 只提供默认的一种拖拽风格 + */ + moveType?: number; + /** + * @deprecated v3.0 + * @see {@link #fixed} + */ + fix?: boolean; + /** + * @deprecated v3.0 + * @see {@link #anim} + */ + shift?: number; + } +} diff --git a/types/layui-layer/layui-layer-tests.ts b/types/layui-layer/layui-layer-tests.ts new file mode 100644 index 0000000000..8dc0d1083b --- /dev/null +++ b/types/layui-layer/layui-layer-tests.ts @@ -0,0 +1,357 @@ +declare let index: layer.Index; + +interface Window { + readonly layer: layer.Layer; +} + +/********************************************************************************/ +// 如果是页面层 +layer.open({ + type: 1, + content: '传入任意的文本或html' // 这里content是一个普通的String +}); +layer.open({ + type: 1, + content: $('#id') // 这里content是一个DOM +}); +// Ajax获取 +$.post('url', {}, (str) => { + layer.open({ + type: 1, + content: str // 注意，如果str是object，那么需要字符拼接。 + }); +}); +// 如果是iframe层 +layer.open({ + type: 2, + content: 'http:// sentsin.com' // 这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http:// sentsin.com', 'no'] +}); +// 如果是用layer.open执行tips层 +layer.open({ + type: 4, + content: ['内容', '#id'] // 数组第二项即吸附元素选择器或者DOM +}); + +/********************************************************************************/ +// 单个使用 +layer.open({ + skin: 'demo-class' +}); +// 全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高 +layer.config({ + skin: 'demo-class' +}); + +/********************************************************************************/ +// eg1 +layer.alert('酷毙了', { icon: 1 }); +// eg2 +layer.msg('不开心。。', { icon: 5 }); +// eg3 +layer.load(1); // 风格1的加载 + +/********************************************************************************/ +// eg1 +layer.confirm('纳尼？', { + btn: ['按钮一', '按钮二', '按钮三'] // 可以无限个按钮 + , btn3(index, layero) { + // 按钮【按钮三】的回调 + } +}, (index, layero) => { + // 按钮【按钮一】的回调 +}, (index) => { + // 按钮【按钮二】的回调 +}); + +// eg2 +layer.open({ + content: 'test' + , btn: ['按钮一', '按钮二', '按钮三'] + , yes(index, layero) { + // 按钮【按钮一】的回调 + } + , btn2(index, layero) { + // 按钮【按钮二】的回调 + + return false; // 开启该代码可禁止点击该按钮关闭 + } + , btn3(index, layero) { + // 按钮【按钮三】的回调 + + // return false 开启该代码可禁止点击该按钮关闭 + } + , cancel() { + // 右上角关闭回调 + + // return false 开启该代码可禁止点击该按钮关闭 + } +}); + +/********************************************************************************/ +layer.open({ + content: '测试回调', + success(layero, index) { + console.log(layero, index); + } +}); + +/********************************************************************************/ +layer.open({ + content: '测试回调', + yes(index, layero) { + // do something + layer.close(index); // 如果设定了yes回调，需进行手工关闭 + } +}); + +/********************************************************************************/ +layer.config({ + path: '/res/layer/' // layer.js所在的目录，可以是绝对目录，也可以是相对目录 +}); +// 这样的话，layer就会去加载一些它所需要的配件，比如css等。 +// 当然，你即便不用seajs或者requirejs，也可以通过上述方式设定路径 + +/********************************************************************************/ +layer.config({ + path: '/res/layer/' // layer.js所在的目录，可以是绝对目录，也可以是相对目录 +}); + +/********************************************************************************/ +layer.config({ + shift: 1, // 默认动画风格 + skin: 'layui-layer-molv' // 默认皮肤 +}); +// 除此之外，extend还允许你加载css。这对于layer的第三方皮肤有极大的帮助，如： +layer.config({ + extend: [ + 'skin/layer-ext-myskin/style.css' // layer-ext-myskin即是你拓展的皮肤文件 + ] +}); +// 扩展css的规范：您必须在你扩展中的css文件加上这段 + +/********************************************************************************/ +// 页面一打开就执行弹层 +layer.ready(() => { + layer.msg('很高兴一开场就见到你'); +}); + +/********************************************************************************/ +index = layer.open({ + content: 'test' +}); +// 拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。 + +/********************************************************************************/ +// eg1 +layer.alert('只想简单的提示'); +// eg2 +layer.alert('加了个图标', { icon: 1 }); // 这时如果你也还想执行yes回调，可以放在第三个参数中。 +// eg3 +layer.alert('有了回调', (index) => { + // do something + + layer.close(index); +}); + +/********************************************************************************/ +// eg1 +layer.confirm('is not?', { icon: 3, title: '提示' }, (index) => { + // do something + + layer.close(index); +}); +// eg2 +layer.confirm('is not?', (index) => { + // do something + + layer.close(index); +}); + +/********************************************************************************/ +// eg1 +layer.msg('只想弱弱提示'); +// eg2 +layer.msg('有表情地提示', { icon: 6 }); +// eg3 +layer.msg('关闭后想做些什么', () => { + // do something +}); +// eg +layer.msg('同上', { + icon: 1, + time: 2000 // 2秒关闭（如果不配置，默认是3秒） +}, () => { + // do something +}); + +/********************************************************************************/ +// eg1 +index = layer.load(); +// eg2 +index = layer.load(1); // 换了种风格 +// eg3 +index = layer.load(2, { time: 10 * 1000 }); // 又换了种风格，并且设定最长等待10秒 +// 关闭 +layer.close(index); + +/********************************************************************************/ +// eg1 +layer.tips('只想提示地精准些', '#id'); +// eg 2 +$('#id').on('click', function() { + const that = this; + layer.tips('只想提示地精准些', that); // 在元素的事件回调体中，follow直接赋予this即可 +}); +// eg 3 +layer.tips('在上面', '#id', { + tips: 1 +}); + +/********************************************************************************/ +// 当你想关闭当前页的某个层时 +index = layer.open(); +index = layer.alert(); +index = layer.load(); +index = layer.tips("", "#id"); +// 正如你看到的，每一种弹层调用方式，都会返回一个index +layer.close(index); // 此时你只需要把获得的index，轻轻地赋予layer.close即可 +// 当你在iframe页面关闭自身时 +index = parent.layer.getFrameIndex(window.name); // 先得到当前iframe层的索引 +parent.layer.close(index); // 再执行关闭 + +/********************************************************************************/ +layer.closeAll(); // 疯狂模式，关闭所有层 +layer.closeAll('dialog'); // 关闭信息框 +layer.closeAll('page'); // 关闭所有页面层 +layer.closeAll('iframe'); // 关闭所有的iframe层 +layer.closeAll('loading'); // 关闭加载层 +layer.closeAll('tips'); // 关闭所有的tips层 + +/********************************************************************************/ +// 重新给指定层设定width、top等 +layer.style(index, { + width: '1000px', + top: '10px' +}); + +/********************************************************************************/ +layer.open({ + type: 2, + content: 'test/iframe.html', + success(layero, index) { + const body = layer.getChildFrame('body', index); + // const iframeWin = window[layero.find('iframe')[0]['name']]; // 得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method(); + console.log(body.html()); // 得到iframe页的body内容 + body.find('input').val('Hi，我是从父页来的'); + } +}); + +/********************************************************************************/ +// 假设这是iframe页 +index = parent.layer.getFrameIndex(window.name); // 先得到当前iframe层的索引 +parent.layer.close(index); // 再执行关闭 + +/********************************************************************************/ +layer.iframeSrc(index, 'http:// sentsin.com'); + +/********************************************************************************/ +// 通过这种方式弹出的层，每当它被选择，就会置顶。 +layer.open({ + type: 2, + shade: false, + area: '500px', + maxmin: true, + content: 'http:// www.layui.com', + zIndex: layer.zIndex, // 重点1 + success(layero) { + layer.setTop(layero); // 重点2 + } +}); + +/********************************************************************************/ +layer.config({ + extend: 'extend/layer.ext.js' +}); + +/********************************************************************************/ +// prompt层新定制的成员如下 +let opt = { + formType: 1, // 输入框类型，支持0（文本）默认1（密码）2（多行文本） + value: '', // 初始时的值，默认空字符 + maxlength: 140, // 可输入文本的最大长度，默认500 +}; +// 例子1 +layer.prompt((value, index, elem) => { + alert(value); // 得到value + layer.close(index); +}); +// 例子2 +layer.prompt({ + formType: 2, + value: '初始值', + title: '请输入值' +}, (value, index, elem) => { + alert(value); // 得到value + layer.close(index); +}); + +/********************************************************************************/ +layer.tab({ + area: ['600px', '300px'], + tab: [{ + title: 'TAB1', + content: '内容1' + }, { + title: 'TAB2', + content: '内容2' + }, { + title: 'TAB3', + content: '内容3' + }] +}); + +/********************************************************************************/ +$.getJSON('/jquery/layer/test/photos.json', (json) => { + layer.photos({ + photos: json + , shift: 5 // 0-6的选择，指定弹出图片动画类型，默认随机 + }); +}); +let photos: layer.PhotosData = { + title: "", // 相册标题 + id: 123, // 相册id + start: 0, // 初始显示的图片序号，默认0 + data: [ // 相册包含的图片，数组格式 + { + alt: "图片名", + pid: 666, // 图片id + src: "", // 原图地址 + thumb: "" // 缩略图地址 + } + ] +}; + +/********************************************************************************/ +// HTML示例 +`
+ 图片名 + 图片名 +
`; + +``; + +/********************************************************************************/ +layer.photos({ + photos: "json/选择器", + tab(pic, layero) { + console.log(pic); // 当前图片的一些信息 + } +}); + +/********************************************************************************/ diff --git a/types/layui-layer/tsconfig.json b/types/layui-layer/tsconfig.json new file mode 100644 index 0000000000..9ac1f5f120 --- /dev/null +++ b/types/layui-layer/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictFunctionTypes": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "layui-layer-tests.ts" + ] +} diff --git a/types/layui-layer/tslint.json b/types/layui-layer/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/layui-layer/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }