http://zashao.com/野生程序猿之旅http://zashao.com/?id=104<p>先前刚学习并且用在工作中的尤其框架egret即将宣告破产了，群里炸开锅了。前端群里大伙都是失业状态，惨惨惨。</p><p><br/></p><p>前端群有个群改成“H5再就业了”真的是挺愁的，大环境不好就算了，疫情也如此严峻。另个上海php群，有人半年没有找到工作了。我们公司也是快扛不住的状态了。今年大环境整体比较糟糕，大公司、小公司都挺难的。</p><p><br/></p><p>我是一直跟着产品走的，不是跟着技术走的，聊一下区别。<br/></p><p><br/></p><p>跟着技术走，就是php，java，前端，后端。</p><p><br/></p><p>跟着产品走，就是网站，app，微信公众号，微信小程序，微信小游戏，pc客户端，web应用等等。细一点就产品的某个领域，如我就是抓住推广二字。接下来可能研究短视频、音频，容易有出路些吧</p>Wed, 28 Sep 2022 21:53:00 +0800http://zashao.com/?id=103<p>接下来准备做全局的方法了，象弹窗，还是希望尽量做到一句话调用。layui的弹窗组件里有一个tips功能，把我难住了。</p><p><img src="http://zashao.com/zb_users/upload/2022/09/202209111662903809351928.png" alt="image.png"/></p><p>感觉这个jquery比较容易实现。有这样一个场景，滚动的页面里如果有tips功能，需要考虑到一个相对整个页面的绝对定位。Svelte里如何获取元素定位，我傻眼了，如何监听滚动条事件，还有我希望我的alert是支持esc，enter键盘事件的，要弥补layui的不足（先前客户都是希望alert的，confirm的时候键盘按键可以控制）。</p><p><br/></p><p>国内的Svelte文档少，而科技上网又是违法的，只能慢慢找找有没相关好的方案，实在不行我的框架可能就是Svelte+jquery了，不知道现在用jquery会不会有没人骂。</p><p><br/></p><p>暂时不更新了，再找找资料学习学习吧。</p>Sun, 11 Sep 2022 21:42:14 +0800http://zashao.com/?id=102<p>【laylte/LaySwitch.svelte】<br/></p><pre class="prism-highlight prism-language-markup">&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;//import&nbsp;{&nbsp;createEventDispatcher&nbsp;}&nbsp;from&nbsp;&#39;svelte&#39;; &nbsp;&nbsp;&nbsp;&nbsp;//const&nbsp;dispatch&nbsp;=&nbsp;createEventDispatcher(); &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;value=&#39;false&#39;;//兼容&nbsp;字符串/布尔&nbsp;&nbsp;0/1&nbsp;&nbsp;true/false&nbsp;&nbsp;存数据库可以存0/1&nbsp;也可以存字符串&nbsp;true/false &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;skin=&#39;normal&#39;; &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;text=[]; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;disabled=&#39;false&#39;;//兼容&nbsp;字符串/布尔 &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;load_text_arr(text) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;text_arr=[&#39;&#39;,&#39;&#39;]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(text.length==2) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text_arr=[text[0],text[1]]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;text_arr; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;text_arr=load_text_arr(text); &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;change=function(result){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;change&#39;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(result); &nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;//选中 &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;click_one() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(disabled==&#39;true&#39;&nbsp;||&nbsp;disabled==true)&nbsp;return&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;result=true; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//适配value &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(value===&#39;true&#39;) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result=&#39;false&#39;; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else&nbsp;if(value===&#39;false&#39;){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result=&#39;true&#39;; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else&nbsp;if(value===true){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result=false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else&nbsp;if(value===false){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result=true; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else&nbsp;if(value===1){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result=0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else&nbsp;if(value===0){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result=1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else&nbsp;if(value===&#39;1&#39;){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result=&#39;0&#39;; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else&nbsp;if(value===&#39;0&#39;){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result=&#39;1&#39;; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value&nbsp;=&nbsp;result; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;change(value); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp; &lt;/script&gt; &lt;!--&nbsp;svelte-ignore&nbsp;a11y-click-events-have-key-events&nbsp;--&gt; {#if&nbsp;skin==&#39;normal&#39;} &nbsp;&nbsp;&nbsp;&nbsp;{#if&nbsp;value===1&nbsp;||&nbsp;value===&#39;1&#39;&nbsp;||&nbsp;value===true&nbsp;||&nbsp;value===&#39;true&#39;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;on:click={click_one}&nbsp;class=&quot;layui-unselect&nbsp;layui-form-switch&nbsp;layui-form-onswitch&nbsp;{&nbsp;(disabled==true&nbsp;||&nbsp;disabled==&#39;true&#39;)&nbsp;?&nbsp;&#39;layui-disabled&#39;&nbsp;:&nbsp;&#39;&#39;}&quot;&nbsp;lay-skin=&quot;_switch&quot;&gt;&lt;em&gt;{text_arr[0]}&lt;/em&gt;&lt;i&gt;&lt;/i&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;{:else} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;on:click={click_one}&nbsp;class=&quot;layui-unselect&nbsp;layui-form-switch&nbsp;{&nbsp;&nbsp;(disabled==true&nbsp;||&nbsp;disabled==&#39;true&#39;)&nbsp;?&nbsp;&#39;layui-disabled&#39;&nbsp;:&nbsp;&#39;&#39;}&quot;&nbsp;lay-skin=&quot;_switch&quot;&gt;&lt;em&gt;{text_arr[1]}&lt;/em&gt;&lt;i&gt;&lt;/i&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;{/if} {/if} &lt;style&gt; &lt;/style&gt;</pre><p><br/></p><p>【App.svelte】<br/></p><pre class="prism-highlight prism-language-markup">&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;import&nbsp;LaySwitch&nbsp;from&nbsp;&#39;../laylte/LaySwitch.svelte&#39;; &nbsp;&nbsp;&nbsp;&nbsp;//export&nbsp;let&nbsp;name; &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;switch_change(value) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;change1--xx&#39;,value); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;switch_value=1; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;switch2_value=false; &lt;/script&gt; &lt;svelte:head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;layui&nbsp;-&nbsp;表单&nbsp;-&nbsp;开关&lt;/title&gt; &lt;/svelte:head&gt; &lt;!--&nbsp;svelte-ignore&nbsp;a11y-label-has-associated-control&nbsp;--&gt; &lt;main&gt; &nbsp;&nbsp;&lt;blockquote&nbsp;class=&quot;layui-elem-quote&nbsp;layui-text&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;开关 &nbsp;&nbsp;&lt;/blockquote&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;20px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;开关*&nbsp;演示&lt;/legend&gt; &nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;form&nbsp;class=&quot;layui-form&quot;&nbsp;action=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;开关1&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LaySwitch&nbsp;&nbsp;bind:value=&quot;{switch_value}&quot;&nbsp;text={[&#39;true&#39;,&#39;false&#39;]}&nbsp;&nbsp;change={switch_change}&nbsp;&gt;&lt;/LaySwitch&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;开关2&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LaySwitch&nbsp;&nbsp;bind:value=&quot;{switch_value}&quot;&nbsp;&nbsp;text={[&#39;开&#39;,&#39;关&#39;]}&nbsp;change={switch_change}&nbsp;&gt;&lt;/LaySwitch&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;开关3&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LaySwitch&nbsp;&nbsp;bind:value=&quot;{switch_value}&quot;&nbsp;&nbsp;text={[&#39;&#39;,&#39;&#39;]}&nbsp;change={switch_change}&nbsp;&gt;&lt;/LaySwitch&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;开关4&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LaySwitch&nbsp;&nbsp;bind:value=&quot;{switch_value}&quot;&nbsp;&nbsp;text={[]}&nbsp;change={switch_change}&nbsp;&gt;&lt;/LaySwitch&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;开关5&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LaySwitch&nbsp;&nbsp;bind:value=&quot;{switch_value}&quot;&nbsp;&nbsp;change={switch_change}&nbsp;&gt;&lt;/LaySwitch&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;开关6&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LaySwitch&nbsp;&nbsp;bind:value=&quot;{switch_value}&quot;&nbsp;disabled=&quot;true&quot;&nbsp;&nbsp;change={switch_change}&nbsp;&gt;&lt;/LaySwitch&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;开关7&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LaySwitch&nbsp;&nbsp;bind:value=&quot;{switch_value}&quot;&nbsp;&nbsp;text={[&#39;开启&#39;,&#39;关闭&#39;]}&nbsp;change={switch_change}&nbsp;&gt;&lt;/LaySwitch&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;开关值&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-mid&quot;&gt;{switch_value}&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;开关8&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LaySwitch&nbsp;&nbsp;bind:value=&quot;{switch2_value}&quot;&nbsp;&nbsp;text={[&#39;好&#39;,&#39;不好&#39;]}&nbsp;change={switch_change}&nbsp;&gt;&lt;/LaySwitch&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;开关值&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-mid&quot;&gt;{switch2_value}&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;&nbsp;&lt;/form&gt; &lt;/main&gt;&nbsp; &lt;style&gt; &lt;/style&gt;</pre><p><img src="http://zashao.com/zb_users/upload/2022/08/202208291661780409707133.png" alt="image.png"/></p><p><img src="http://zashao.com/zb_users/upload/2022/08/202208291661780419172890.png" alt="image.png"/></p>Mon, 29 Aug 2022 21:38:17 +0800http://zashao.com/?id=101<p>【laylte/LayRadio.svelte】<br/></p><pre class="prism-highlight prism-language-markup">&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;//import&nbsp;{&nbsp;createEventDispatcher&nbsp;}&nbsp;from&nbsp;&#39;svelte&#39;; &nbsp;&nbsp;&nbsp;&nbsp;//const&nbsp;dispatch&nbsp;=&nbsp;createEventDispatcher(); &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;value=&#39;&#39;; &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;skin=&quot;normal&quot;; &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;options; &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;change=function(result){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;change&#39;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(result); &nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;//选中 &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;click_one(option) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(option.disabled)&nbsp;return&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(value&nbsp;==&nbsp;option.value)&nbsp;return&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value&nbsp;=&nbsp;option.value; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;change(option.value); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp; &lt;/script&gt; &lt;!--&nbsp;svelte-ignore&nbsp;a11y-click-events-have-key-events&nbsp;--&gt; {#if&nbsp;skin==&#39;normal&#39;} &nbsp;&nbsp;&nbsp;&nbsp;{#each&nbsp;options&nbsp;as&nbsp;option} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;on:click={click_one(option)}&nbsp;class=&quot;layui-unselect&nbsp;layui-form-checkbox&nbsp;{value==option.value&nbsp;?&nbsp;&#39;layui-form-checked&#39;&nbsp;:&nbsp;&#39;&#39;}&nbsp;{option.disabled==true&nbsp;?&nbsp;&#39;layui-checkbox-disabled&nbsp;layui-disabled&#39;&nbsp;:&nbsp;&#39;&#39;}&quot;&gt;&lt;span&gt;{option.text}&lt;/span&gt;&lt;i&nbsp;class=&quot;layui-icon&nbsp;layui-icon-circle-dot&quot;&gt;&lt;/i&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;{/each} {/if} &lt;!--&nbsp;svelte-ignore&nbsp;a11y-click-events-have-key-events&nbsp;--&gt; {#if&nbsp;skin==&#39;primary&#39;} &nbsp;&nbsp;&nbsp;&nbsp;{#each&nbsp;options&nbsp;as&nbsp;option} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;&nbsp;lay-skin=&quot;primary&quot;&nbsp;on:click={click_one(option)}&nbsp;class=&quot;layui-unselect&nbsp;layui-form-radio&nbsp;{value==option.value&nbsp;?&nbsp;&#39;&nbsp;layui-form-radioed&#39;&nbsp;:&nbsp;&#39;&#39;}&nbsp;{option.disabled==true&nbsp;?&nbsp;&#39;layui-radio-disabled&nbsp;layui-disabled&#39;&nbsp;:&nbsp;&#39;&#39;}&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{#if&nbsp;value==option.value} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;i&nbsp;class=&quot;layui-anim&nbsp;layui-icon&nbsp;layui-icon&nbsp;layui-icon-radio&nbsp;layui-anim-scaleSpring&quot;&gt;&lt;/i&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{:else} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;i&nbsp;class=&quot;layui-anim&nbsp;layui-icon&nbsp;layui-icon-circle&quot;&gt;&lt;/i&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{/if} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;{option.text}&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;{/each} {/if} &lt;style&gt; &lt;/style&gt;</pre><p>【App.svelte】<br/></p><pre class="prism-highlight prism-language-markup">&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;import&nbsp;LayRadio&nbsp;from&nbsp;&#39;../laylte/LayRadio.svelte&#39;; &nbsp;&nbsp;&nbsp;&nbsp;//export&nbsp;let&nbsp;name; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;options1&nbsp;=&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;1,&nbsp;text:&nbsp;&#39;#0d0887&#39;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;2,&nbsp;text:&nbsp;&#39;#6a00a8&#39;&nbsp;,&nbsp;disabled:true&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;3,&nbsp;text:&nbsp;&#39;#b12a90&#39;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;4,&nbsp;text:&nbsp;&#39;#e16462&#39;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;5,&nbsp;text:&nbsp;&#39;#fca636&#39;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;]; &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;options1_change(value,result) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;change1--xx&#39;,value,result); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;options1_value=&#39;3&#39;; &lt;/script&gt; &lt;svelte:head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;layui&nbsp;-&nbsp;表单&nbsp;-&nbsp;单选框&lt;/title&gt; &lt;/svelte:head&gt; &lt;!--&nbsp;svelte-ignore&nbsp;a11y-label-has-associated-control&nbsp;--&gt; &lt;main&gt; &nbsp;&nbsp;&lt;blockquote&nbsp;class=&quot;layui-elem-quote&nbsp;layui-text&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;单选框 &nbsp;&nbsp;&lt;/blockquote&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;20px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;单选框*&nbsp;演示&lt;/legend&gt; &nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;form&nbsp;class=&quot;layui-form&quot;&nbsp;action=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;单选框1&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LayRadio&nbsp;&nbsp;bind:value=&quot;{options1_value}&quot;&nbsp;options={options1}&nbsp;change={options1_change}&nbsp;&gt;&lt;/LayRadio&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;单选框2&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LayRadio&nbsp;&nbsp;bind:value=&quot;{options1_value}&quot;&nbsp;options={options1}&nbsp;change={options1_change}&nbsp;skin=&quot;primary&quot;&gt;&lt;/LayRadio&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;选项框值&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-mid&quot;&gt;{options1_value}&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;&nbsp;&lt;/form&gt; &lt;/main&gt;&nbsp; &lt;style&gt; &lt;/style&gt;</pre><p><img src="http://zashao.com/zb_users/upload/2022/08/202208171660743471785448.png" alt="image.png"/></p>Wed, 17 Aug 2022 13:36:46 +0800http://zashao.com/?id=100<p>【laylte/LayCheckbox.svelte】</p><pre class="prism-highlight prism-language-markup">&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;//import&nbsp;{&nbsp;createEventDispatcher&nbsp;}&nbsp;from&nbsp;&#39;svelte&#39;; &nbsp;&nbsp;&nbsp;&nbsp;//const&nbsp;dispatch&nbsp;=&nbsp;createEventDispatcher(); &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;value=&#39;&#39;; &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;skin=&quot;normal&quot;; &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;options; &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;split=&quot;,&quot;;//分割字符串，通常是英文逗号 &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;load_value_obj(value) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;obj={}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;value_arr=[]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value_arr=value.split(split); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}catch(e){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value_arr=[]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;i&nbsp;in&nbsp;value_arr) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj[value_arr[i]]=1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;obj; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;$:&nbsp;value_obj=load_value_obj(value); &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;get_value_str(value_obj) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;value_str_arr=[]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;i&nbsp;in&nbsp;value_obj) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(value_obj[i]==1)&nbsp;value_str_arr.push(i); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;value_str_arr.join(split); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;change=function(value,result){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;change&#39;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(value,result); &nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;//选中 &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;click_one(option) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(option.disabled)&nbsp;return&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;change_result; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(value_obj[option.value]==1) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value_obj[option.value]=0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;change_result=false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value_obj[option.value]=1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;change_result=true; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;change(option.value,change_result); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=get_value_str(value_obj); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(value_obj); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp; &lt;/script&gt; &lt;!--&nbsp;svelte-ignore&nbsp;a11y-click-events-have-key-events&nbsp;--&gt; {#if&nbsp;skin==&#39;normal&#39;} &nbsp;&nbsp;&nbsp;&nbsp;{#each&nbsp;options&nbsp;as&nbsp;option} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;on:click={click_one(option)}&nbsp;class=&quot;layui-unselect&nbsp;layui-form-checkbox&nbsp;{value_obj[option.value]==1&nbsp;?&nbsp;&#39;layui-form-checked&#39;&nbsp;:&nbsp;&#39;&#39;}&nbsp;{option.disabled==true&nbsp;?&nbsp;&#39;layui-checkbox-disabled&nbsp;layui-disabled&#39;&nbsp;:&nbsp;&#39;&#39;}&quot;&gt;&lt;span&gt;{option.text}&lt;/span&gt;&lt;i&nbsp;class=&quot;layui-icon&nbsp;layui-icon-ok&quot;&gt;&lt;/i&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;{/each} {/if} &lt;!--&nbsp;svelte-ignore&nbsp;a11y-click-events-have-key-events&nbsp;--&gt; {#if&nbsp;skin==&#39;primary&#39;} &nbsp;&nbsp;&nbsp;&nbsp;{#each&nbsp;options&nbsp;as&nbsp;option} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;&nbsp;lay-skin=&quot;primary&quot;&nbsp;on:click={click_one(option)}&nbsp;class=&quot;layui-unselect&nbsp;layui-form-checkbox&nbsp;{value_obj[option.value]==1&nbsp;?&nbsp;&#39;layui-form-checked&#39;&nbsp;:&nbsp;&#39;&#39;}&nbsp;{option.disabled==true&nbsp;?&nbsp;&#39;layui-checkbox-disabled&nbsp;layui-disabled&#39;&nbsp;:&nbsp;&#39;&#39;}&quot;&gt;&lt;span&gt;{option.text}&lt;/span&gt;&lt;i&nbsp;class=&quot;layui-icon&nbsp;layui-icon-ok&quot;&gt;&lt;/i&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;{/each} {/if} &lt;style&gt; &lt;/style&gt;</pre><p>【App.svelte】</p><pre class="prism-highlight prism-language-markup">&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;import&nbsp;LayCheckbox&nbsp;from&nbsp;&#39;../laylte/LayCheckbox.svelte&#39;; &nbsp;&nbsp;&nbsp;&nbsp;//export&nbsp;let&nbsp;name; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;options1&nbsp;=&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;1,&nbsp;text:&nbsp;&#39;#0d0887&#39;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;2,&nbsp;text:&nbsp;&#39;#6a00a8&#39;&nbsp;,&nbsp;disabled:true&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;3,&nbsp;text:&nbsp;&#39;#b12a90&#39;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;4,&nbsp;text:&nbsp;&#39;#e16462&#39;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;5,&nbsp;text:&nbsp;&#39;#fca636&#39;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;]; &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;options1_change(value,result) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;change1--xx&#39;,value,result); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;options1_value=&#39;1,3&#39;; &lt;/script&gt; &lt;svelte:head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;layui&nbsp;-&nbsp;表单&nbsp;-&nbsp;复选框&lt;/title&gt; &lt;/svelte:head&gt; &lt;!--&nbsp;svelte-ignore&nbsp;a11y-label-has-associated-control&nbsp;--&gt; &lt;main&gt; &nbsp;&nbsp;&lt;blockquote&nbsp;class=&quot;layui-elem-quote&nbsp;layui-text&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;复选框 &nbsp;&nbsp;&lt;/blockquote&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;20px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;复选框*&nbsp;演示&lt;/legend&gt; &nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;form&nbsp;class=&quot;layui-form&quot;&nbsp;action=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;复选框1&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LayCheckbox&nbsp;&nbsp;bind:value=&quot;{options1_value}&quot;&nbsp;options={options1}&nbsp;change={options1_change}&nbsp;&gt;&lt;/LayCheckbox&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;复选框2&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LayCheckbox&nbsp;&nbsp;bind:value=&quot;{options1_value}&quot;&nbsp;options={options1}&nbsp;change={options1_change}&nbsp;skin=&quot;primary&quot;&gt;&lt;/LayCheckbox&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;选项框值&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-mid&quot;&gt;{options1_value}&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;&nbsp;&lt;/form&gt; &lt;/main&gt;&nbsp; &lt;style&gt; &lt;/style&gt;</pre><p><img src="http://zashao.com/zb_users/upload/2022/07/202207311659274539183468.png" alt="image.png"/></p><p>也支持上disabled</p>Sun, 31 Jul 2022 21:33:34 +0800http://zashao.com/?id=99<p>从css部分进入了js部分了，想了想还是取个名字吧。框架就叫laylte吧，layui+Svelte=laylte。</p><p>于是有了专属文件夹了laylte</p><p>【laylte/LaySelect.svelte】</p><pre class="prism-highlight prism-language-markup">&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;//import&nbsp;{&nbsp;createEventDispatcher&nbsp;}&nbsp;from&nbsp;&#39;svelte&#39;; &nbsp;&nbsp;&nbsp;&nbsp;//const&nbsp;dispatch&nbsp;=&nbsp;createEventDispatcher(); &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;value=&#39;&#39;; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;value_old=&#39;&#39;; &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;type=&quot;normal&quot;; &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;options; &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;keyword=&quot;&quot;; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;keyword_bak=null; &nbsp;&nbsp;&nbsp;&nbsp;//转换成obj方便读取 &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;load_options_obj() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;options_obj={}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(type==&quot;normal&quot;&nbsp;||&nbsp;type==&quot;search&quot;) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;i&nbsp;in&nbsp;options) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options_obj[options[i].value]=options[i]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else&nbsp;if(type==&quot;group&quot;){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;i&nbsp;in&nbsp;options) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;this_options=options[i].options &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;j&nbsp;in&nbsp;this_options) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options_obj[this_options[j].value]=this_options[j]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;options_obj; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;options_obj=load_options_obj(); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;keyword_input; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;open=false; &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;placeholder=&#39;请选择&#39;; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;change=function(option){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;change&#39;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(option); &nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;//value转text的方法 &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;read_text(value) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(options_obj); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(value); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(value!=&#39;&#39;) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(options_obj[value].text) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;options_obj[value].text; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;&#39;&#39;; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;&#39;&#39;; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;//打开隐藏 &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;select_display() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(keyword_bak===null) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;keyword_bak=keyword; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;keyword=keyword_bak; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;open=!open; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(open){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value_old=value; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(type==&#39;search&#39;) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(()=&gt;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;keyword_input.focus(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},300); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;select_click(obj) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;select_click&#39;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(obj); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(obj.disabled) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;open=false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=obj.value; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(value_old!=value) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;change(obj); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;select_click_none() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;open=false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=&#39;&#39;; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(value_old!=value) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;change({value:&#39;&#39;,text:placeholder}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;shade_close() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;shade_close&#39;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;open=false; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;option_keywords(options,keyword) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;new_options=[]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;i&nbsp;in&nbsp;options) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(keyword==&#39;&#39;&nbsp;||&nbsp;options[i].text.indexOf(keyword)&gt;=0) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new_options.push(options[i]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new_options; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;$:&nbsp;search_options=option_keywords(options,keyword); &nbsp;&nbsp;&nbsp;&nbsp; &lt;/script&gt; &lt;!--&nbsp;svelte-ignore&nbsp;a11y-click-events-have-key-events&nbsp;--&gt; &lt;div&nbsp;class=&quot;layui-unselect&nbsp;layui-form-select&nbsp;{open==true&nbsp;?&nbsp;&#39;layui-form-selected&#39;&nbsp;:&nbsp;&#39;&#39;}&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;!--遮罩层--&gt; &nbsp;&nbsp;&nbsp;&nbsp;{#if&nbsp;open==true} &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;style=&quot;background:rgba(0,0,0,0);&nbsp;position:fixed;&nbsp;width:100%;height:100%;top:0;left:0;&quot;&nbsp;on:click={shade_close}&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;{/if} &nbsp;&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;常规下拉选项框&nbsp;--&gt; &nbsp;&nbsp;&nbsp;&nbsp;{#if&nbsp;type==&#39;normal&#39;} &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-select-title&quot;&nbsp;on:click={select_display}&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;text&quot;&nbsp;placeholder=&quot;{placeholder}&quot;&nbsp;value={read_text(value)}&nbsp;readonly=&quot;&quot;&nbsp;class=&quot;layui-input&nbsp;layui-unselect&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;i&nbsp;class=&quot;layui-edge&quot;&gt;&lt;/i&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;dl&nbsp;class=&quot;layui-anim&nbsp;layui-anim-upbit&nbsp;{type==&#39;group&#39;&nbsp;?&nbsp;&#39;layui-select-group&#39;&nbsp;:&#39;&#39;}&quot;&nbsp;style=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&nbsp;lay-value=&quot;&quot;&nbsp;class=&quot;layui-select-tips&nbsp;{value==&#39;&#39;&nbsp;?&nbsp;&#39;layui-this&#39;&nbsp;:&nbsp;&#39;&#39;}&quot;&nbsp;on:click={select_click_none}&gt;{placeholder}&lt;/dd&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{#each&nbsp;options&nbsp;as&nbsp;option} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&nbsp;lay-value=&quot;{option.value}&quot;&nbsp;class=&quot;{value==option.value&nbsp;?&nbsp;&#39;layui-this&#39;&nbsp;:&nbsp;&#39;&#39;}&nbsp;{option.disabled==true&nbsp;?&nbsp;&#39;layui-disabled&#39;:&#39;&#39;}&quot;&nbsp;on:click={select_click(option)}&gt;{option.text}&lt;/dd&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{/each} &nbsp;&nbsp;&nbsp;&nbsp;&lt;/dl&gt; &nbsp;&nbsp;&nbsp;&nbsp;{/if} &nbsp;&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;分组下拉选项框&nbsp;--&gt; &nbsp;&nbsp;&nbsp;&nbsp;{#if&nbsp;type==&#39;group&#39;} &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-select-title&quot;&nbsp;on:click={select_display}&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;text&quot;&nbsp;placeholder=&quot;{placeholder}&quot;&nbsp;value={read_text(value)}&nbsp;readonly=&quot;&quot;&nbsp;class=&quot;layui-input&nbsp;layui-unselect&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;i&nbsp;class=&quot;layui-edge&quot;&gt;&lt;/i&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;dl&nbsp;class=&quot;layui-anim&nbsp;layui-anim-upbit&nbsp;layui-select-group&quot;&nbsp;style=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&nbsp;lay-value=&quot;&quot;&nbsp;class=&quot;layui-select-tips&nbsp;{value==&#39;&#39;&nbsp;?&nbsp;&#39;layui-this&#39;&nbsp;:&nbsp;&#39;&#39;}&quot;&nbsp;on:click={select_click_none}&gt;{placeholder}&lt;/dd&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{#each&nbsp;options&nbsp;as&nbsp;group} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dt&gt;{group.group}&lt;/dt&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{#each&nbsp;group.options&nbsp;as&nbsp;option} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&nbsp;lay-value=&quot;{option.value}&quot;&nbsp;class=&quot;{value==option.value&nbsp;?&nbsp;&#39;layui-this&#39;&nbsp;:&nbsp;&#39;&#39;}&nbsp;{option.disabled==true&nbsp;?&nbsp;&#39;layui-disabled&#39;:&#39;&#39;}&quot;&nbsp;on:click={select_click(option)}&gt;{option.text}&lt;/dd&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{/each} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{/each} &nbsp;&nbsp;&nbsp;&nbsp;&lt;/dl&gt; &nbsp;&nbsp;&nbsp;&nbsp;{/if} &nbsp;&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;搜索下拉选项框&nbsp;--&gt; &nbsp;&nbsp;&nbsp;&nbsp;{#if&nbsp;type==&#39;search&#39;} &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-select-title&quot;&nbsp;on:click={select_display}&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{#if&nbsp;open==true} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;bind:this={keyword_input}&nbsp;type=&quot;text&quot;&nbsp;placeholder=&quot;{placeholder}&quot;&nbsp;bind:value={keyword}&nbsp;class=&quot;layui-input&nbsp;layui-unselect&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{:else} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;text&quot;&nbsp;placeholder=&quot;{placeholder}&quot;&nbsp;value={read_text(value)}&nbsp;readonly=&quot;&quot;&nbsp;class=&quot;layui-input&nbsp;layui-unselect&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{/if} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;i&nbsp;class=&quot;layui-edge&quot;&gt;&lt;/i&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;dl&nbsp;class=&quot;layui-anim&nbsp;layui-anim-upbit&nbsp;{type==&#39;group&#39;&nbsp;?&nbsp;&#39;layui-select-group&#39;&nbsp;:&#39;&#39;}&quot;&nbsp;style=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{#if&nbsp;search_options.length&gt;0} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&nbsp;lay-value=&quot;&quot;&nbsp;class=&quot;layui-select-tips&nbsp;{value==&#39;&#39;&nbsp;?&nbsp;&#39;layui-this&#39;&nbsp;:&nbsp;&#39;&#39;}&quot;&nbsp;on:click={select_click_none}&gt;{placeholder}&lt;/dd&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{#each&nbsp;search_options&nbsp;as&nbsp;option} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&nbsp;lay-value=&quot;{option.value}&quot;&nbsp;class=&quot;{value==option.value&nbsp;?&nbsp;&#39;layui-this&#39;&nbsp;:&nbsp;&#39;&#39;}&nbsp;{option.disabled==true&nbsp;?&nbsp;&#39;layui-disabled&#39;:&#39;&#39;}&quot;&nbsp;on:click={select_click(option)}&gt;{option.text}&lt;/dd&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{/each} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{/if} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{#if&nbsp;search_options.length==0} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&nbsp;class=&quot;layui-select-none&quot;&gt;无匹配项&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{/if} &nbsp;&nbsp;&nbsp;&nbsp;&lt;/dl&gt; &nbsp;&nbsp;&nbsp;&nbsp;{/if} &lt;/div&gt; &lt;style&gt; &lt;/style&gt;</pre><p>Svelte的感觉就像写以前php+模版，后端加前端的混合写法，可能大部分人写不习惯，个人是比较习惯，毕竟早些年php还没框架化的时候用得熟悉了。</p><p>App.svelte也是比较简单的，</p><p style="background-color: rgb(255, 255, 255); font-family: Consolas, &quot;Courier New&quot;, monospace; line-height: 19px; white-space: pre;"><span style="color: #8f08c4;">import</span>&nbsp;<span style="color: #1f377f;">LaySelect</span>&nbsp;<span style="color: #8f08c4;">from</span>&nbsp;<span style="color: #e21f1f;">&#39;</span><span style="color: #a31515;">../laylte/LaySelect.svelte</span><span style="color: #e21f1f;">&#39;</span>;后直接可以用了</p><p style="background-color: rgb(255, 255, 255); font-family: Consolas, &quot;Courier New&quot;, monospace; line-height: 19px; white-space: pre;">【App.svelte】</p><pre class="prism-highlight prism-language-markup">&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;import&nbsp;LaySelect&nbsp;from&nbsp;&#39;../laylte/LaySelect.svelte&#39;; &nbsp;&nbsp;&nbsp;&nbsp;//export&nbsp;let&nbsp;name; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;options1&nbsp;=&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;1,&nbsp;text:&nbsp;&#39;#0d0887&#39;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;2,&nbsp;text:&nbsp;&#39;#6a00a8&#39;&nbsp;,&nbsp;disabled:true&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;3,&nbsp;text:&nbsp;&#39;#b12a90&#39;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;4,&nbsp;text:&nbsp;&#39;#e16462&#39;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;5,&nbsp;text:&nbsp;&#39;#fca636&#39;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;]; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;options2&nbsp;=&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;group:&#39;高对比度&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options:[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;1,&nbsp;text:&nbsp;&#39;#0d0887&#39;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;2,&nbsp;text:&nbsp;&#39;#6a00a8&#39;&nbsp;,&nbsp;disabled:true&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;3,&nbsp;text:&nbsp;&#39;#b12a90&#39;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;group:&#39;低对比度&#39;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options:[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;4,&nbsp;text:&nbsp;&#39;#e16462&#39;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;5,&nbsp;text:&nbsp;&#39;#fca636&#39;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;]; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;options3&nbsp;=&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;1,&nbsp;text:&nbsp;&#39;lay1&#39;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;2,&nbsp;text:&nbsp;&#39;lay2&#39;&nbsp;,&nbsp;disabled:true&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;3,&nbsp;text:&nbsp;&#39;lay3&#39;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;4,&nbsp;text:&nbsp;&#39;ay1&#39;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;5,&nbsp;text:&nbsp;&#39;ay2&#39;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;]; &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;options1_change(value) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;change1--xx&#39;,value); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;options1_value=3; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;options2_value=3; &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;options2_change(value) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;change2--xx&#39;,value); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;options3_value=3; &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;options3_change(value) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;change3--xx&#39;,value); &nbsp;&nbsp;&nbsp;&nbsp;} &lt;/script&gt; &lt;svelte:head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;layui&nbsp;-&nbsp;表单&nbsp;-&nbsp;下拉选项框&lt;/title&gt; &lt;/svelte:head&gt; &lt;!--&nbsp;svelte-ignore&nbsp;a11y-label-has-associated-control&nbsp;--&gt; &lt;main&gt; &nbsp;&nbsp;&lt;blockquote&nbsp;class=&quot;layui-elem-quote&nbsp;layui-text&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;下拉选项框 &nbsp;&nbsp;&lt;/blockquote&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;20px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;下拉选项框&nbsp;*&nbsp;演示&lt;/legend&gt; &nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;form&nbsp;class=&quot;layui-form&quot;&nbsp;action=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;下拉选项框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LaySelect&nbsp;&nbsp;bind:value=&quot;{options1_value}&quot;&nbsp;options={options1}&nbsp;change={options1_change}&nbsp;&gt;&lt;/LaySelect&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;下拉选项框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LaySelect&nbsp;&nbsp;bind:value=&quot;{options1_value}&quot;&nbsp;options={options1}&nbsp;change={options1_change}&nbsp;&gt;&lt;/LaySelect&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;选项框值&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-mid&quot;&gt;{options1_value}&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;组下拉框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LaySelect&nbsp;type=&quot;group&quot;&nbsp;bind:value=&quot;{options2_value}&quot;&nbsp;options={options2}&nbsp;change={options2_change}&nbsp;&gt;&lt;/LaySelect&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;组下拉框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LaySelect&nbsp;type=&quot;group&quot;&nbsp;bind:value=&quot;{options2_value}&quot;&nbsp;options={options2}&nbsp;change={options2_change}&nbsp;&gt;&lt;/LaySelect&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;选项框值&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-mid&quot;&gt;{options2_value}&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;搜索下拉框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LaySelect&nbsp;type=&quot;search&quot;&nbsp;keyword=&quot;la&quot;&nbsp;&nbsp;bind:value=&quot;{options3_value}&quot;&nbsp;options={options3}&nbsp;change={options3_change}&nbsp;&gt;&lt;/LaySelect&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;搜索下拉框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LaySelect&nbsp;type=&quot;search&quot;&nbsp;keyword=&quot;la&quot;&nbsp;&nbsp;bind:value=&quot;{options3_value}&quot;&nbsp;options={options3}&nbsp;change={options3_change}&nbsp;&gt;&lt;/LaySelect&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;选项框值&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-mid&quot;&gt;{options3_value}&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;/form&gt; &lt;/main&gt;&nbsp; &lt;style&gt; &lt;/style&gt;</pre><p><br/></p><div style="background-color: rgb(255, 255, 255); font-family: Consolas, &quot;Courier New&quot;, monospace; line-height: 19px; white-space: pre;"><span style="color: #800000;">&lt;</span><span style="color: #2b91af;">LaySelect</span>&nbsp;&nbsp;<span style="color: #8f08c4;">bind</span>:<span style="color: #2b91af;">value</span>=<span style="color: #e21f1f;">&quot;</span><span style="color: #0000ff;">{</span><span style="color: #1f377f;">options1_value</span><span style="color: #0000ff;">}</span><span style="color: #e21f1f;">&quot;</span>&nbsp;<span style="color: #ff0000;">options</span>=<span style="color: #0000ff;">{</span><span style="color: #1f377f;">options1</span><span style="color: #0000ff;">}</span>&nbsp;<span style="color: #ff0000;">change</span>=<span style="color: #0000ff;">{</span><span style="color: #1f377f;">options1_change</span><span style="color: #0000ff;">}</span>&nbsp;<span style="color: #800000;">&gt;&lt;/</span><span style="color: #2b91af;">LaySelect</span><span style="color: #800000;">&gt;</span></div><p>跟vue差不多的方式，由于不太熟悉Svelte，先这么着，后面发现坑了再调整。</p><p><img src="http://zashao.com/zb_users/upload/2022/07/202207201658323908127919.png" alt="image.png"/></p><p>学习layui支持个分组的select</p><p><img src="http://zashao.com/zb_users/upload/2022/07/202207201658323969111286.png" alt="image.png"/></p><p>简单看了一下，有那么点意思了，后面再接再厉吧！<br/></p>Wed, 20 Jul 2022 11:23:58 +0800http://zashao.com/?id=98<p>App.svelte</p><pre class="prism-highlight prism-language-markup">&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;//export&nbsp;let&nbsp;name; &lt;/script&gt; &lt;svelte:head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;layui&nbsp;-&nbsp;表单&nbsp;-&nbsp;css部分&lt;/title&gt; &lt;/svelte:head&gt; &lt;!--&nbsp;svelte-ignore&nbsp;a11y-label-has-associated-control&nbsp;--&gt; &lt;main&gt; &nbsp;&nbsp;&lt;blockquote&nbsp;class=&quot;layui-elem-quote&nbsp;layui-text&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;鉴于小伙伴的普遍反馈，先温馨提醒两个常见“问题”：1.&nbsp;&lt;a&nbsp;href=&quot;../doc/base/faq.html#form&quot;&nbsp;target=&quot;_blank&quot;&gt;为什么select/checkbox/radio没显示？&lt;/a&gt;&nbsp;2.&nbsp;&lt;a&nbsp;href=&quot;../doc/modules/form.html#render&quot;&nbsp;target=&quot;_blank&quot;&gt;动态添加的表单元素如何更新？&lt;/a&gt; &nbsp;&nbsp;&lt;/blockquote&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;20px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;表单集合演示&lt;/legend&gt; &nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;form&nbsp;class=&quot;layui-form&quot;&nbsp;action=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;单行输入框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;text&quot;&nbsp;name=&quot;title&quot;&nbsp;lay-verify=&quot;title&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;placeholder=&quot;请输入标题&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;验证必填项&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;text&quot;&nbsp;name=&quot;username&quot;&nbsp;lay-verify=&quot;required&quot;&nbsp;lay-reqtext=&quot;用户名是必填项，岂能为空？&quot;&nbsp;placeholder=&quot;请输入&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;验证手机&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;tel&quot;&nbsp;name=&quot;phone&quot;&nbsp;lay-verify=&quot;required|phone&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;验证邮箱&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;text&quot;&nbsp;name=&quot;email&quot;&nbsp;lay-verify=&quot;email&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;多规则验证&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;text&quot;&nbsp;name=&quot;number&quot;&nbsp;lay-verify=&quot;required|number&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;验证日期&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;text&quot;&nbsp;name=&quot;date&quot;&nbsp;id=&quot;date&quot;&nbsp;lay-verify=&quot;date&quot;&nbsp;placeholder=&quot;yyyy-MM-dd&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;验证链接&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;tel&quot;&nbsp;name=&quot;url&quot;&nbsp;lay-verify=&quot;url&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;验证身份证&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;text&quot;&nbsp;name=&quot;identity&quot;&nbsp;lay-verify=&quot;identity&quot;&nbsp;placeholder=&quot;&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;自定义验证&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;password&quot;&nbsp;name=&quot;password&quot;&nbsp;lay-verify=&quot;pass&quot;&nbsp;placeholder=&quot;请输入密码&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-mid&nbsp;layui-word-aux&quot;&gt;请填写6到12位密码&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;范围&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&nbsp;style=&quot;width:&nbsp;100px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;text&quot;&nbsp;name=&quot;price_min&quot;&nbsp;placeholder=&quot;￥&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-mid&quot;&gt;-&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&nbsp;style=&quot;width:&nbsp;100px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;text&quot;&nbsp;name=&quot;price_max&quot;&nbsp;placeholder=&quot;￥&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;单行选择框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;name=&quot;interest&quot;&nbsp;lay-filter=&quot;aihao&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;&quot;&gt;&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;0&quot;&gt;写作&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1&quot;&nbsp;selected=&quot;&quot;&gt;阅读&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;2&quot;&gt;游戏&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;3&quot;&gt;音乐&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;4&quot;&gt;旅行&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;分组选择框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;name=&quot;quiz&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;&quot;&gt;请选择问题&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;optgroup&nbsp;label=&quot;城市记忆&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;你工作的第一个城市&quot;&gt;你工作的第一个城市&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/optgroup&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;optgroup&nbsp;label=&quot;学生时代&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;你的工号&quot;&gt;你的工号&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;你最喜欢的老师&quot;&gt;你最喜欢的老师&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/optgroup&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;搜索选择框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;name=&quot;modules&quot;&nbsp;lay-verify=&quot;required&quot;&nbsp;lay-search=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;&quot;&gt;直接选择或搜索选择&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1&quot;&gt;layer&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;2&quot;&gt;form&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;3&quot;&gt;layim&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;4&quot;&gt;element&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;5&quot;&gt;laytpl&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;6&quot;&gt;upload&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;7&quot;&gt;laydate&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;8&quot;&gt;laypage&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;9&quot;&gt;flow&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;10&quot;&gt;util&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;11&quot;&gt;code&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;12&quot;&gt;tree&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;13&quot;&gt;layedit&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;14&quot;&gt;nav&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;15&quot;&gt;tab&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;16&quot;&gt;table&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;17&quot;&gt;select&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;18&quot;&gt;checkbox&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;19&quot;&gt;switch&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;20&quot;&gt;radio&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;联动选择框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;name=&quot;quiz1&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;&quot;&gt;请选择省&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;浙江&quot;&nbsp;selected=&quot;&quot;&gt;浙江省&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;你的工号&quot;&gt;江西省&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;你最喜欢的老师&quot;&gt;福建省&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;name=&quot;quiz2&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;&quot;&gt;请选择市&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;杭州&quot;&gt;杭州&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;宁波&quot;&nbsp;disabled=&quot;&quot;&gt;宁波&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;温州&quot;&gt;温州&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;温州&quot;&gt;台州&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;温州&quot;&gt;绍兴&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;name=&quot;quiz3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;&quot;&gt;请选择县/区&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;西湖区&quot;&gt;西湖区&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;余杭区&quot;&gt;余杭区&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;拱墅区&quot;&gt;临安市&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-mid&nbsp;layui-word-aux&quot;&gt;此处只是演示联动排版，并未做联动交互&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;复选框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;checkbox&quot;&nbsp;name=&quot;like[write]&quot;&nbsp;title=&quot;写作&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;checkbox&quot;&nbsp;name=&quot;like[read]&quot;&nbsp;title=&quot;阅读&quot;&nbsp;checked=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;checkbox&quot;&nbsp;name=&quot;like[game]&quot;&nbsp;title=&quot;游戏&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&nbsp;pane=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;原始复选框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;checkbox&quot;&nbsp;name=&quot;like1[write]&quot;&nbsp;lay-skin=&quot;primary&quot;&nbsp;title=&quot;写作&quot;&nbsp;checked=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;checkbox&quot;&nbsp;name=&quot;like1[read]&quot;&nbsp;lay-skin=&quot;primary&quot;&nbsp;title=&quot;阅读&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;checkbox&quot;&nbsp;name=&quot;like1[game]&quot;&nbsp;lay-skin=&quot;primary&quot;&nbsp;title=&quot;游戏&quot;&nbsp;disabled=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;开关-默认关&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;checkbox&quot;&nbsp;name=&quot;close&quot;&nbsp;lay-skin=&quot;switch&quot;&nbsp;lay-text=&quot;ON|OFF&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;开关-默认开&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;checkbox&quot;&nbsp;checked=&quot;&quot;&nbsp;name=&quot;open&quot;&nbsp;lay-skin=&quot;switch&quot;&nbsp;lay-filter=&quot;switchTest&quot;&nbsp;lay-text=&quot;ON|OFF&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;单选框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;radio&quot;&nbsp;name=&quot;sex&quot;&nbsp;value=&quot;男&quot;&nbsp;title=&quot;男&quot;&nbsp;checked=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;radio&quot;&nbsp;name=&quot;sex&quot;&nbsp;value=&quot;女&quot;&nbsp;title=&quot;女&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;radio&quot;&nbsp;name=&quot;sex&quot;&nbsp;value=&quot;禁&quot;&nbsp;title=&quot;禁用&quot;&nbsp;disabled=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&nbsp;layui-form-text&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;普通文本域&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;textarea&nbsp;placeholder=&quot;请输入内容&quot;&nbsp;class=&quot;layui-textarea&quot;&gt;&lt;/textarea&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;!--&lt;div&nbsp;class=&quot;layui-form-item&nbsp;layui-form-text&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;编辑器&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;textarea&nbsp;class=&quot;layui-textarea&nbsp;layui-hide&quot;&nbsp;name=&quot;content&quot;&nbsp;lay-verify=&quot;content&quot;&nbsp;id=&quot;LAY_demo_editor&quot;&gt;&lt;/textarea&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;--&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;submit&quot;&nbsp;class=&quot;layui-btn&quot;&nbsp;lay-submit=&quot;&quot;&nbsp;lay-filter=&quot;demo1&quot;&gt;立即提交&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;reset&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&quot;&gt;重置&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;/form&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;!--&nbsp;示例-970&nbsp;--&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;50px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;赋值和取值&lt;/legend&gt; &nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;form&nbsp;class=&quot;layui-form&quot;&nbsp;action=&quot;&quot;&nbsp;lay-filter=&quot;example&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;输入框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;text&quot;&nbsp;name=&quot;username&quot;&nbsp;lay-verify=&quot;title&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;placeholder=&quot;请输入标题&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;密码框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;password&quot;&nbsp;name=&quot;password&quot;&nbsp;placeholder=&quot;请输入密码&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;选择框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;name=&quot;interest&quot;&nbsp;lay-filter=&quot;aihao&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;&quot;&gt;&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;0&quot;&gt;写作&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1&quot;&gt;阅读&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;2&quot;&gt;游戏&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;3&quot;&gt;音乐&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;4&quot;&gt;旅行&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;复选框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;checkbox&quot;&nbsp;name=&quot;like[write]&quot;&nbsp;title=&quot;写作&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;checkbox&quot;&nbsp;name=&quot;like[read]&quot;&nbsp;title=&quot;阅读&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;checkbox&quot;&nbsp;name=&quot;like[daze]&quot;&nbsp;title=&quot;发呆&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;开关&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;checkbox&quot;&nbsp;name=&quot;close&quot;&nbsp;lay-skin=&quot;switch&quot;&nbsp;lay-text=&quot;ON|OFF&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;单选框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;radio&quot;&nbsp;name=&quot;sex&quot;&nbsp;value=&quot;男&quot;&nbsp;title=&quot;男&quot;&nbsp;checked=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;radio&quot;&nbsp;name=&quot;sex&quot;&nbsp;value=&quot;女&quot;&nbsp;title=&quot;女&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&nbsp;layui-form-text&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;文本域&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;textarea&nbsp;placeholder=&quot;请输入内容&quot;&nbsp;class=&quot;layui-textarea&quot;&nbsp;name=&quot;desc&quot;&gt;&lt;/textarea&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-normal&quot;&nbsp;id=&quot;LAY-component-form-setval&quot;&gt;赋值&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-normal&quot;&nbsp;id=&quot;LAY-component-form-getval&quot;&gt;取值&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;submit&quot;&nbsp;class=&quot;layui-btn&quot;&nbsp;lay-submit=&quot;&quot;&nbsp;lay-filter=&quot;demo1&quot;&gt;立即提交&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;/form&gt; &nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;50px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;方框风格的表单集合&lt;/legend&gt; &nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp;&lt;form&nbsp;class=&quot;layui-form&nbsp;layui-form-pane&quot;&nbsp;action=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;长输入框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;text&quot;&nbsp;name=&quot;title&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;placeholder=&quot;请输入标题&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;短输入框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;text&quot;&nbsp;name=&quot;username&quot;&nbsp;lay-verify=&quot;required&quot;&nbsp;placeholder=&quot;请输入&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;日期选择&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;text&quot;&nbsp;name=&quot;date&quot;&nbsp;id=&quot;date1&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;行内表单&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;text&quot;&nbsp;name=&quot;number&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;密码&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;password&quot;&nbsp;name=&quot;password&quot;&nbsp;placeholder=&quot;请输入密码&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-mid&nbsp;layui-word-aux&quot;&gt;请务必填写用户名&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;范围&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&nbsp;style=&quot;width:&nbsp;100px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;text&quot;&nbsp;name=&quot;price_min&quot;&nbsp;placeholder=&quot;￥&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-mid&quot;&gt;-&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&nbsp;style=&quot;width:&nbsp;100px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;text&quot;&nbsp;name=&quot;price_max&quot;&nbsp;placeholder=&quot;￥&quot;&nbsp;autocomplete=&quot;off&quot;&nbsp;class=&quot;layui-input&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;单行选择框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;name=&quot;interest&quot;&nbsp;lay-filter=&quot;aihao&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;&quot;&gt;&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;0&quot;&gt;写作&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;1&quot;&nbsp;selected=&quot;&quot;&gt;阅读&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;2&quot;&gt;游戏&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;3&quot;&gt;音乐&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;4&quot;&gt;旅行&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;行内选择框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;name=&quot;quiz1&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;&quot;&gt;请选择省&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;浙江&quot;&nbsp;selected=&quot;&quot;&gt;浙江省&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;你的工号&quot;&gt;江西省&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;你最喜欢的老师&quot;&gt;福建省&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;name=&quot;quiz2&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;&quot;&gt;请选择市&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;杭州&quot;&gt;杭州&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;宁波&quot;&nbsp;disabled=&quot;&quot;&gt;宁波&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;温州&quot;&gt;温州&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;温州&quot;&gt;台州&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;温州&quot;&gt;绍兴&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-inline&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;name=&quot;quiz3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;&quot;&gt;请选择县/区&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;西湖区&quot;&gt;西湖区&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;余杭区&quot;&gt;余杭区&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=&quot;拱墅区&quot;&gt;临安市&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&nbsp;pane=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;开关-开&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;checkbox&quot;&nbsp;checked=&quot;&quot;&nbsp;name=&quot;open&quot;&nbsp;lay-skin=&quot;switch&quot;&nbsp;lay-filter=&quot;switchTest&quot;&nbsp;title=&quot;开关&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&nbsp;pane=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;单选框&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;radio&quot;&nbsp;name=&quot;sex&quot;&nbsp;value=&quot;男&quot;&nbsp;title=&quot;男&quot;&nbsp;checked=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;radio&quot;&nbsp;name=&quot;sex&quot;&nbsp;value=&quot;女&quot;&nbsp;title=&quot;女&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;radio&quot;&nbsp;name=&quot;sex&quot;&nbsp;value=&quot;禁&quot;&nbsp;title=&quot;禁用&quot;&nbsp;disabled=&quot;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&nbsp;layui-form-text&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;layui-form-label&quot;&gt;文本域&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-input-block&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;textarea&nbsp;placeholder=&quot;请输入内容&quot;&nbsp;class=&quot;layui-textarea&quot;&gt;&lt;/textarea&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;class=&quot;layui-btn&quot;&nbsp;lay-submit=&quot;&quot;&nbsp;lay-filter=&quot;demo2&quot;&gt;跳转式提交&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;/form&gt; &lt;/main&gt;&nbsp; &lt;style&gt; &lt;/style&gt;</pre><p><img src="http://zashao.com/zb_users/upload/2022/07/202207051657027424172549.png" alt="image.png"/></p>Tue, 05 Jul 2022 21:22:32 +0800http://zashao.com/?id=97<p>App.svelte</p><pre class="prism-highlight prism-language-markup">&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;//export&nbsp;let&nbsp;name; &lt;/script&gt; &lt;svelte:head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;layui&nbsp;-&nbsp;按钮&lt;/title&gt; &lt;/svelte:head&gt; &lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;30px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;按钮主题&lt;/legend&gt; &nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-btn-container&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&quot;&gt;原始按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&quot;&gt;默认按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-normal&quot;&gt;百搭按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-warm&quot;&gt;暖色按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-danger&quot;&gt;警告按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-disabled&quot;&gt;禁用按钮&lt;/button&gt; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-btn-container&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-border&quot;&gt;原始按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-border-green&quot;&gt;主色按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-border-blue&quot;&gt;百搭按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-border-orange&quot;&gt;暖色按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-border-red&quot;&gt;警告按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-border-black&quot;&gt;深色按钮&lt;/button&gt; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;30px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;按钮尺寸&lt;/legend&gt; &nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-btn-container&quot;&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-lg&quot;&gt;大型按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&quot;&gt;默认按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-sm&quot;&gt;小型按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-xs&quot;&gt;迷你按钮&lt;/button&gt; &nbsp;&nbsp;&lt;/div&gt;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-btn-container&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-lg&nbsp;layui-btn-normal&quot;&gt;大型按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-normal&quot;&gt;默认按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-sm&nbsp;layui-btn-normal&quot;&gt;小型按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-xs&nbsp;layui-btn-normal&quot;&gt;迷你按钮&lt;/button&gt; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-btn-container&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-btn-lg&quot;&gt;大型按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&quot;&gt;默认按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-btn-sm&quot;&gt;小型按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-btn-xs&quot;&gt;迷你按钮&lt;/button&gt; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;div&nbsp;style=&quot;width:&nbsp;370px;&nbsp;margin:&nbsp;0;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-fluid&quot;&gt;流体按钮（即宽度最大化适应）&lt;/button&gt; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;30px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;灵活的图标按钮（更多图标请阅览：文档-图标）&lt;/legend&gt; &nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-btn-container&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-btn-container&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-danger&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-danger&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-danger&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-danger&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-danger&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-danger&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-btn-container&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-normal&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-normal&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-normal&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-normal&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-normal&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-normal&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;30px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;还可以是圆角按钮&lt;/legend&gt; &nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-btn-container&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-btn-radius&quot;&gt;原始按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-radius&quot;&gt;默认按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-normal&nbsp;layui-btn-radius&quot;&gt;百搭按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-warm&nbsp;layui-btn-radius&quot;&gt;暖色按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-danger&nbsp;layui-btn-radius&quot;&gt;警告按钮&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-disabled&nbsp;layui-btn-radius&quot;&gt;禁用按钮&lt;/button&gt; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;30px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;风格混搭的按钮&lt;/legend&gt; &nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-btn-container&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-lg&nbsp;layui-btn-primary&nbsp;layui-btn-radius&quot;&gt;大型加圆角&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;a&nbsp;href=&quot;../doc/element/button.html&quot;&nbsp;class=&quot;layui-btn&quot;&nbsp;target=&quot;_blank&quot;&gt;跳转的按钮&lt;/a&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-sm&nbsp;layui-btn-normal&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&nbsp;删除&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-xs&nbsp;layui-btn-disabled&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&nbsp;分享&lt;/button&gt; &nbsp;&nbsp;&lt;/div&gt;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;30px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;按钮组&lt;/legend&gt; &nbsp;&nbsp;&lt;/fieldset&gt;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-btn-group&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&quot;&gt;增加&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;&quot;&gt;编辑&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&quot;&gt;删除&lt;/button&gt; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-btn-group&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-btn-group&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-btn-sm&quot;&gt;文字&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&nbsp;layui-btn-primary&nbsp;layui-btn-sm&quot;&gt;&lt;i&nbsp;class=&quot;layui-icon&quot;&gt;&lt;/i&gt;&lt;/button&gt; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;30px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;按钮容器&lt;/legend&gt; &nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-btn-container&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&quot;&gt;按钮一&lt;/button&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&quot;&gt;按钮二&lt;/button&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&quot;&gt;按钮三&lt;/button&gt;&nbsp; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-btn-container&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&quot;&gt;按钮一&lt;/button&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&quot;&gt;按钮二&lt;/button&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&quot;&gt;按钮三&lt;/button&gt;&nbsp; &nbsp;&nbsp;&lt;/div&gt; &lt;style&gt; &lt;/style&gt;</pre><p><img src="http://zashao.com/zb_users/upload/2022/06/202206211655817726337838.png" alt="image.png"/></p>Tue, 21 Jun 2022 21:21:04 +0800http://zashao.com/?id=96<p>跟着layui官方的思路来，先是框架的css部分，这部分基本照搬过来。先前已经研究过了直接可以加载layui.css</p><p>public/index.html</p><pre class="prism-highlight prism-language-markup">&lt;!DOCTYPE&nbsp;html&gt; &lt;html&nbsp;lang=&quot;en&quot;&gt; &lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;charset=&#39;utf-8&#39;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;name=&#39;viewport&#39;&nbsp;content=&#39;width=device-width,initial-scale=1&#39;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&#39;icon&#39;&nbsp;type=&#39;image/png&#39;&nbsp;href=&#39;favicon.png&#39;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&#39;stylesheet&#39;&nbsp;href=&#39;global.css&#39;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&#39;stylesheet&#39;&nbsp;href=&#39;css/layui.css&#39;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;rel=&#39;stylesheet&#39;&nbsp;href=&#39;build/bundle.css&#39;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;defer&nbsp;src=&#39;build/bundle.js&#39;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>App.svelte</p><pre class="prism-highlight prism-language-markup">&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;//export&nbsp;let&nbsp;name; &lt;/script&gt; &lt;svelte:head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;layui&nbsp;-&nbsp;栅格系统与后台布局&lt;/title&gt; &lt;/svelte:head&gt; &lt;div&nbsp;style=&quot;margin:&nbsp;0&nbsp;auto;&nbsp;max-width:&nbsp;1140px;&quot;&gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;blockquote&nbsp;class=&quot;layui-elem-quote&quot;&gt;注意：下述演示中的颜色只是做一个区分作用，并非栅格内置。&lt;/blockquote&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;20px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;始终等比例水平排列&lt;/legend&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-xs6&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;6/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-xs6&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;6/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-xs3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;3/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-xs3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;3/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-xs3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;3/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-xs3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;3/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;20px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;移动设备、桌面端的组合响应式展现&lt;/legend&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-xs12&nbsp;layui-col-md8&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;移动：12/12、桌面：8/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-xs6&nbsp;layui-col-md4&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;移动：6/12、桌面：4/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-xs6&nbsp;layui-col-md12&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg2&quot;&gt;移动：6/12、桌面：12/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;50px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;移动设备、平板、桌面端的复杂组合响应式展现&lt;/legend&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-xs6&nbsp;layui-col-sm6&nbsp;layui-col-md4&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;移动：6/12&nbsp;|&nbsp;平板：6/12&nbsp;|&nbsp;桌面：4/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-xs6&nbsp;layui-col-sm6&nbsp;layui-col-md4&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;layui-bg-red&quot;&gt;移动：6/12&nbsp;|&nbsp;平板：6/12&nbsp;|&nbsp;桌面：4/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-xs4&nbsp;layui-col-sm12&nbsp;layui-col-md4&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;layui-bg-blue&quot;&gt;移动：4/12&nbsp;|&nbsp;平板：12/12&nbsp;|&nbsp;桌面：4/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-xs4&nbsp;layui-col-sm7&nbsp;layui-col-md8&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;layui-bg-green&quot;&gt;移动：4/12&nbsp;|&nbsp;平板：7/12&nbsp;|&nbsp;桌面：8/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-xs4&nbsp;layui-col-sm5&nbsp;layui-col-md4&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;layui-bg-black&quot;&gt;移动：4/12&nbsp;|&nbsp;平板：5/12&nbsp;|&nbsp;桌面：4/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;50px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;常规布局：从小屏幕堆叠到桌面水平排列&lt;/legend&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md1&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;1/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md1&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;1/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md1&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;1/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md1&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;1/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md1&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;1/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md1&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;1/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md1&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;1/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md1&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;1/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md1&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;1/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md1&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;1/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md1&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;1/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md1&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;1/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md9&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;75%&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;25%&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md4&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;33.33%&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md4&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;33.33%&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md4&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;33.33%&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md6&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;50%&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md6&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;50%&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;50px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;列间隔&lt;/legend&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&nbsp;layui-col-space1&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;1/4&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;1/4&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;1/4&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;1/4&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&nbsp;layui-col-space5&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md4&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;1/3&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md4&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;1/3&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md4&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;1/3&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&nbsp;layui-col-space10&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md9&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;9/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;3/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&nbsp;layui-col-space15&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md7&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;7/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md5&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;5/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&nbsp;layui-col-space30&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md7&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;7/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md5&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;5/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;50px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;列偏移&lt;/legend&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md4&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;4/12&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md4&nbsp;layui-col-md-offset4&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;偏移4列&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md1&nbsp;layui-col-md-offset5&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;偏移5列&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md1&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;不偏移&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md3&nbsp;layui-col-md-offset3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;偏移3列&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md3&nbsp;layui-col-md-offset1&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;偏移1列&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&nbsp;style=&quot;margin-top:&nbsp;50px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;栅格嵌套&lt;/legend&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md5&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&nbsp;grid-demo&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;内部列&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md9&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg2&quot;&gt;内部列&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md12&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg3&quot;&gt;内部列&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md7&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&nbsp;grid-demo&nbsp;grid-demo-bg1&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md12&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;内部列&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md9&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg2&quot;&gt;内部列&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg3&quot;&gt;内部列&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-fluid&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;fieldset&nbsp;class=&quot;layui-elem-field&nbsp;layui-field-title&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;流体容器（宽度自适应，不固定）&lt;/legend&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-sm3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;25%&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-sm3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;25%&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-sm3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&nbsp;grid-demo-bg1&quot;&gt;25%&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-sm3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;grid-demo&quot;&gt;25%&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;/div&gt; &lt;style&gt; &lt;/style&gt;</pre><p><img src="http://zashao.com/zb_users/upload/2022/06/202206161655385648165478.png" alt="image.png"/></p>Thu, 16 Jun 2022 21:17:29 +0800http://zashao.com/?id=95<p>最近开始接触Svelte，感觉发现了一个新大陆。同时考虑到国内Svelte用得非常少，这么好的框架没什么人用，主要就是因为没有ui框架，于是决定借用别人的轮子造一个。这里选择了layui，比较经典的一款框架。由于时代的原因，很遗憾下架了，一些高手推出了vue版layui，这里自己决定来个Svelte版的。</p><p><br/></p><p>个人非常喜欢layui就是喜欢改框架的一行调用方式，如layer.alert()；layer.open()等等。而现在工程化后，很多年没见过一句话调用的框架了，我决定尽量让框架简单明了。</p><p><br/></p><p>有点说大话了，刚接触Svelte，啥都不会呢。先常识性的学习吧，看看一些功能点如何处理的。</p><p>1、先尝试一下router。svelte-spa-router</p><p>router.js</p><pre class="prism-highlight prism-language-javascript">import&nbsp;Index&nbsp;from&nbsp;&#39;./views/Index.svelte&#39; import&nbsp;List&nbsp;from&nbsp;&#39;./views/List.svelte&#39; import&nbsp;View&nbsp;from&nbsp;&#39;./views/View.svelte&#39; export&nbsp;const&nbsp;routes&nbsp;=&nbsp;{ &nbsp;&nbsp;&#39;/&#39;:Index, &nbsp;&nbsp;&#39;/List&#39;:List, &nbsp;//&nbsp;&#39;/View/*&#39;:View &nbsp;&nbsp;&#39;/View/:id/&#39;:View }</pre><p>2、常规点：首页、列表、内容页</p><p>首页Index.svelte 体验一个onMount</p><pre class="prism-highlight prism-language-markup">&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;import&nbsp;{&nbsp;onMount&nbsp;}&nbsp;from&nbsp;&#39;svelte&#39;; &nbsp;&nbsp;&nbsp;&nbsp;import&nbsp;views&nbsp;from&nbsp;&#39;./views.js&#39;; &nbsp;&nbsp;&nbsp;&nbsp;views.init(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;title=&#39;Index&#39; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;import&nbsp;Select&nbsp;from&nbsp;&#39;../Select.svelte&#39;; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;options&nbsp;=&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;1,&nbsp;text:&nbsp;&#39;#0d0887&#39;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;2,&nbsp;text:&nbsp;&#39;#6a00a8&#39;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;3,&nbsp;text:&nbsp;&#39;#b12a90&#39;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;4,&nbsp;text:&nbsp;&#39;#e16462&#39;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;value:&nbsp;5,&nbsp;text:&nbsp;&#39;#fca636&#39;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;]; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;dom_node; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;w=0; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;h=0; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;top=0; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;left=0; &nbsp;&nbsp;&nbsp;&nbsp;onMount(()&nbsp;=&gt;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(dom_node); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(dom_node.width); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;get_size(); &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;get_topleft(objLookingFor) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;posX&nbsp;=&nbsp;objLookingFor.offsetLeft; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;posY&nbsp;=&nbsp;objLookingFor.offsetTop-dom_node.parentNode.scrollTop; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;aBox&nbsp;=&nbsp;objLookingFor;//需要获得位置的对象 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;do&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aBox&nbsp;=&nbsp;aBox.offsetParent; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;posX&nbsp;+=&nbsp;aBox.offsetLeft; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;posY&nbsp;+=&nbsp;aBox.offsetTop; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;while(&nbsp;aBox.tagName&nbsp;!=&nbsp;&quot;BODY&quot;&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(posX,posY); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;get_size() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;get_size&#39;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;w=dom_node.clientWidth; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h=dom_node.clientHeight; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top=dom_node.offsetTop; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left=dom_node.offsetLeft; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//w=w,h=h,top=top,left=left; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;get_size&#39;,w,h,top,left); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//console.log(dom_node.offsetParent); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;get_topleft(dom_node); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(()=&gt;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;get_size(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},500); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;new_list(list) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;list2=[]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;i&nbsp;in&nbsp;list) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list2.push(list[i]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list2.push(list[i]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;list2; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;now_change(value) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.error(&#39;change&#39;,value); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;setTimeout(()=&gt;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options[0].value=&#39;11&#39;; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options=options; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;},3000); &nbsp;&nbsp;&nbsp;&nbsp; &lt;/script&gt; &lt;div&nbsp;class=&quot;my_div&quot;&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;常规布局（以中型屏幕桌面为例）： &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md9&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;你的内容&nbsp;9/12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-md3&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;你的内容&nbsp;3/12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;移动设备、平板、桌面端的不同表现： &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-row&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-xs6&nbsp;layui-col-sm6&nbsp;layui-col-md4&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;移动：6/12&nbsp;|&nbsp;平板：6/12&nbsp;|&nbsp;桌面：4/12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-xs6&nbsp;layui-col-sm6&nbsp;layui-col-md4&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;移动：6/12&nbsp;|&nbsp;平板：6/12&nbsp;|&nbsp;桌面：4/12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-xs4&nbsp;layui-col-sm12&nbsp;layui-col-md4&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;移动：4/12&nbsp;|&nbsp;平板：12/12&nbsp;|&nbsp;桌面：4/12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-xs4&nbsp;layui-col-sm7&nbsp;layui-col-md8&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;移动：4/12&nbsp;|&nbsp;平板：7/12&nbsp;|&nbsp;桌面：8/12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;layui-col-xs4&nbsp;layui-col-sm5&nbsp;layui-col-md4&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;移动：4/12&nbsp;|&nbsp;平板：5/12&nbsp;|&nbsp;桌面：4/12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;/div&gt; &lt;div&nbsp;style=&quot;background:rgba(0,0,0,0.1);&nbsp;height:200px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;page:&nbsp;{title} &lt;/div&gt; &lt;Select&nbsp;type=&quot;a&quot;&nbsp;options={options}&nbsp;list={new_list(options)}&nbsp;on:testchange={now_change}&nbsp;&gt;&lt;/Select&gt; &lt;Select&nbsp;type=&quot;b&quot;&nbsp;options={options}&nbsp;list={new_list(options)}&nbsp;on:testchange={now_change}&nbsp;change={now_change}&gt;&lt;/Select&gt; &lt;div&nbsp;style=&quot;background:rgba(0,0,0,0.3);&quot;&gt;{w}-{h},{top}-{left}&lt;/div&gt; &lt;div&nbsp;style=&quot;height:300px;&nbsp;overflow-y:auto;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;1&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;2&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;3&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;4&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;5&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;6&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;7&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;&nbsp;bind:this={dom_node}&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;style=&quot;font-size:&nbsp;20px&quot;&gt;xxxxxxx&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;1&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;2&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;3&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;4&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;5&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;6&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;7&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;1&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;2&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;3&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;4&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;5&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;6&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;7&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;1&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;2&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;3&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;4&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;5&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;6&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;7&lt;/p&gt; &lt;/div&gt; &lt;style&gt; .my_div&nbsp;{} .my_div&nbsp;.layui-row{&nbsp;padding:10px&nbsp;;} .my_div&nbsp;.layui-row&nbsp;div{&nbsp;height:&nbsp;60px;} .my_div&nbsp;.layui-row&nbsp;div:nth-child(even){&nbsp;background:rgba(0,0,0,0.03);} .my_div&nbsp;.layui-row&nbsp;div:nth-child(odd){&nbsp;background:rgba(0,0,0,0.08);} &lt;/style&gt;</pre><p>列表页&nbsp;List.svelte 体验个数据变化</p><pre class="prism-highlight prism-language-markup">&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;import&nbsp;views&nbsp;from&nbsp;&#39;./views.js&#39;; &nbsp;&nbsp;&nbsp;&nbsp;views.init(); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;title=&#39;List&#39; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;import&nbsp;xixi&nbsp;from&nbsp;&#39;../../Xixi/Xixi.js&#39;; &nbsp;&nbsp;&nbsp;&nbsp;xixi.render=function(){xixi.do_render=true;} &nbsp;&nbsp;&nbsp;&nbsp;import&nbsp;Xixi&nbsp;from&nbsp;&#39;../../Xixi/Xixi.svelte&#39;; &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;alert_num=0; &nbsp;&nbsp;&nbsp;&nbsp;xixi.alert(&#39;000&#39;); &nbsp;&nbsp;&nbsp;&nbsp;views.setInterval(()=&gt;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert_num++; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xixi.alert(&#39;setInterval_&#39;+alert_num); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xixi.render(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;},2000); &nbsp;&nbsp;&nbsp;&nbsp;views.setTimeout(()=&gt;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert_num++; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xixi.msg(&#39;setTimeout_&#39;+alert_num); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xixi.render(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;},5000); &lt;/script&gt; &lt;div&nbsp;style=&quot;background:rgba(0,0,0,0.1);&nbsp;height:200px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;page:&nbsp;{title} &lt;/div&gt; &lt;Xixi&nbsp;{...xixi.options}&gt;&lt;/Xixi&gt; &lt;style&gt; &lt;/style&gt;</pre><p>内容页View.svelte 体验个参数传递</p><pre class="prism-highlight prism-language-markup">&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;import&nbsp;views&nbsp;from&nbsp;&#39;./views.js&#39;; &nbsp;&nbsp;&nbsp;&nbsp;import&nbsp;{location,&nbsp;querystring}&nbsp;from&nbsp;&#39;svelte-spa-router&#39; &nbsp;&nbsp;&nbsp;&nbsp;import&nbsp;{parse}&nbsp;from&nbsp;&#39;qs&#39; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log($location); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log($querystring); console.log(parse($querystring)); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;views.init(); &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;let&nbsp;params&nbsp;=&nbsp;{}; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;title=&#39;View&#39; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#39;params&#39;,params); &lt;/script&gt; &lt;div&nbsp;style=&quot;background:rgba(0,0,0,0.1);&nbsp;height:200px;&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;page:&nbsp;{title}-{JSON.stringify($location)} &nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;layui-btn&quot;&gt;一个标准{params.id}&lt;/button&gt; &lt;a&nbsp;href=&quot;#/List&quot;&nbsp;class=&quot;layui-btn&quot;&gt;一个可跳转的按钮&lt;/a&gt; &lt;/div&gt; &lt;style&gt; &lt;/style&gt;</pre><p><img src="http://zashao.com/zb_users/upload/2022/06/202206071654607708377946.png" alt="image.png"/></p><p><br/></p><p>直接引入layui.css，测了一下，跟自己想的还是比较接近的，只是Svelte确实有一些坑，比较明显的就是数据更新，自己也在想办法去解决，后面正式开发框架的时候再慢慢摸索吧，感觉还是比较有信心的。</p><p><br/></p>Tue, 07 Jun 2022 20:59:44 +0800