305 - Capitalize

[Thy3634]

在我看来真正符合题意的答案
This is the real answer, in my opinion, fits to the question

为 v-model 自定义修饰符，而不是自定义组件或自定义指令
Custom modifiers for 'v-model' instead of custom components or custom directives

<script setup>
import { ref, vModelText } from 'vue'

const _vModelText = vModelText

_vModelText.updated = (el, { value, modifiers: { capitalize } }) => {
  if (capitalize && value.hasOwnProperty(0)) {
    el.value = value[0].toUpperCase() + value.substr(1)
  }
}

const v = ref("")
</script>

<template>
  <input type="text" v-model.capitalize="v" />
</template>

Vue SFC Playground Link

[gastrodia]

老哥稳

[justforuse]

太秀了吧，话说这个vModelText会监听所有的<input>? 在子组件内也会监听父组件的变化 SFC

[plus50]

太秀了吧，话说这个vModelText会监听所有的<input>? 在子组件内也会监听父组件的变化 SFC

Change
const _vModelText = vModelText
to
const _vModelText = Object.assign({}, vModelText);
will solve this problem.

ref: SFC

[Thy3634]

太秀了吧，话说这个vModelText会监听所有的<input>? 在子组件内也会监听父组件的变化 SFC

Change
const _vModelText = vModelText
to
const _vModelText = Object.assign({}, vModelText);
will solve this problem.

ref: SFC

是的，但我觉得这个就应该是全局的，毕竟如果你不需要大写开头，移除这个修饰词即可。

[gaoshunpeng]

强啊，官方文档上没看见这个，我在源码中找到了：

// We are exporting the v-model runtime directly as vnode hooks so that it can
  // be tree-shaken in case v-model is never used.
  const vModelText = {
      created(el, { modifiers: { lazy, trim, number } }, vnode) {
          el._assign = getModelAssigner(vnode);
          const castToNumber = number || (vnode.props && vnode.props.type === 'number');
          addEventListener(el, lazy ? 'change' : 'input', e => {
              if (e.target.composing)
                  return;
              let domValue = el.value;
              if (trim) {
                  domValue = domValue.trim();
              }
              if (castToNumber) {
                  domValue = toNumber(domValue);
              }
              el._assign(domValue);
          });
          if (trim) {
              addEventListener(el, 'change', () => {
                  el.value = el.value.trim();
              });
          }
          if (!lazy) {
              addEventListener(el, 'compositionstart', onCompositionStart);
              addEventListener(el, 'compositionend', onCompositionEnd);
              // Safari < 10.2 & UIWebView doesn't fire compositionend when
              // switching focus before confirming composition choice
              // this also fixes the issue where some browsers e.g. iOS Chrome
              // fires "change" instead of "input" on autocomplete.
              addEventListener(el, 'change', onCompositionEnd);
          }
      },
      // set value on mounted so it's after min/max for type="range"
      mounted(el, { value }) {
          el.value = value == null ? '' : value;
      },
      beforeUpdate(el, { value, modifiers: { lazy, trim, number } }, vnode) {
          el._assign = getModelAssigner(vnode);
          // avoid clearing unresolved text. #2302
          if (el.composing)
              return;
          if (document.activeElement === el && el.type !== 'range') {
              if (lazy) {
                  return;
              }
              if (trim && el.value.trim() === value) {
                  return;
              }
              if ((number || el.type === 'number') && toNumber(el.value) === value) {
                  return;
              }
          }
          const newValue = value == null ? '' : value;
          if (el.value !== newValue) {
              el.value = newValue;
          }
      }
  };

他内部只有created、mounted、beforeUpdate这三个钩子，是不是说对应绑定的组件的相应生命周期执行的时候生效啊？你这里为啥要用update？为啥要判断value.hasOwnProperty(0)？是后面会用到value[0]吗？他还可能不存在吗？还有那个修饰符也是，他也有可能不存在吗？教教我吧。

[Thy3634]

@gaoshunpeng 官方文档里有关于自定义指令的内容，你的推测都挺对的。

[gaoshunpeng]

@gaoshunpeng 官方文档里有关于自定义指令的内容，你的推测都挺对的。

原来是自定义指令吗，我光看自定义修饰符去了

[kalu5]

Good Man !