1

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

像使用 v-bind 或计算值这样的简单答案在 vue-material 中效果不佳：

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

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

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

4

1 回答 1

0

为了在修改输入值时使 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 问题列表中从 marcosmoura 发出指令的建议：

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

使用此问题的基本代码和答案

连同来自 lifo101对此论坛帖子的回答中的光标控制

输入和模型会实时更新，并且作为奖励，文本插入符号位置不会丢失。

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

于 2018-09-25T16:33:40.847 回答