如何解决layui+vue导致表单元素渲染位置不对问题

前端 潘老师 3个月前 (12-05) 64 ℃ (0) 扫码查看

本文主要讲解关于如何解决layui+vue导致表单元素渲染位置不对问题相关内容,让我们来一起学习下吧!

当使用Vue+layui实现表单提交很方便,但是有许多坑,其根本原因是layui会针对表单的一些标签生成layui自己的dom元素,然后隐藏我们自己含义的dom,我们实际上操作、点击的是layui生成的dom,比如说:radio、select、laydate。

问题一:layui表单组件值重置

如果我们使用vue的数据绑定实现表单数据和vue的数据动态绑定的话,会发现,当我们操作一些input操作时,会导致laydate的值重置。这个根本原因是我们修改了input后,因为vue数据双向绑定,会更新vue的data里的数据,然后根据mvvm模型,vue会更新对应的dom,因为有一些元素layui会自己封装,导致我们更改了值后没有更新到vue,所以vue对象里那个字段还是初始值,所以会导致重置。解决办法:查找layui里对应修改了值的回调函数,更新值后直接更新vue的属性,就可以实现绑定了。

问题二:layui表单组件位置不对

以select为例。查看源码可以大概率知道,在渲染的时候可能会读取元素的位置信息:

举例代码如下:

<div class="layui-form">
        <div class="layui-form-item" v-if="xxxx">
            <label class="layui-form-label">手机</label>
            <div class="layui-input-block">
                <input type="tel" name="phone" lay-verify="required|phone" class="layui-input demo-phone">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
        </div>
    </div>

当v-if为false时,vue会将dom从dom树上摘去,但是在这之前layui已经计算好了位置信息了。这之后layui会根据这个位置放置dom。但是我们已经摘除了上面那个dom,所以会导致位置错乱。

解决办法:

使用v-show 代替v-if。因为v-show只是更改了dom的display属性。

以上就是关于如何解决layui+vue导致表单元素渲染位置不对问题相关的全部内容,希望对你有帮助。欢迎持续关注潘子夜个人博客(www.panziye.com),学习愉快哦!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/12124.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】