From 73b7751491790668e8ff2a14d0b8cdab4cee4259 Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Mon, 22 Apr 2024 09:30:10 +0800
Subject: [PATCH] refactor(directive): v-show

---
 pages.json                                    | 19 ++++--
 .../directive/v-show/v-show-composition.uvue  | 26 ++++++++
 pages/directive/v-show/v-show-options.uvue    | 29 +++++++++
 pages/directive/v-show/v-show.test.js         | 61 ++++++++++---------
 pages/directive/v-show/v-show.uvue            | 33 ----------
 pages/index/index.uvue                        | 16 +++++
 ...ions-API-composition-API-correspondence.md |  2 +-
 7 files changed, 118 insertions(+), 68 deletions(-)
 create mode 100644 pages/directive/v-show/v-show-composition.uvue
 create mode 100644 pages/directive/v-show/v-show-options.uvue
 delete mode 100644 pages/directive/v-show/v-show.uvue

diff --git a/pages.json b/pages.json
index ebcc3de..0630464 100644
--- a/pages.json
+++ b/pages.json
@@ -147,6 +147,19 @@
         "navigationBarTitleText": "v-html 组合式 API"
       }
     },
+    {
+      "path": "pages/directive/v-show/v-show-options",
+      "style": {
+        "navigationBarTitleText": "v-show 选项式 API"
+      }
+    },
+    {
+      "path": "pages/directive/v-show/v-show-composition",
+      "style": {
+        "navigationBarTitleText": "v-show 组合式 API"
+      }
+    },
+
     {
       "path": "pages/directive/v-bind/v-bind",
       "style": {
@@ -271,12 +284,6 @@
         "navigationBarTitleText": "v-pre"
       }
     },
