wg-basic-doc/docs/code-template/layui-util.md

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>

初始化

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: '#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

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