# layui工具

引入依赖：

1. `<link rel="stylesheet" href="assets/js/vendor/viewer/viewer.min.css">`
2. `<script src="assets/js/vendor/viewer/viewer.min.js"></script>`

3. `<link rel="stylesheet" href="assets/css/layui-util.css">`
4. `<script src="assets/js/layui-util.js"></script>`


初始化

```js
var layuiUtil = new LayuiUtil(layui, viewer ? viewer : null);
```

## 表单

### 构建下拉列表

html

```html
<div class="layui-form-item">
    <label class="layui-form-label">最高学历</label>
    <input type="hidden" id="highestEducationName" name="highestEducationName">
    <div class="layui-input-block" id="highestEducationIdBox"></div>
</div>
```

js

```js
layuiUtil.select({
    url: top.restAjax.path('', []),
    domId: '#highestEducationIdBox',
    name: 'highestEducationId',
    dataForm: 'dataForm',
    valueKey: 'dataId',
    nameKey: 'dataName',
    onSelect: function(data, option) {
        var optionValue = option.value;
        var optionText = option.innerText;
    }
});
```

参数
|名称|类型|描述|是否必填|
|-|-|-|-|
|url|string|请求地址|是|
|domId|string|加载下拉的div|是|
|name|string|select的ID与NAME属性值|是|
|dataForm|string|表单的lay-filter值|是|
|valueKey|string|接口返回的数据渲染到option的value属性的值|是|
|nameKey|string|接口返回的数据渲染到option的innerText的值|是|
|selectedValue|string|选中的默认值|否|
|onInit|function|渲染时触发回调|否|
|onSelect|function|选择时触发回调|否|

事件

onInit：渲染或更新时触发事件

|名称|类型|描述|
|-|-|-|
|selectedValue|string|选中的默认值，空字符串时，不触发数据加载|

onSelect：选择时触发事件

|名称|类型|描述|
|-|-|-|
|data|obj|选择的option数据，包含原始DOM，美化后的DOM，选中的值|
|option|dom|选中的option|

## 上传

### 上传图片

> 已上传头像为例，**avatar** 需要前后一致

html

```html
<div id="avatarBox" class="layui-form-item">
    <label class="layui-form-label">头像</label>
    <button type="button" class="layui-btn layui-upload-file-btn" id="avatarUploadBtn">上传头像</button>
    <div class="upload-image-box">
        <input type="hidden" id="avatar" name="avatar">
        <div class="layui-btn-container" id="avatarFileBox"></div>
    </div>
</div>
```

js

```js
layuiUtil.initUploadImage({
    fieldName: 'avatar',
    maxCount: 6,
    isShow: false,
    allowExts: [],
    acceptMime: []
})
```