custom modifier

[lijingfaatcumt]

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

1. in props, we should define corresponding modifier like 'modelModifier',

    props: {
          modelModifiers: { default: () => ({}) }
   }

2. 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

1. define modifier in emits like follows

    emit: {
          ['update:model']: {
                 captilize(value) { 
                      return value.charAt(0).toUpperCase() + value.slice(1)
                 }
          }
     }

2. 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>