更改vue-material中的md-input的指令

Question

我需要在用户输入时更改vue-material md-input框中的值(为了便于理解问题，假设我需要将所有字母大写)。

像使用v-bind或计算值这样的简单答案在vue-material中不能很好地发挥作用：

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

部分原因是它不支持vue-material组件中的v-bind，部分原因是虽然计算值确实有效，但设置该值会触发一个新的get，并且光标位置将转到字符串的末尾。

所以问题(我会回答，但如果其他人有更好的答案，我会很感激)是我如何修改vue-material组件中的值，比如md-input？

Answer 1

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

这结合了从vue-material issue list的marcosmoura中制定指令的建议，其中他建议：

来创建一个指令，比如v-掩码，并操作元素的值。这是最好的方法，因为您可以通过应用程序重用它，甚至可以将其作为开源库。

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

以及来自lifo101对this forum post的响应的光标控制

输入和模型是实时更新的，并且作为一个额外的好处，文本插入符号的位置不会丢失。

我稍微修改了一下，包括了selectionEnd和他的selectionStart。