整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
是在搜索經驗的時候，發現很多網友給出的代碼有缺失，不適合小白開發
所以，小小整理一番，歡迎指摘 …
操作步驟：
首先 html 設計效果如下：
對應的源碼為：
<div class="layui-form-item">
<label class="layui-form-label">主題類型：</label>
<div class="layui-input-inline" style="width: 660px">
<input type="radio" name="level" lay-filter="levelM" value="1" title="一級分類" {$theme.level=="1"?"checked":""}>
<input type="radio" name="level" lay-filter="levelM" value="2" title="二級分類" {$theme.level=="2"?"checked":""}>
<input type="radio" name="level" lay-filter="levelM" value="3" title="三級分類" {$theme.level=="3"?"checked":""}>
</div>
</div>【注】:
注意上述源碼總的 "lay-filter" 屬性;
此處需要填寫一個用于區分監聽事件的名稱，我定為："levelM"
因為鄙人在進行 ThinkPHP 框架代碼開發，所以其中牽扯到了部分內置代碼，可自行忽略
然后就是 JavaScript 代碼的編寫，完整的代碼如下：
layui.use(['form'], function () {
var upload=layui.upload;
var form=layui.form;
//此處即為 radio 的監聽事件
form.on('radio(levelM)', function(data){
console.log(data.elem); //得到radio原始DOM對象
console.log(data.value); //被點擊的radio的value值
var level=data.value;//被點擊的radio的value值
$(".sel-parent-msg").hide();
$(".sel-parent-msg-"+level).show();
});
});好像，大概，也許，差不多就是這樣的了 …
今天接到一個需求就是要監聽radio改變后的狀態來判斷相應的值是否應該顯示或者隱藏。
上代碼：
<el-radio-group v-model="basicData.isDel" @change="changeHandler">
<el-radio label="1">已激活</el-radio>
<el-radio label="0">未激活</el-radio>
</el-radio-group> changeHandler(value) {
this.sure=true
},這樣就可以解決了
天做一個數據統計，想實現通過不同的時間緯度來控制統計范圍，大概效果圖如下：
日日期選擇
月日期選擇
html 代碼 部分
<div class="layui-form-item">
<label class="layui-form-label" style="width:120px">統計緯度</label>
<div class="layui-input-inline">
<input lay-filter="radio1" type="radio" value="0" title="日" checked>
<input lay-filter="radio1" type="radio" value="1" title="月">
</div>
<label class="layui-form-label" style="width:95px;">收運時間:</label>
<div class="layui-input-inline" style="width:300px;" id="timeDiv">
<input type="text" name="createTime" id="createTime" placeHolder="請選擇時間" readonly="true"
class="layui-input laydate-range">
</div>
</div>首先初始化日期控件
layui.use(['laydate', 'form'], function () {
var form=layui.form, laydate=layui.laydate;
var stahtml 代碼 部分
<div class="layui-form-item">
<label class="layui-form-label" style="width:120px">統計緯度</label>
<div class="layui-input-inline">
<input lay-filter="radio1" type="radio" value="0" title="日" checked>
<input lay-filter="radio1" type="radio" value="1" title="月">
</div>
<label class="layui-form-label" style="width:95px;">收運時間:</label>
<div class="layui-input-inline" style="width:300px;" id="timeDiv">
<input type="text" name="createTime" id="createTime" placeHolder="請選擇時間" readonly="true"
class="layui-input laydate-range">
</div>
</div>
rtDate=laydate.render({
elem: '#createTime',
type: 'date',
format: 'yyyy-MM-dd',
range: true
});
});再寫radio的切換監聽
form.on('radio(radio1)', function (data) {
if (data.value==0) {
startDate.config.type="date"
startDate.config.format="yyyy-MM-dd"
} else if(data.value==1) {
startDate.config.format="yyyy-MM"
startDate.config.type="month"
}
});通過以上的寫法會發現startDate.config.type="month"可以正常生效，選擇面板也正常地顯示為月份選擇面板。但是startDate.config.format="yyyy-MM"并沒有起作用，也就是說選擇完之后日期還是顯示成"yyyy-MM-dd"格式，form.render();也無法更改過來。
后面無奈通過了如下方法來實現，直接重新渲染并不能成功，要先刪除控制重新插入之后再重新渲染。
form.on('radio(radio1)', function (data) {
if (data.value==0) {
$("#createTime").remove();//這是關鍵
var html='<input type="text" value="<?=($endDate)?>" name="createTime" id="createTime" placeHolder="請選擇時間" readonly="true"\n' +
' class="layui-input laydate-range">';
$("#timeDiv").append(html);//這是關鍵
laydate.render({
elem: '#createTime',
type: 'date',
format: 'yyyy-MM-dd',
range: true
});
} else {
$("#createTime").remove();//這是關鍵
var html='<input type="text" value="<?=($endDate)?>" name="createTime" id="createTime" placeHolder="請選擇時間" readonly="true"\n' +
' class="layui-input laydate-range">';
$("#timeDiv").append(html);//這是關鍵
startDate=laydate.render({
elem: '#createTime',
type: 'month',
format: 'yyyy-MM',
range: true
});
}
form.render();
});layui使用的是比較早的版本
layui2.2.6可能現在新版已經沒有這個問題了，有不足的地方歡迎指正。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
