340 lines
8.3 KiB
Markdown
340 lines
8.3 KiB
Markdown
# layui工具
|
||
|
||
layui需要引入 **upload** 模块
|
||
|
||
引入依赖：
|
||
|
||
css
|
||
```html
|
||
<link rel="stylesheet" href="assets/js/vendor/viewer/viewer.min.css">
|
||
<link rel="stylesheet" href="assets/css/layui-util.css">
|
||
```
|
||
|
||
js
|
||
```html
|
||
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
|
||
<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: 'xxxIdBox',
|
||
name: 'xxxId',
|
||
dataForm: 'dataForm',
|
||
valueKey: 'dataId',
|
||
nameKey: 'dataName',
|
||
onSelect: function(data, option) {
|
||
var optionValue = option.value;
|
||
var optionText = option.innerText;
|
||
}
|
||
});
|
||
```
|
||
|
||
### 构建数据字典
|
||
|
||
js
|
||
|
||
```js
|
||
layuiUtil.selectData({
|
||
parentId: '',
|
||
domId: 'xxxIdBox',
|
||
name: 'xxxId',
|
||
dataForm: 'dataForm',
|
||
onSelect: function(data, option) {
|
||
$('#highestEducationName').val(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|
|
||
|
||
|
||
## 下拉联动
|
||
|
||
### 下拉多级地区联动
|
||
|
||
> 树形结构，下拉联动需要配合dom实现
|
||
|
||
html
|
||
|
||
```html
|
||
<div class="layui-row" style="margin-top: 10px;">
|
||
<span class="search-item-key">户籍地</span>
|
||
<div class="layui-inline layui-form search-item ">
|
||
<select id="registerArea0" name="registerArea0" lay-filter="registerArea0Select"></select>
|
||
</div>
|
||
<div class="layui-inline layui-form search-item ">
|
||
<select id="registerArea1" name="registerArea1" lay-filter="registerArea1Select"></select>
|
||
</div>
|
||
<div class="layui-inline layui-form search-item ">
|
||
<select id="registerArea2" name="registerArea2" lay-filter="registerArea2Select"></select>
|
||
</div>
|
||
<div class="layui-inline layui-form search-item ">
|
||
<select id="registerArea3" name="registerArea3" lay-filter="registerArea3Select"></select>
|
||
</div>
|
||
<div class="layui-inline layui-form search-item ">
|
||
<select id="registerArea4" name="registerArea4" lay-filter="registerArea4Select"></select>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
`<select>` 的 **id**、**name** 需要相同，下标从**0**开始，**lay-filter** 为 **id** 值 + **Select**。
|
||
固定写法，下标递增
|
||
|
||
```js
|
||
layuiUtil.selectLinkageArea({
|
||
baseRootId: 0,
|
||
selectId: 'registerArea',
|
||
optionDataKeyArray: ['areaCode'],
|
||
onSelect: function(data, option, index) {
|
||
var value = data.value;
|
||
// 删除元素
|
||
selectedRegisterAreaArray.splice(index, 5 - index);
|
||
if(value) {
|
||
selectedRegisterAreaArray[index] = option.innerText;
|
||
}
|
||
}
|
||
});
|
||
```
|
||
|
||
参数
|
||
|名称|类型|描述|是否必填|
|
||
|-|-|-|-|
|
||
|baseRootId|string|第一个下拉框的根节点ID|是|
|
||
|selectId|string|select的ID（不包含下标）|是|
|
||
|optionDataKeyArray|array|需要附带在option上的属性值，取值的时候通过option.dataset.dataX 获取，其中X为数组下标|否|
|
||
|onSelect|function|选择事件|是|
|
||
|
||
事件
|
||
|
||
onSelect：选择时触发事件
|
||
|
||
|名称|类型|描述|
|
||
|-|-|-|
|
||
|data|obj|选择的option数据，包含原始DOM，美化后的DOM，选中的值|
|
||
|option|dom|选中的option|
|
||
|index|number|select下标|
|
||
|
||
|
||
|
||
## 上传
|
||
|
||
### 上传图片
|
||
|
||
> 已上传头像为例，**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: []
|
||
})
|
||
```
|
||
|
||
参数
|
||
|名称|类型|描述|是否必填|默认|
|
||
|-|-|-|-|-|
|
||
|maxCount|int|最大数量|否|9|
|
||
|fieldName|string|字段名称|是||
|
||
|isShow|boolean|是否展示（不能上报、删除）|是||
|
||
|allowExts|array|允许的后缀|否|'jpg', 'png', 'gif', 'bmp', 'jpeg'|
|
||
|acceptMime|array|文件选择支持的类型|否|'image/*'|
|
||
|
||
事件
|
||
|
||
onInit：渲染或更新时触发事件
|
||
|
||
|名称|类型|描述|
|
||
|-|-|-|
|
||
|selectedValue|string|选中的默认值，空字符串时，不触发数据加载|
|
||
|
||
onSelect：选择时触发事件
|
||
|
||
|名称|类型|描述|
|
||
|-|-|-|
|
||
|data|obj|选择的option数据，包含原始DOM，美化后的DOM，选中的值|
|
||
|option|dom|选中的option|
|
||
|
||
### 上传视频
|
||
|
||
html
|
||
|
||
```html
|
||
<div id="videoBox" class="layui-form-item">
|
||
<label class="layui-form-label">视频</label>
|
||
<button type="button" class="layui-btn layui-upload-file-btn" id="videoUploadBtn">上传视频</button>
|
||
<div class="upload-image-box">
|
||
<input type="hidden" id="video" name="video">
|
||
<div class="layui-btn-container" id="videoFileBox"></div>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
js
|
||
|
||
```js
|
||
layuiUtil.initUploadVideo({
|
||
fieldName: 'video',
|
||
maxCount: 1,
|
||
isShow: false,
|
||
allowExts: [],
|
||
acceptMime: []
|
||
})
|
||
```
|
||
|
||
参数
|
||
|名称|类型|描述|是否必填|默认|
|
||
|-|-|-|-|-|
|
||
|maxCount|int|最大数量|否|1|
|
||
|fieldName|string|字段名称|是||
|
||
|isShow|boolean|是否展示（不能上报、删除）|是||
|
||
|allowExts|array|允许的后缀|否|'mp4'|
|
||
|acceptMime|array|文件选择支持的类型|否|'video/mp4'|
|
||
|
||
### 上传音频
|
||
|
||
html
|
||
|
||
```html
|
||
<div id="audioBox" class="layui-form-item">
|
||
<label class="layui-form-label">音频</label>
|
||
<button type="button" class="layui-btn layui-upload-file-btn" id="audioUploadBtn">上传音频</button>
|
||
<div class="upload-image-box">
|
||
<input type="hidden" id="audio" name="audio">
|
||
<div class="layui-btn-container" id="audioFileBox"></div>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
js
|
||
|
||
```js
|
||
layuiUtil.initUploadAudio({
|
||
fieldName: 'audio',
|
||
maxCount: 1,
|
||
isShow: false,
|
||
allowExts: [],
|
||
acceptMime: []
|
||
})
|
||
```
|
||
|
||
参数
|
||
|名称|类型|描述|是否必填|默认|
|
||
|-|-|-|-|-|
|
||
|maxCount|int|最大数量|否|1|
|
||
|fieldName|string|字段名称|是||
|
||
|isShow|boolean|是否展示（不能上报、删除）|是||
|
||
|allowExts|array|允许的后缀|否|'wav', 'mp3'|
|
||
|acceptMime|array|文件选择支持的类型|否|'audio/wav', 'audio/mp3'|
|
||
|
||
### 上传附件
|
||
|
||
html
|
||
|
||
```html
|
||
<div id="fileBox" class="layui-form-item">
|
||
<label class="layui-form-label">附件</label>
|
||
<button type="button" class="layui-btn layui-upload-file-btn" id="fileUploadBtn">上传附件</button>
|
||
<div class="upload-image-box">
|
||
<input type="hidden" id="file" name="file">
|
||
<div class="layui-btn-container" id="fileFileBox"></div>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
js
|
||
|
||
```js
|
||
layuiUtil.initUploadFile({
|
||
fieldName: 'file',
|
||
maxCount: 3,
|
||
isShow: false,
|
||
allowExts: [],
|
||
acceptMime: [],
|
||
onFileClick: function(fileId) {}
|
||
})
|
||
```
|
||
|
||
参数
|
||
|名称|类型|描述|是否必填|默认|
|
||
|-|-|-|-|-|
|
||
|maxCount|int|最大数量|否|9|
|
||
|fieldName|string|字段名称|是||
|
||
|isShow|boolean|是否展示（不能上报、删除）|是||
|
||
|allowExts|array|允许的后缀|否|'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'wps', 'txt', 'rar', 'zip'|
|
||
|acceptMime|array|文件选择支持的类型|否|'application/pdf'等|
|
||
|onFileClick|function|文件点击事件|否|下载文件|
|
||
|
||
事件
|
||
|
||
onFileClick：文件点击事件
|
||
|
||
|名称|类型|描述|
|
||
|-|-|-|
|
||
|fileId|string|点击的文件ID| |