Директива для изменения md-input в vue-material

Мне нужно было изменить значение в поле vue-material md-input по мере ввода пользователем (для простоты понимания проблемы, скажем, мне нужно было сделать все буквы заглавными).

Простые ответы, такие как использование v-bind или вычисляемых значений, плохо работают с vue-material:

<md-input v-bind="val" />

частично из-за того, что он не поддерживает v-bind в компонентах vue-material, а частично из-за того, что, хотя вычисленное значение работает, установка значения запускает новое получение, и положение курсора переходит в конец строки.

Итак, вопрос (на который я отвечу, но я был бы признателен, если бы у других был лучший ответ) заключается в том, как мне изменить значение в компоненте vue-material, таком как md-input?


vue.js vue-material
person Guy Schalnat    schedule 25.09.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы заставить md-input работать при изменении входных значений, я создал пользовательскую директиву, подобную этой:

directives:
    {
        allCaps:
        {
            bind: function (el, binding, vnode)
            {
                var allCapsInput = function (e)
                {
                    var s = e.target.value;
                    var uc = s.toUpperCase();
                    if (uc != s)
                    {
                        var start = e.target.selectionStart;
                        var end = e.target.selectionEnd;
                        e.target.value = uc;
                        e.target.setSelectionRange(start, end);
                        vnode.elm.dispatchEvent(new CustomEvent('input'));
                    }
                };
                el.addEventListener('input', allCapsInput);
            }
        }
    }

Это сочетает в себе предложение сделать директиву от marcosmoura из список вопросов vue-material, где он предлагает:

Чтобы создать директиву, например v-mask, и управлять значением элемента. Это лучший способ, поскольку вы можете повторно использовать его в своем приложении и даже сделать его библиотекой с открытым исходным кодом.

С базовым кодом и ответом от это вопрос

Наряду с управлением курсором из ответа lifo101 на это сообщение на форуме

Ввод и модель обновляются в режиме реального времени, и в качестве бонуса позиция курсора не теряется.

Который я немного изменил, чтобы включить selectionEnd вместе с его selectionStart.

person Guy Schalnat    schedule 25.09.2018