前言
我们在自定义组件上使用 v-model 的时候，考虑到有时候想对输入的东西进行格式化处理，为此 vue 官方也为我们提供了一些，比较常用的修饰符，例如 .trim，.number 和 .lazy。这些我们之前的章节有提到过，有兴趣的可以往期翻一翻。
但是对于有些特别业务的场景，官方所提供的修饰符并不能满足我们的需要。而官方也考虑到这种情况，为我们提供了自定义修饰符的功能。
下面我们就来看一看如果自定义 v-model 的修饰符吧。
自定义修饰符
首先，先创建一个名为capitalize的 v-model 的自定义修饰符，我们想这个修饰符，把我们输入的名字的首字母自动转换为大写：
<Title v-model.capitalize="myTitle" />
复制代码
如上，我们在组件时声明创建了一个capitalize的修饰符，我们可以通过 modelModifiers prop 在子组件中访问到，并可以给他一个空对象的默认值。下面我们来实现一下：
<script setup>const props = defineProps({ modelValue: String, modelModifiers: { default: () => ({}) }})
defineEmits(['update:modelValue'])
console.log(props.modelModifiers) // { capitalize: true }</script>
<template> <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /></template>
复制代码
上面的代码中，我们声明了 modelModifiers 这个 prop，由于你使用 capitalize 修饰符，所以会打印 { capitalize: true }。
既然，能知道修饰符的使用情况，我们就可以进行判断，并在每次派发 update:modelValue 事件的时候，进行相应的格式化操作。也就是，在每次 input 标签触发 input 事件的时候，进行名字首字母的大写。
<script setup>const props = defineProps({ modelValue: String, modelModifiers: { default: () => ({}) }})
const emit = defineEmits(['update:modelValue'])
function capitalizeInput(e) { let value = e.target.value if (props.modelModifiers.capitalize) { value = value.split(' ') .map(item => item.charAt(0).toLocaleUpperCase() + item.slice(1)) .join(' ') } emit('update:modelValue', value)}</script>
<template> <input type="text" :value="modelValue" @input="capitalizeInput" /></template>
复制代码
这样，我们就完成了首字母大写修饰符的功能了。
当我们给 v-model 绑定参数的时候，子组件声明的 prop 形式为：arg + "Modifiers"。
<Title v-model:text.capitalize="myTitle">
复制代码
-------------------------
const props = defineProps(['title', 'textModifiers'])defineEmits(['update:text'])
console.log(props.textModifiers) // { capitalize: true }
复制代码
评论