Question

我需要在用户键入时更改Vue材质md输入框中的值（为了便于理解问题，请说我需要将所有字母大写）。

使用v-bind或计算值之类的简单答案在vue-material上效果不佳：

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

部分是因为它不支持vue-material组件中的v-bind，部分是因为虽然计算出的值确实起作用，但设置该值会触发新的get，并且光标位置移至字符串的末尾。 / p>

所以问题（我将回答这个问题，但是如果其他人有更好的回答，我将不胜感激）是如何修改诸如md-input之类的vue-material组件中的值？

Answer 1

为了在修改输入值时使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);
            }
        }
    }

这结合了从vue-material issue list的marcosmoura提出指令的建议：

要创建指令，例如v-mask，并操纵该元素的值。这是最好的方法，因为您可以在应用程序中重用它，甚至可以将其作为开源库。

使用基本代码和this question的答案

伴随lifo101对this forum post的回答的光标控制

输入和模型会实时更新，此外，文本插入符号的位置也不会丢失。

我稍加修改，将selectionEnd和他的selectionStart包括在内。

更改Vue材质中md输入的指令

1 个答案: