From a6834452886123f989dc8c39ab0a3f79bab39111 Mon Sep 17 00:00:00 2001
From: fxy060608 <fxy060608@gmail.com>
Date: Thu, 21 Apr 2022 14:35:52 +0800
Subject: [PATCH] fix(nvue): v-model with input,textarea (question/143547)

---
 .../nvue/__snapshots__/compiler.spec.ts.snap  |  8 ++---
 .../src/nvue/plugin/transforms/vModel.ts      | 29 +++++++++++++++++--
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/packages/uni-app-vite/__tests__/nvue/__snapshots__/compiler.spec.ts.snap b/packages/uni-app-vite/__tests__/nvue/__snapshots__/compiler.spec.ts.snap
index 5acd01668..8cce3012e 100644
--- a/packages/uni-app-vite/__tests__/nvue/__snapshots__/compiler.spec.ts.snap
+++ b/packages/uni-app-vite/__tests__/nvue/__snapshots__/compiler.spec.ts.snap
@@ -8,8 +8,8 @@ const _hoisted_1 = [\\"modelValue\\"]
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(\\"u-input\\", {
     modelValue: _ctx.text,
-    \\"onUpdate:modelValue\\": _cache[0] || (_cache[0] = $event => ((_ctx.text) = $event))
-  }, null, 8 /* PROPS */, _hoisted_1))
+    onInput: _cache[0] || (_cache[0] = $event => ((_ctx.text) = $event.detail.value))
+  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1))
 }"
 `;
 
@@ -45,8 +45,8 @@ const _hoisted_1 = [\\"modelValue\\"]
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(\\"u-textarea\\", {
     modelValue: _ctx.text,
-    \\"onUpdate:modelValue\\": _cache[0] || (_cache[0] = $event => ((_ctx.text) = $event))
-  }, null, 8 /* PROPS */, _hoisted_1))
+    onInput: _cache[0] || (_cache[0] = $event => ((_ctx.text) = $event.detail.value))
+  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1))
 }"
 `;
 
diff --git a/packages/uni-app-vite/src/nvue/plugin/transforms/vModel.ts b/packages/uni-app-vite/src/nvue/plugin/transforms/vModel.ts
index 85d5a25a7..1e40c8232 100644
--- a/packages/uni-app-vite/src/nvue/plugin/transforms/vModel.ts
+++ b/packages/uni-app-vite/src/nvue/plugin/transforms/vModel.ts
@@ -1,8 +1,33 @@
 import {
   transformModel as baseTransform,
   DirectiveTransform,
+  isStaticExp,
+  NodeTypes,
 } from '@vue/compiler-core'
-// 所有的 v-model 均走自定义组件的实现逻辑，包括 input,textarea
+const tags = ['u-input', 'u-textarea']
 export const transformModel: DirectiveTransform = (dir, node, context) => {
-  return baseTransform(dir, node, context)
+  const result = baseTransform(dir, node, context)
+  // 将 u-input,u-textarea 的 onUpdate:modelValue 事件转换为 onInput
+  if (tags.includes(node.tag) && result.props.length >= 2) {
+    const key = result.props[1].key
+    let value = result.props[1].value
+    if (value.type === NodeTypes.JS_CACHE_EXPRESSION) {
+      value = value.value
+    }
+    if (
+      isStaticExp(key) &&
+      key.content === 'onUpdate:modelValue' &&
+      value.type === NodeTypes.COMPOUND_EXPRESSION
+    ) {
+      key.content = 'onInput'
+      // 替换 $event 为 $event.detail.value
+      value.children = value.children.map((child) => {
+        if (typeof child === 'string') {
+          return child.replace(/=\s\$event/g, `= $event.detail.value`)
+        }
+        return child
+      })
+    }
+  }
+  return result
 }
-- 
GitLab