3 Star 21 Fork 2

morning-star / layer-drawer

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README
MIT

layer-drawer

layer-drawer 是一个基于 layer 扩展的抽屉模块

Github | Demo

layui 2.8.0 已支持抽屉,如没有特殊需求,建议优先使用官方版

demo

快速开始

// 将 `drawer` 文件夹复制到你的模块目录
layui.config({
  base: './' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
  drawer: 'drawer/drawer'
});

layui.use(['drawer'],function() {
  var drawer=layui.drawer;

  $('#drawerLeft').click(function() {
    drawer.open({
      title: ["标题",'font-size:16px;color:#2d8cf0'],
      offset: "r",
      closeBtn: 1,
      content: '抽屉内容'
    })
  })
})

参数

type Index = number;
type Selector = string;
/**
 * 基础参数
 */
interface Options {
  /**
   * 指定抽屉挂载节点
   * @default 'body'
   * @description 指定容器内打开,需使用 layer 捕获层模式,并设置目标容器 `style="overflow: hidden; position: relative;"`
   */
  target?: Selector | undefined;
  /**
   * 标题
   * @default false
   * @example
   * '我是标题'
   * ['文本', 'font-size:18px;']
   * false    //不显示标题栏
   */
  title?: string | false | [string, string] | undefined;
  /**
   * 设置iframe类型的弹层
   * @example
   * "http://xxx.xx"
   */
  iframe?: string | undefined;
  /**
   * 设置url类型的弹层,html片段会拼接在当前页面中,片段和当前页不能有相同的id
   */
  url?: string | undefined;
  /**
   * 内容
   * @default ''
   */
  content?: string | HTMLElement | JQuery | [string, string] | undefined;
  /**
   * 抽屉宽或高
   * @default '30%'
   * @example
   * '500px'    //定义宽或高,根据打开方向自适应
   * ['500px', '300px']    //定义宽高
   */
  area?: string | [string, string] | undefined;
  /**
   * 抽屉打开方向 l = 左, r = 右, t = 上, b = 下
   * @default 'r'
   * @example
   * 'r'
   */
  offset?: 'l' | 'r' | 't' | 'b' | undefined;
  /**
   * 按钮
   * @default '确认'
   * @description btn默认是一个确认按钮
   */
  btn?: string | string[] | undefined;
  /**
   * 按钮排列
   * @default 'r'
   * @example
   * 'l'    //按钮左对齐
   * 'c'    //按钮居中对齐
   * 'r'    //按钮右对齐。默认值,不用设置
   */
  btnAlign?: 'l' | 'c' | 'r' | undefined;
  /**
   * 关闭按钮
   * @description layer提供了两种风格的关闭按钮,可通过配置1和2来展示,如果不显示,则closeBtn: 0 或 false
   * @default false
   */
  closeBtn?: 0 | 1 | 2 | boolean | undefined;
  /**
   * 遮罩
   * @default 0.3
   * @example [0.8, '#393D49']    //透明度、颜色
   */
  shade?: number | false | [number, string] | undefined;
  /**
   * 是否点击遮罩关闭
   * @description 如果你的shade是存在的,那么你可以设定shadeClose来控制点击抽屉外区域关闭。
   * @default false
   */
  shadeClose?: boolean | undefined;
  /**
   * 自动关闭所需毫秒
   * @default 0 //不会自动关闭
   */
  time?: number | undefined;
  /**
   * 用于控制弹层唯一标识
   * @description 设置该值后,不管是什么类型的层,都只允许同时弹出一个。一般用于页面层和iframe层模式
   * @default ''
   */
  id?: string | undefined;
  /**
   * 关闭动画
   * @default true
   */
  isOutAnim?: boolean | undefined;
  /**
   * 最大最小化
   * @default false
   * @description 显示最大小化按钮。该参数值对type:1和type:2有效。
   */
  maxmin?: boolean | undefined;
  /**
   * 是否允许拉伸
   * @default false
   * @description 可以在弹层右下角拖动来拉伸尺寸。
   */
  resize?: boolean | undefined;
  /**
   * 监听窗口拉伸动作
   * @param layero 当前层的DOM对象
   */
  resizing?(layero: JQuery): void;
  /**
   * 是否允许浏览器出现滚动条
   * @default true
   */
  scrollbar?: boolean | undefined;
  /**
   * 层叠顺序
   * @default 19891014
   * @description 一般用于解决和其它组件的层叠冲突。
   */
  zIndex?: number | undefined;
  /**
   * 是否默认堆叠在左下角
   * @default true
   */
  minStack?: boolean | undefined;
  /**
   * 关闭弹层时,是否将弹层设置为隐藏状态(而非移除),当再次打开,直接显示原来的弹层。 若设为 true,则必须同时设置 id 属性
   * @default false
   * @since 2.8.3
   */
  hideOnClose?: boolean;
  /**
   * 层弹出后的成功回调方法
   * @param layero 当前层DOM
   * @param index 当前层索引
   * @param instance 当前实例,2.8+
   */
  success?(layero: JQuery, index: Index, instance: any): void;
  /**
   * 确定按钮回调方法
   * @param index 当前层索引
   * @param layero 当前层DOM对象
   * @description 如果设定了yes回调,需进行手工关闭,`close(index)`。
   * 按钮1的回调是yes,而从按钮2开始,则回调为btn2: function(){},以此类推。
   */
  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 Drawer {
  /**
   * 打开一个抽屉
   * @param options
   * @description 返回index为层的索引
   */
  open(options?: Options): Index;
  /**
   * 关闭指定的抽屉
   * @param index
   */
  close(index: Index): void;
  /**
   * 关闭所有层
   */
  closeAll(): void;
  /**
   * 重新定义抽屉的样式
   * @param index
   * @param cssStyle
   * @description 参数index为层的索引,cssStyle允许你传入任意的css属性
   */
  style(index: Index, cssStyle: Partial<CSSStyleDeclaration>): void;
  /**
   * 改变抽屉的标题
   * @param title 要改变的值
   * @param index 抽屉索引
   */
  title(title: string, index: Index): void;
}
MIT License Copyright (c) 2022 morning-star Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

基于 layer 扩展的抽屉模块 expand collapse
CSS and 3 more languages
MIT
Cancel

Releases (1)

All

Contributors

All

Activities

Load More
can not load any more
CSS
1
https://gitee.com/starsatdawn/layer-drawer.git
git@gitee.com:starsatdawn/layer-drawer.git
starsatdawn
layer-drawer
layer-drawer
master

Search