Layui解决layer的tips无法吸附input元素的问题

在使用layer.tips()对同样使用Layer渲染的表单input控件进行吸附时,如果直接传入input对应的id或其他css选择器,由于Layer在进行二次渲染的时候会隐藏原始的input标签,用新的div层进行替换显示,所以会导致layer的tips提示框无法正确吸附到上面,解决方法是在对input控件进行事件监听,在回调函数中初始化layer.tips,示例代码:

// 算法切换
    form.on('radio', function (data) {
     
        // 显示算法公式tip
        let tip = ''
        switch (data.value) {
     
            case 'y1':
                tip = '预测=上期*(同期/同期上期)';
                break;
            case 'y2':
                tip = '预测=同期';
                break;
            case 'y3':
                tip = '预测=本年前期均值';
                break;
            case 'y4':
                tip = '预测=上期'
                break;
        }
        layer.tips(tip, data.othis[0], {
     
            tips: 3
        })
    })

Layui解决layer的tips无法吸附input元素的问题_第1张图片

需要注意的是,回调函数中给layer.tips传入的第二个变量(dom),应当使用.othis[0],可以通过控制台中输出form.on回调函数传入变量进行查看:
Layui解决layer的tips无法吸附input元素的问题_第2张图片

你可能感兴趣的:(前端开发)