refactor(directive): v-show

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": {

pages/directive/v-show/v-show-composition.uvue

+<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>

pages/directive/v-show/v-show-options.uvue

+<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>

pages/directive/v-show/v-show.test.js

-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 toggle = await page.$('.btn-toggle')
+  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.$('#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

pages/directive/v-show/v-show.uvue

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

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'
+                },
+              ]
             }
           ]
         },

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