WGINK

# layui工具

layui需要引入 upload 模块

引入依赖：

css

<link rel="stylesheet" href="assets/js/vendor/viewer/viewer.min.css">
<link rel="stylesheet" href="assets/css/layui-util.css">

js

<script src="assets/js/vendor/viewer/viewer.min.js"></script>
<script src="assets/js/layui-util.js"></script>

初始化

var layuiUtil = new LayuiUtil(layui, Viewer ? Viewer : null);

# 表单

# 构建下拉列表

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

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

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

# 上传

# 上传图片

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

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

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

<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

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

<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

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

<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

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

←