# LayUI.drawer抽屉栏组件

**Repository Path**: layui-plugin/LayUI.drawer

## Basic Information

- **Project Name**: LayUI.drawer抽屉栏组件
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 7
- **Created**: 2021-09-25
- **Last Updated**: 2021-09-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LayUI.drawer抽屉组件

#### 介绍
LayUI抽屉组件

#### 软件架构
基于LayUI模块化组件


#### 安装教程
```
layui.config({
    base: '/js/', //拓展模块的根目录
})
.extend({
    drawer: '/drawer/drawer'
});
```

#### 使用说明
```
layui.drawer.render({
	title: 'test',  //标题
	offset: 'r',    //r:抽屉在右边、l:抽屉在左边
        top: 30,        //抽屉顶部距离，默认0
        bottom: 30,     //抽屉底部距离，默认0
	width: "600px", //r、l抽屉可以设置宽度
	content: "<div>aaaa</div>",
});
layui.drawer.render({
	title: 'test',
	offset: 'b',     //b:抽屉在底部、t:抽屉在顶部
	height: "500px", //b、t抽屉可以设置高度
	content: "<div>aaaa</div>",
});

//事件，跟layer的事件一致
layui.drawer.render({
	title: 'test',  //标题
	offset: 'r',    //r:抽屉在右边、l:抽屉在左边
	width: "600px", //r、l抽屉可以设置宽度
	content: $("#highSearchToolBar").html(),
        btn: ['<i class="layui-icon">&#xe615;</i>搜索', '重置'],
        success = function (layero, index) {
                
        },
        btn1: function (index, layero) {
            
        },
        btn2: function (index, layero) {
             $(layero).find("form")[0].reset();//重置
             return false;   
        }
});
```

#### 效果图
![输入图片说明](https://images.gitee.com/uploads/images/2021/0204/164908_b9e05ab4_727020.png "Snipaste_2021-02-04_16-44-42.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0204/164917_1822e5d4_727020.png "Snipaste_2021-02-04_16-47-43.png")

#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)