115 lines
45 KiB
HTML
115 lines
45 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>layui工具 | WGINK</title>
|
||
<meta name="generator" content="VuePress 1.9.7">
|
||
|
||
<meta name="description" content="">
|
||
|
||
<link rel="preload" href="/assets/css/0.styles.098b46e5.css" as="style"><link rel="preload" href="/assets/js/app.8419454b.js" as="script"><link rel="preload" href="/assets/js/2.3324ea8d.js" as="script"><link rel="preload" href="/assets/js/10.1698a97b.js" as="script"><link rel="prefetch" href="/assets/js/11.24b85a91.js"><link rel="prefetch" href="/assets/js/12.194e06f2.js"><link rel="prefetch" href="/assets/js/13.128ee0cc.js"><link rel="prefetch" href="/assets/js/14.931aed60.js"><link rel="prefetch" href="/assets/js/15.be64026d.js"><link rel="prefetch" href="/assets/js/16.8675e2d6.js"><link rel="prefetch" href="/assets/js/17.1ade9db3.js"><link rel="prefetch" href="/assets/js/3.332e57f2.js"><link rel="prefetch" href="/assets/js/4.a3c79904.js"><link rel="prefetch" href="/assets/js/5.f16cfca9.js"><link rel="prefetch" href="/assets/js/6.19a486e1.js"><link rel="prefetch" href="/assets/js/7.9efeaebf.js"><link rel="prefetch" href="/assets/js/8.7dc718e0.js"><link rel="prefetch" href="/assets/js/9.07f1828d.js">
|
||
<link rel="stylesheet" href="/assets/css/0.styles.098b46e5.css">
|
||
</head>
|
||
<body>
|
||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">WGINK</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/" aria-current="page" class="sidebar-link">首页</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>业务</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>代码模板</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/code-template/area-select.html" class="sidebar-link">地区选择</a></li><li><a href="/code-template/excel-upload.html" class="sidebar-link">EasyExcel 上传（导入）</a></li><li><a href="/code-template/select.html" class="sidebar-link">下拉选择</a></li><li><a href="/code-template/list-select.html" class="sidebar-link">列表选择</a></li><li><a href="/code-template/layui-util.html" aria-current="page" class="active sidebar-link">layui工具</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/code-template/layui-util.html#表单" class="sidebar-link">表单</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/code-template/layui-util.html#构建下拉列表" class="sidebar-link">构建下拉列表</a></li><li class="sidebar-sub-header"><a href="/code-template/layui-util.html#构建数据字典" class="sidebar-link">构建数据字典</a></li></ul></li><li class="sidebar-sub-header"><a href="/code-template/layui-util.html#上传" class="sidebar-link">上传</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/code-template/layui-util.html#上传图片" class="sidebar-link">上传图片</a></li><li class="sidebar-sub-header"><a href="/code-template/layui-util.html#上传视频" class="sidebar-link">上传视频</a></li><li class="sidebar-sub-header"><a href="/code-template/layui-util.html#上传音频" class="sidebar-link">上传音频</a></li><li class="sidebar-sub-header"><a href="/code-template/layui-util.html#上传附件" class="sidebar-link">上传附件</a></li></ul></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="layui工具"><a href="#layui工具" class="header-anchor">#</a> layui工具</h1> <p>layui需要引入 <strong>upload</strong> 模块</p> <p>引入依赖：</p> <p>css</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>assets/js/vendor/viewer/viewer.min.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>assets/css/layui-util.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</code></pre></div><p>js</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>assets/js/vendor/viewer/viewer.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>assets/js/layui-util.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</code></pre></div><p>初始化</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> layuiUtil <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">LayuiUtil</span><span class="token punctuation">(</span>layui<span class="token punctuation">,</span> Viewer <span class="token operator">?</span> Viewer <span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre></div><h2 id="表单"><a href="#表单" class="header-anchor">#</a> 表单</h2> <h3 id="构建下拉列表"><a href="#构建下拉列表" class="header-anchor">#</a> 构建下拉列表</h3> <p>html</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-form-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>最高学历<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>highestEducationName<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>highestEducationName<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-input-block<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>highestEducationIdBox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</code></pre></div><p>js</p> <div class="language-js extra-class"><pre class="language-js"><code>layuiUtil<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">url</span><span class="token operator">:</span> top<span class="token punctuation">.</span>restAjax<span class="token punctuation">.</span><span class="token function">path</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">domId</span><span class="token operator">:</span> <span class="token string">'xxxIdBox'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'xxxId'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">dataForm</span><span class="token operator">:</span> <span class="token string">'dataForm'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">valueKey</span><span class="token operator">:</span> <span class="token string">'dataId'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">nameKey</span><span class="token operator">:</span> <span class="token string">'dataName'</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">onSelect</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> option</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">var</span> optionValue <span class="token operator">=</span> option<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
|
||
<span class="token keyword">var</span> optionText <span class="token operator">=</span> option<span class="token punctuation">.</span>innerText<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre></div><h3 id="构建数据字典"><a href="#构建数据字典" class="header-anchor">#</a> 构建数据字典</h3> <p>js</p> <div class="language-js extra-class"><pre class="language-js"><code>layuiUtil<span class="token punctuation">.</span><span class="token function">selectData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">parentId</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">domId</span><span class="token operator">:</span> <span class="token string">'xxxIdBox'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'xxxId'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">dataForm</span><span class="token operator">:</span> <span class="token string">'dataForm'</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">onSelect</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> option</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#highestEducationName'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span>option<span class="token punctuation">.</span>innerText<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre></div><p>参数</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th> <th>是否必填</th></tr></thead> <tbody><tr><td>url</td> <td>string</td> <td>请求地址</td> <td>是</td></tr> <tr><td>domId</td> <td>string</td> <td>加载下拉的div</td> <td>是</td></tr> <tr><td>name</td> <td>string</td> <td>select的ID与NAME属性值</td> <td>是</td></tr> <tr><td>dataForm</td> <td>string</td> <td>表单的lay-filter值</td> <td>是</td></tr> <tr><td>valueKey</td> <td>string</td> <td>接口返回的数据渲染到option的value属性的值</td> <td>是</td></tr> <tr><td>nameKey</td> <td>string</td> <td>接口返回的数据渲染到option的innerText的值</td> <td>是</td></tr> <tr><td>selectedValue</td> <td>string</td> <td>选中的默认值</td> <td>否</td></tr> <tr><td>onInit</td> <td>function</td> <td>渲染时触发回调</td> <td>否</td></tr> <tr><td>onSelect</td> <td>function</td> <td>选择时触发回调</td> <td>否</td></tr></tbody></table> <p>事件</p> <p>onInit：渲染或更新时触发事件</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th></tr></thead> <tbody><tr><td>selectedValue</td> <td>string</td> <td>选中的默认值，空字符串时，不触发数据加载</td></tr></tbody></table> <p>onSelect：选择时触发事件</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th></tr></thead> <tbody><tr><td>data</td> <td>obj</td> <td>选择的option数据，包含原始DOM，美化后的DOM，选中的值</td></tr> <tr><td>option</td> <td>dom</td> <td>选中的option</td></tr></tbody></table> <h2 id="上传"><a href="#上传" class="header-anchor">#</a> 上传</h2> <h3 id="上传图片"><a href="#上传图片" class="header-anchor">#</a> 上传图片</h3> <blockquote><p>已上传头像为例，<strong>avatar</strong> 需要前后一致</p></blockquote> <p>html</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>avatarBox<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-form-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>头像<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-btn layui-upload-file-btn<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>avatarUploadBtn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>上传头像<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>upload-image-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>avatar<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>avatar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-btn-container<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>avatarFileBox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</code></pre></div><p>js</p> <div class="language-js extra-class"><pre class="language-js"><code>layuiUtil<span class="token punctuation">.</span><span class="token function">initUploadImage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">fieldName</span><span class="token operator">:</span> <span class="token string">'avatar'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">maxCount</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">isShow</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">allowExts</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">acceptMime</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</code></pre></div><p>参数</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th> <th>是否必填</th> <th>默认</th></tr></thead> <tbody><tr><td>maxCount</td> <td>int</td> <td>最大数量</td> <td>否</td> <td>9</td></tr> <tr><td>fieldName</td> <td>string</td> <td>字段名称</td> <td>是</td> <td></td></tr> <tr><td>isShow</td> <td>boolean</td> <td>是否展示（不能上报、删除）</td> <td>是</td> <td></td></tr> <tr><td>allowExts</td> <td>array</td> <td>允许的后缀</td> <td>否</td> <td>'jpg', 'png', 'gif', 'bmp', 'jpeg'</td></tr> <tr><td>acceptMime</td> <td>array</td> <td>文件选择支持的类型</td> <td>否</td> <td>'image/*'</td></tr></tbody></table> <p>事件</p> <p>onInit：渲染或更新时触发事件</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th></tr></thead> <tbody><tr><td>selectedValue</td> <td>string</td> <td>选中的默认值，空字符串时，不触发数据加载</td></tr></tbody></table> <p>onSelect：选择时触发事件</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th></tr></thead> <tbody><tr><td>data</td> <td>obj</td> <td>选择的option数据，包含原始DOM，美化后的DOM，选中的值</td></tr> <tr><td>option</td> <td>dom</td> <td>选中的option</td></tr></tbody></table> <h3 id="上传视频"><a href="#上传视频" class="header-anchor">#</a> 上传视频</h3> <p>html</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>videoBox<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-form-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>视频<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-btn layui-upload-file-btn<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>videoUploadBtn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>上传视频<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>upload-image-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-btn-container<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>videoFileBox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</code></pre></div><p>js</p> <div class="language-js extra-class"><pre class="language-js"><code>layuiUtil<span class="token punctuation">.</span><span class="token function">initUploadVideo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">fieldName</span><span class="token operator">:</span> <span class="token string">'video'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">maxCount</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">isShow</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">allowExts</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">acceptMime</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</code></pre></div><p>参数</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th> <th>是否必填</th> <th>默认</th></tr></thead> <tbody><tr><td>maxCount</td> <td>int</td> <td>最大数量</td> <td>否</td> <td>1</td></tr> <tr><td>fieldName</td> <td>string</td> <td>字段名称</td> <td>是</td> <td></td></tr> <tr><td>isShow</td> <td>boolean</td> <td>是否展示（不能上报、删除）</td> <td>是</td> <td></td></tr> <tr><td>allowExts</td> <td>array</td> <td>允许的后缀</td> <td>否</td> <td>'mp4'</td></tr> <tr><td>acceptMime</td> <td>array</td> <td>文件选择支持的类型</td> <td>否</td> <td>'video/mp4'</td></tr></tbody></table> <h3 id="上传音频"><a href="#上传音频" class="header-anchor">#</a> 上传音频</h3> <p>html</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audioBox<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-form-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>音频<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-btn layui-upload-file-btn<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audioUploadBtn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>上传音频<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>upload-image-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audio<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-btn-container<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audioFileBox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</code></pre></div><p>js</p> <div class="language-js extra-class"><pre class="language-js"><code>layuiUtil<span class="token punctuation">.</span><span class="token function">initUploadAudio</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">fieldName</span><span class="token operator">:</span> <span class="token string">'audio'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">maxCount</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">isShow</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">allowExts</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">acceptMime</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</code></pre></div><p>参数</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th> <th>是否必填</th> <th>默认</th></tr></thead> <tbody><tr><td>maxCount</td> <td>int</td> <td>最大数量</td> <td>否</td> <td>1</td></tr> <tr><td>fieldName</td> <td>string</td> <td>字段名称</td> <td>是</td> <td></td></tr> <tr><td>isShow</td> <td>boolean</td> <td>是否展示（不能上报、删除）</td> <td>是</td> <td></td></tr> <tr><td>allowExts</td> <td>array</td> <td>允许的后缀</td> <td>否</td> <td>'wav', 'mp3'</td></tr> <tr><td>acceptMime</td> <td>array</td> <td>文件选择支持的类型</td> <td>否</td> <td>'audio/wav', 'audio/mp3'</td></tr></tbody></table> <h3 id="上传附件"><a href="#上传附件" class="header-anchor">#</a> 上传附件</h3> <p>html</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fileBox<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-form-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>附件<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-btn layui-upload-file-btn<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fileUploadBtn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>上传附件<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>upload-image-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-btn-container<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fileFileBox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</code></pre></div><p>js</p> <div class="language-js extra-class"><pre class="language-js"><code>layuiUtil<span class="token punctuation">.</span><span class="token function">initUploadFile</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">fieldName</span><span class="token operator">:</span> <span class="token string">'file'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">maxCount</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">isShow</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">allowExts</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">acceptMime</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">onFileClick</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">fileId</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</code></pre></div><p>参数</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th> <th>是否必填</th> <th>默认</th></tr></thead> <tbody><tr><td>maxCount</td> <td>int</td> <td>最大数量</td> <td>否</td> <td>9</td></tr> <tr><td>fieldName</td> <td>string</td> <td>字段名称</td> <td>是</td> <td></td></tr> <tr><td>isShow</td> <td>boolean</td> <td>是否展示（不能上报、删除）</td> <td>是</td> <td></td></tr> <tr><td>allowExts</td> <td>array</td> <td>允许的后缀</td> <td>否</td> <td>'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'wps', 'txt', 'rar', 'zip'</td></tr> <tr><td>acceptMime</td> <td>array</td> <td>文件选择支持的类型</td> <td>否</td> <td>'application/pdf'等</td></tr> <tr><td>onFileClick</td> <td>function</td> <td>文件点击事件</td> <td>否</td> <td>下载文件</td></tr></tbody></table> <p>事件</p> <p>onFileClick：文件点击事件</p> <table><thead><tr><th>名称</th> <th>类型</th> <th>描述</th></tr></thead> <tbody><tr><td>fileId</td> <td>string</td> <td>点击的文件ID</td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||
←
|
||
<a href="/code-template/list-select.html" class="prev">
|
||
列表选择
|
||
</a></span> <!----></p></div> </main></div><div class="global-ui"></div></div>
|
||
<script src="/assets/js/app.8419454b.js" defer></script><script src="/assets/js/2.3324ea8d.js" defer></script><script src="/assets/js/10.1698a97b.js" defer></script>
|
||
</body>
|
||
</html>
|