在 vue-material 中更改 md-input 的指令答案

【问题标题】：Directive to change md-input in vue-material在 vue-material 中更改 md-input 的指令
【发布时间】：2019-03-01 08:18:20
【问题描述】：

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

使用 v-bind 或计算值之类的简单答案不能很好地与 vue-material 配合使用：

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

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

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

【问题讨论】：

标签： vue.js vue-material

【解决方案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-mask，并操作元素的值。这是最好的方法，因为您可以通过您的应用程序重用它，甚至将它作为一个开源库。

带有this question的基本代码和答案

以及来自 lifo101 对 this forum post 的回答中的光标控制

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

我稍作修改以包括 selectionEnd 和他的 selectionStart。

【讨论】：