fix: 修复v-model类型

agileago · Dec 10, 2021 · 5d69c59 · 5d69c59
1 parent eda8293
commit 5d69c59
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/example/example.tsx b/example/example.tsx
@@ -9,6 +9,8 @@ const focusDirective: Directive = {
 
 interface Foo_Props {
   size: 'small' | 'large'
+  modelValue?: string
+  'onUpdate:modelValue'?: (val: string) => void
   // 组件的slots
   slots: {
     item(name: string): VNodeChild
@@ -17,9 +19,8 @@ interface Foo_Props {
 
 class Foo extends VueComponent<Foo_Props> {
   // vue需要的运行时属性检查
-  static defaultProps: ComponentProps<Foo_Props> = {
-    size: String,
-  }
+  static defaultProps: ComponentProps<Foo_Props> = ['size', 'modelValue', 'onUpdate:modelValue']
+
   // 组件需要的局部指令
   static directives: Record<string, Directive> = {
     focus: focusDirective,

diff --git a/src/type.ts b/src/type.ts
@@ -53,9 +53,12 @@ type ModelProps<T extends {}> = Exclude<
   undefined
 >
 
-export type WithVModel<T extends {}, U extends keyof T = ModelProps<T>> = {
+export type WithVModel<T extends {}, U extends keyof T = ModelProps<T>> = TransformModelValue<{
   [k in U as `v-model:${k & string}`]?: T[k] | [T[k], string[]]
-}
+}>
+export type TransformModelValue<T extends {}> = 'v-model:modelValue' extends keyof T
+  ? Omit<T, 'v-model:modelValue'> & { ['v-model']?: T['v-model:modelValue'] }
+  : T
 
 export type ComponentProps<T extends {}> = ComponentPropsArray<T> | ComponentPropsObject<T>