-    {
-      "path": "pages/directive/v-show/v-show",
-      "style": {
-        "navigationBarTitleText": "v-show"
-      }
-    },
     {
       "path": "pages/directive/v-slot/v-slot",
       "style": {
diff --git a/pages/directive/v-show/v-show-composition.uvue b/pages/directive/v-show/v-show-composition.uvue
new file mode 100644
index 0000000..99bba15
--- /dev/null
+++ b/pages/directive/v-show/v-show-composition.uvue
@@ -0,0 +1,26 @@
+<template>
+  <view class="page">
+    <button id="toggle-btn" @click="toggleShow">toggle show/hide</button>
+    <view class="v-show-element mt-10" v-show="dataInfo.show">
+      点击上方按钮，切换显示/隐藏
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+type DataInfo = {
+  show: boolean
+}
+
+const dataInfo = reactive({
+  show: true
+} as DataInfo)
+
+const toggleShow = () => {
+  dataInfo.show = !dataInfo.show
+}
+
+defineExpose({
+  dataInfo
+})
+</script>
diff --git a/pages/directive/v-show/v-show-options.uvue b/pages/directive/v-show/v-show-options.uvue
new file mode 100644
index 0000000..75a5ef0
--- /dev/null
+++ b/pages/directive/v-show/v-show-options.uvue
@@ -0,0 +1,29 @@
+<template>
+  <view class="page">
+    <button id="toggle-btn" @click="toggleShow">toggle show/hide</button>
+    <view class="v-show-element mt-10" v-show="dataInfo.show">
+      点击上方按钮，切换显示/隐藏
+    </view>
+  </view>
+</template>
+
+<script lang="uts">
+type DataInfo = {
+  show: boolean
+}
+
+export default {
+  data() {
+    return {
+      dataInfo: {
+        show: true
+      } as DataInfo
+    }
+  },
+  methods: {
+    toggleShow() {
+      this.dataInfo.show = !this.dataInfo.show
+    }
+  }
+}
+</script>
diff --git a/pages/directive/v-show/v-show.test.js b/pages/directive/v-show/v-show.test.js
index a7ff668..19b1aaa 100644
--- a/pages/directive/v-show/v-show.test.js
+++ b/pages/directive/v-show/v-show.test.js
@@ -1,36 +1,41 @@
-const PAGE_PATH = '/pages/directive/v-show/v-show'
+const OPTIONS_PAGE_PATH = '/pages/directive/v-show/v-show-options'
+const COMPOSITION_PAGE_PATH = '/pages/directive/v-show/v-show-composition'
 
 describe('v-show', () => {
   let page
-  beforeAll(async () => {
-    page = await program.reLaunch(PAGE_PATH)
-    await page.waitFor(500)
-  })
-  it('style::display', async () => {
-    const element = await page.$('.v-show-content')
-    expect(await element.style('display')).toBe('flex')
+  
+  const test = async (page) => {
+    let dataInfo = await page.data('dataInfo')
+    expect(dataInfo.show).toBe(true)
+    
+    const vShowElement = await page.$('.v-show-element')
+    expect(await vShowElement.style('display')).toBe('flex')
+    
 
-    const toggle = await page.$('.btn-toggle')
+    const toggle = await page.$('#toggle-btn')
     await toggle.tap()
-    expect(await element.style('display')).toBe('none')
+    
+    dataInfo = await page.data('dataInfo')
+    expect(dataInfo.show).toBe(false)
+    expect(await vShowElement.style('display')).toBe('none')
+    
     await toggle.tap()
-    expect(await element.style('display')).toBe('flex')
+    dataInfo = await page.data('dataInfo')
+    expect(dataInfo.show).toBe(true)
+    expect(await vShowElement.style('display')).toBe('flex')
+  }
+  
+  it('v-show options API', async () => {
+    page = await program.reLaunch(OPTIONS_PAGE_PATH)
+    await page.waitFor('view')
+    
+    await test(page)
+  })
+  
+  it('v-show composition API', async () => {
+    page = await program.reLaunch(COMPOSITION_PAGE_PATH)
+    await page.waitFor('view')
+    
+    await test(page)
   })
-  // it('screenshot', async () => {
-  //   const toggle = await page.$('.btn-toggle')
-  //   const element = await page.$('.hello')
-
-  //   const image1 = await program.screenshot()
-  //   expect(image1).toMatchSnapshot()
-
-  //   await toggle.tap()
-  //   await page.waitFor(20)
-  //   const image2 = await program.screenshot()
-  //   expect(image2).toMatchSnapshot()
-
-  //   await toggle.tap()
-  //   await page.waitFor(20)
-  //   const image3 = await program.screenshot()
-  //   expect(image3).toMatchSnapshot()
-  // })
 })
\ No newline at end of file
diff --git a/pages/directive/v-show/v-show.uvue b/pages/directive/v-show/v-show.uvue
deleted file mode 100644
index 9f6305f..0000000
--- a/pages/directive/v-show/v-show.uvue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <view class="page">
-    <view class="split-title">button:click</view>
-    <button class="btn-show" @click="onClickShow">show</button>
-    <button class="btn-hide" @click="onClickHide">hide</button>
-    <button class="btn-toggle" @click="onClickShowOrHide">show/hide</button>
-    <view class="v-show-content" v-show="show">hello-v-show</view>
-  </view>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        show: true
-      }
-    },
-    methods: {
-      onClickShow() {
-        this.show = true
-      },
-      onClickHide() {
-        this.show = false
-      },
-      onClickShowOrHide() {
-        this.show = !this.show
-      }
-    }
-  }
-</script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/pages/index/index.uvue b/pages/index/index.uvue
index 3c771d8..1008be7 100644
--- a/pages/index/index.uvue
+++ b/pages/index/index.uvue
@@ -650,6 +650,22 @@ export default {
                   url: 'v-html-composition'
                 },
               ]
+            },
+            {
+              id: 'v-show',
+              name: 'v-show',
+              children: [
+                {
+                  id: 'v-show-options',
+                  name: 'v-show 选项式 API',
+                  url: 'v-show-options'
+                },
+                {
+                  id: 'v-show-composition',
+                  name: 'v-show 组合式 API',
+                  url: 'v-show-composition'
+                },
+              ]
             }
           ]
         },
diff --git a/refactor_options-API-composition-API-correspondence.md b/refactor_options-API-composition-API-correspondence.md
index 3d44978..5fcdccc 100644
--- a/refactor_options-API-composition-API-correspondence.md
+++ b/refactor_options-API-composition-API-correspondence.md
@@ -154,7 +154,7 @@ function transform(fileInfo, api) {
 ## directives
 
 - [x] v-html
-- [ ] v-show
+- [x] v-show
 - [ ] v-if v-else-if v-else
 - [ ] v-for
 - [ ] v-on
-- 
GitLab