代码之家 › 专栏 › 技术社区 › sksallaj

vuejs 2/bootstrap 4-防止从bootstrap 4的数据切换事件中关注元素

bootstrap-4 vuejs2

0

sksallaj · 技术社区 · 7 年前

使用vuejs2和bootstrap 4,我创建了一个自定义指令来与bootstrap4单选按钮组发生的更改交互。出现的问题是,当您更新bootstrap 4的数据时,元素组件会被聚焦,如果页面很小,这就很好了。但是,如果页面很长且可滚动,这将成为一个负担。

以下代码是根据以下示例复制和修改的:

https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons

<div class="btn-group btn-group-sm" data-toggle="buttons" v-radio="oType">
    <label class="btn btn-outline-dark active">
        <input type="radio" name="oType" value="0" /> Pressure
    </label>
    <label class="btn btn-outline-dark">
        <input type="radio" name="oType" value="1" /> Vacuum
    </label>
</div>

我创建了以下Vue自定义指令(radio.js):
注意 :问题不在bind上,问题只出现在插入/更新的钩子上,这些钩子与复制的代码完全相同。

export default {
    inserted: function (el, binding, vnode) {
        var btns = $(el).find('.btn');
        var radioGrpName = $(btns[0]).find('input')[0].name;
        $("input[name='" + radioGrpName + "'][value='" + binding.value + "']").closest('.btn').button('toggle');
    },
    bind: function (el, binding, vnode) {
        var btns = $(el).find('.btn');
        btns.each(function () {
            $(this).on('click', function () {
                var v = $(this).find('input').get(0).value;
                (function set(obj, str, val) {
                    str = str.split('.');
                    while (str.length > 1) {
                        obj = obj[str.shift()];
                    }
                    return obj[str.shift()] = val;
                })(vnode.context, binding.expression, v);
            })
        })
    },
    update: function (el, binding, vnode, oldnode) {
        var btns = $(el).find('.btn');
        var radioGrpName = $(btns[0]).find('input')[0].name;
        $("input[name='" + radioGrpName + "'][value='" + binding.value + "']").closest('.btn').button('toggle');
    }
}

问题是,如果在页面的某个地方有bootstrap 4单选按钮组,并且有用户设置了某种类型的输入数据来自动更改单选按钮的数据,那么这将触发指令中的按钮(“toggle”)(使用insert或update钩子),集中在元素上,在html页面中产生一个很大的跳跃。用户将不得不向上滚动,继续他们离开的地方。

上面的单选按钮与更改的数据交互的方式是通过计算属性:

computedProperty: {
    oType: {
        get: function () {
            return this.oType;
        },
        set: function (value) {
            this.oType = value
        }
    }
}

那么,如何防止焦点集中在元素上呢?

1 回复 | 直到 7 年前

1

0

sksallaj 7 年前

所以我将问题追溯到bootstrap.js,在触发数据切换期间,它导致了问题的发生。所以在radio.js中,我切换了这条线路:

$("input[name='" + radioGrpName + "'][value='" + binding.value + "']").closest('.btn').button('toggle');

并模仿其外观和感觉:

$(el).children('.btn').removeClass('active');
$("input[name='" + radioGrpName + "'][value='" + binding.value + "']").closest('.btn').addClass('active');
$("input[name='" + radioGrpName + "'][value='" + binding.value + "']").prop('checked', true);