lisone/EasyAdmin8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(switchSelect): improve CSS and JS for better functionality

Browse Source 
- Add padding to radio-container for better layout
- Remove padding for switch-select inside form-pane
- Update JS to use dynamic filters for radio and select elements
- Improve event handling for radio and select changes
This commit is contained in:
wolfcode
2025-08-19 11:30:14 +08:00
parent 71c2338086
commit 49cf32a15e
2 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/static/plugs/lay-module/switchSelect/switchSelect.css
View File

@@ -4,6 +4,7 @@
.layui-switch-select .radio-container {
border: 1px solid #eee;
padding: 0 5px;
}
.layui-switch-select .toggle-dots {
@@ -36,4 +37,8 @@
.layui-switch-select .toggle-hidden {
display: none !important;
}
.layui-form-pane .layui-switch-select .radio-container {
padding: 0;
}

21
public/static/plugs/lay-module/switchSelect/switchSelect.js
View File

@@ -52,7 +52,7 @@ layui.define(['form'], function (exports) {
<div class="layui-input-block">
<div class="radio-container ${toggleHidden === 'radio' ? 'toggle-hidden' : ''}">${this.generateRadioHtml()}</div>
<div class="select-container ${toggleHidden === 'select' ? 'toggle-hidden' : ''}">
<select name="${this.config.name}" lay-filter="switchSelectFilter" class="layui-select">
<select name="${this.config.name}" lay-filter="switchSelectFilter_${this.config.name}" class="layui-select">
${this.generateSelectHtml()}
</select>
</div>
@@ -69,7 +69,7 @@ layui.define(['form'], function (exports) {
let html = '';
$.map(this.config.data, (item, index) => {
let checked = index == this.config.default ? 'checked' : '';
html += `\n<input type="radio" name="${this.config.name}" lay-filter="switchSelectFilter" value="${index}" title="${item}" ${checked}>\n`;
html += `\n<input type="radio" name="${this.config.name}" lay-filter="switchSelectFilter_${this.config.name}" value="${index}" title="${item}" ${checked}>\n`;
});
return html;
},
@@ -117,16 +117,21 @@ layui.define(['form'], function (exports) {
});
// 监听单选按钮变化
form.on('radio(switchSelectFilter)', function (data) {
let value = data.value;
elem.find(`select[name="${that.config.name}"]`).val(value);
form.on('radio', function (data) {
let that = $(this);
let name = $(data.elem).attr('name')
if (that.attr('lay-filter') !== `switchSelectFilter_${name}`) return;
let value = $(data.elem).val()
elem.find(`select[name="${name}"]`).val(value);
form.render('select');
});
// 监听下拉框变化
form.on('select(selectFilter)', function (data) {
let value = data.value;
elem.find(`input[name="${that.config.name}"][value="${value}"]`).prop('checked', true);
form.on('select', function (data) {
let name = $(data.elem).attr('name')
if ($(data.elem).attr('lay-filter') !== `switchSelectFilter_${name}`) return;
let value = $(data.elem).val()
elem.find(`input[name="${name}"][value="${value}"]`).prop('checked', true);
form.render('radio');
});
},