custom modifier
lijingfaatcumt opened this issue · comments
lijingfaatcumt commented
Discussed in #418
Originally posted by lijingfaatcumt December 8, 2021
when i see the chapter of v-model modifiers, i think this is troublesome,in order to use modifier, there are some steps to do
- in props, we should define corresponding modifier like 'modelModifier',
props: {
modelModifiers: { default: () => ({}) }
}
- we should solve the logic of modifier, like follows
function emitValue(e) {
let value = e.target.value
if (props.modelModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1)
}
emit('update:modelValue', value)
}
i think we should simplify this like follows
- define modifier in emits like follows
emit: {
['update:model']: {
captilize(value) {
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}
- use like follows
<MyComponent v-model.capitalize="myText" />
in order to implement this, may we should do define emitWraper function like follows
function emitWraper(name, ...args) {
// find modifiers of the event
const modifiers = emit[name]
let transformed = args
if (modifiers) {
for(let key in modifiers) {
// judge modifier is used or not
if (modifiers[key].isUsed) {
transformed = args.map(item => modifiers[key](item))
}
}
}
// Call original emit function
emit(name, ...transformed )
}
```</div>