Директива об изменении md-ввода в vue-material - PullRequest
Новая
       14

Директива об изменении md-ввода в vue-material

0 голосов
/ 25 сентября 2018

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

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

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

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

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

1 Ответ

0 голосов
/ 25 сентября 2018

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

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-список материальных проблем , где он предлагает:

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

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

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

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

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

...