Tenlion/wg-basic-doc

Fork 0

wanggeng 01328e7121 更新

2022-08-15 15:17:10 +08:00

8.3 KiB

Raw Blame History

layui工具

layui需要引入 upload 模块

引入依赖：

css

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

<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>

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;
    }
});

构建数据字典

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

<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。固定写法，下标递增

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

<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>

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>

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>

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>

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

8.3 KiB Raw Blame History Unescape Escape

layui工具

表单

构建下拉列表

构建数据字典

下拉联动

下拉多级地区联动

上传

上传图片

上传视频

上传音频

上传附件

8.3 KiB

Raw Blame History