项目场景:
弹出框页面中根据下拉选项的不同,动态的改变页面的高度。
详细描述:
如下图所示,当页面中的【通知内容类型】选择【相同内容通知】时,弹出框页面中就会多出一个【推送内容】项,这个时候页面的高度就需要改变。
解决方案:
解决的方法不多说了直接上代码
html代码
<div class="layui-form-item updateType">
<label class="layui-form-label required">通知内容类型:</label>
<div class="layui-input-inline">
<select name="contentType" lay-filter="contentType" lay-verify="contentType">
<option value="1">相同内容通知</option>
<option value="2">不同内容通知</option>
</select>
</div>
</div>
<div class="layui-form-item layui-form-text contentShow" style="display: none">
<label class="layui-form-label">推送内容:</label>
<div class="layui-input-inline b-textarea">
<textarea class="layui-textarea" lay-verify="sendContent" name="sendContent"></textarea>
</div>
</div>
js代码
layui.use(['element', 'form', 'layer'], function () {
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
form.on('select(contentType)', function (data) {
if (data.value === '2') {
$.fn.changeFrameHeight('400px');
$(".contentShow").hide();
} else {
$.fn.changeFrameHeight('600px');
$(".contentShow").show();
}
});
var layerIndex = parent.layer.getFrameIndex(window.name);
$.fn.changeFrameHeight = function (height) {
parent.layer.style(layerIndex, {
height: height
});
}
});