106 lines
2.4 KiB
Markdown
106 lines
2.4 KiB
Markdown
# 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: []
|
||
})
|
||
``` |