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: []
|
|||
|
|
})
|
|||
|
|
```
|