From 9d6c3874c917dc9fbc840644ea5ada0185041bb7 Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Thu, 18 Jan 2024 15:38:09 +0800
Subject: [PATCH] feat(composition api): defineModel

---
 .../basic/define-model/Foo.uvue               | 20 ++++++++++
 .../basic/define-model/define-model.test.js   | 37 +++++++++++++++++++
 .../basic/define-model/define-model.uvue      | 30 ++++++++++++++-
 pages/tab-bar/composition-api.uvue            |  5 +++
 4 files changed, 90 insertions(+), 2 deletions(-)
 create mode 100644 pages/composition-api/basic/define-model/Foo.uvue
 create mode 100644 pages/composition-api/basic/define-model/define-model.test.js

diff --git a/pages/composition-api/basic/define-model/Foo.uvue b/pages/composition-api/basic/define-model/Foo.uvue
new file mode 100644
index 0000000..d41a937
--- /dev/null
+++ b/pages/composition-api/basic/define-model/Foo.uvue
@@ -0,0 +1,20 @@
+<template>
+  <view>
+    <text id="model-value-text">modelValue in Foo: {{modelValue}}</text>
+    <text class='uni-common-mt' id="msg-text">msg in Foo: {{msg}}</text>
+    <button class='uni-common-mt' id="update-value-btn" @click='updateValue'>update value</button>
+  </view>
+</template>
+
+<script setup>
+  // 在被修改时，触发 "update:modelValue" 事件
+  const modelValue = defineModel({ type: String })
+
+  // 在被修改时，触发 "update:msg" 事件
+  const msg = defineModel('msg', { type: String })
+
+  const updateValue = () => {
+    modelValue.value += '1'
+    msg.value += '2'
+  }
+</script>
\ No newline at end of file
diff --git a/pages/composition-api/basic/define-model/define-model.test.js b/pages/composition-api/basic/define-model/define-model.test.js
new file mode 100644
index 0000000..cd1a1e9
--- /dev/null
+++ b/pages/composition-api/basic/define-model/define-model.test.js
@@ -0,0 +1,37 @@
+const PAGE_PATH = '/pages/composition-api/basic/define-model/define-model'
+
+describe('defineModel', () => {
+  if (process.env.uniTestPlatformInfo.startsWith('android')) {
+    let page = null
+    beforeAll(async () => {
+      page = await program.reLaunch(PAGE_PATH)
+      await page.waitFor('view')
+    })
+    it('basic', async () => {
+      const modelValueText = await page.$('#model-value-text')
+      expect(await modelValueText.text()).toBe('modelValue in Foo: str')
+
+      const modelValueInput = await page.$('#model-value-input')
+      expect(await modelValueInput.property('value')).toBe('str')
+
+      const msgText = await page.$('#msg-text')
+      expect(await msgText.text()).toBe('msg in Foo: msg')
+
+      const msgInput = await page.$('#msg-input')
+      expect(await msgInput.property('value')).toBe('msg')
+
+      const updateValueBtn = await page.$('#update-value-btn')
+      await updateValueBtn.tap()
+
+      expect(await modelValueText.text()).toBe('modelValue in Foo: str1')
+      expect(await modelValueInput.property('value')).toBe('str1')
+
+      expect(await msgText.text()).toBe('msg in Foo: msg2')
+      expect(await msgInput.property('value')).toBe('msg2')
+    })
+  } else {
+    it('other platform', () => {
+      expect(1).toBe(1)
+    })
+  }
+})
\ No newline at end of file
diff --git a/pages/composition-api/basic/define-model/define-model.uvue b/pages/composition-api/basic/define-model/define-model.uvue
index 80fc798..28df30b 100644
--- a/pages/composition-api/basic/define-model/define-model.uvue
+++ b/pages/composition-api/basic/define-model/define-model.uvue
@@ -1,5 +1,31 @@
 <template>
-  <view class="page"> defineModel </view>
+  <view class="page">
+    <Foo v-model='str' v-model:msg="msg" @update:modelValue="handleModelValueUpdate" @update:msg="handleMsgUpdate" />
+    <input class='uni-common-mt input' id="model-value-input" v-model="str" />
+    <input class='uni-common-mt input' id="msg-input" v-model="msg" />
+  </view>
 </template>
 
-<script setup></script>
+<script setup>
+  import Foo from './Foo.uvue'
+
+  const str = ref('str')
+  const msg = ref('msg')
+
+  const handleModelValueUpdateRes = ref('')
+  const handleModelValueUpdate = (val : string) => {
+    handleModelValueUpdateRes.value = `new str value: ${val}`
+  }
+  const handleMsgUpdateRes = ref('')
+  const handleMsgUpdate = (val : string) => {
+    handleMsgUpdateRes.value = `new msg value: ${val}`
+  }
+</script>
+
+<style>
+  .input {
+    padding: 8px 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+</style>
\ No newline at end of file
diff --git a/pages/tab-bar/composition-api.uvue b/pages/tab-bar/composition-api.uvue
index 3d14698..a011d89 100644
--- a/pages/tab-bar/composition-api.uvue
+++ b/pages/tab-bar/composition-api.uvue
@@ -67,6 +67,11 @@
             url: 'define-slots',
             enable: true,
           },
+{
+            name: 'defineModel',
+            url: 'define-model',
+            enable: true,
+          },
           {
             name: 'useSlots',
             url: 'use-slots',
-- 
GitLab