Question

使用VueJS2和Bootstrap 4，我创建了一个自定义指令来与Bootstrap 4单选按钮组发生的更改进行交互。出现问题是，当您更新引导程序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）：
注意：问题不在绑定上，问题仅在于插入/更新的钩子，它们与复制的代码完全相同。

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' ）（使用插入或更新钩子）中的指令，着重于元素，从而在html页面中实现了大幅提升。用户必须向上滚动才能继续上次退出的地方。

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

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

那么如何防止焦点发生在元素上？

Answer 1

所以我将问题追溯到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);

VueJS 2 / Bootstrap 4-防止焦点集中在bootstrap 4的数据切换事件中

1 个答案: