feat: 补充自定义组件绑定 v-show 示例及测试 issue:13061

pages/directive/v-show/Foo.uvue

+<template>
+  <view id="foo">
+    component Foo
+  </view>
+</template>

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

-<template>
-  <view class="page">
-    <button id="toggle-btn" @click="toggleShow">toggle show/hide</button>
-    <text>点击上方按钮，切换下方 view 显示/隐藏</text>
-    <text>show default true: {{dataInfo.showDefaultTrue}}</text>
-    <view class="mt-10 default-true" id="v-show-element-default-true" v-show="dataInfo.showDefaultTrue"></view>
-    <text>show default false: {{dataInfo.showDefaultFalse}}</text>
+<template>
+  <view class="page">
+    <button id="toggle-btn" @click="toggleShow">toggle show/hide</button>
+    <text>点击上方按钮，切换下方 view 显示/隐藏</text>
+    <text>show default true: {{dataInfo.showDefaultTrue}}</text>
+    <view class="mt-10 default-true" id="v-show-element-default-true" v-show="dataInfo.showDefaultTrue"></view>
+    <text>show default false: {{dataInfo.showDefaultFalse}}</text>
     <view class="mt-10 default-false" id="v-show-element-default-false" v-show="dataInfo.showDefaultFalse"></view>
-  </view>
-</template>
-
-<script setup lang="uts">
-type DataInfo = {
-  showDefaultTrue : boolean
-  showDefaultFalse : boolean
-}
-
-const dataInfo = reactive({
-  showDefaultTrue: true,
-  showDefaultFalse: false
-} as DataInfo)
-
-const toggleShow = () => {
-  dataInfo.showDefaultTrue = !dataInfo.showDefaultTrue
-  dataInfo.showDefaultFalse = !dataInfo.showDefaultFalse
-}
-
-defineExpose({
-  dataInfo
-})
-</script>
-
-<style>
-  .default-true,
-  .default-false{
-    display: flex;
-    width: 100px;
-    height: 50px;
+    <Foo v-show="dataInfo.showDefaultFalse" />
+  </view>
+</template>
+
+<script setup lang="uts">
+  import Foo from './Foo.uvue'
+
+  type DataInfo = {
+    showDefaultTrue : boolean
+    showDefaultFalse : boolean
+  }
+
+  const dataInfo = reactive({
+    showDefaultTrue: true,
+    showDefaultFalse: false
+  } as DataInfo)
+
+  const toggleShow = () => {
+    dataInfo.showDefaultTrue = !dataInfo.showDefaultTrue
+    dataInfo.showDefaultFalse = !dataInfo.showDefaultFalse
   }
-  .default-true {
-    background-color: greenyellow;
-  }
-  .default-false {
-    background-color: antiquewhite;
+
+  defineExpose({
+    dataInfo
+  })
+</script>
+
+<style>
+  .default-true,
+  .default-false {
+    display: flex;
+    width: 100px;
+    height: 50px;
+  }
+
+  .default-true {
+    background-color: greenyellow;
+  }
+
+  .default-false {
+    background-color: antiquewhite;
   }
 </style>
\ No newline at end of file

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

 <template>
   <view class="page">
     <button id="toggle-btn" @click="toggleShow">toggle show/hide</button>
-    <text>点击上方按钮，切换下方 view 显示/隐藏</text>
-    <text>show default true: {{dataInfo.showDefaultTrue}}</text>
+    <text>点击上方按钮，切换下方 view 显示/隐藏</text>
+    <text>show default true: {{dataInfo.showDefaultTrue}}</text>
     <view class="mt-10 default-true" id="v-show-element-default-true" v-show="dataInfo.showDefaultTrue"></view>
     <text>show default false: {{dataInfo.showDefaultFalse}}</text>
-    <view class="mt-10 default-false" id="v-show-element-default-false" v-show="dataInfo.showDefaultFalse"></view>
+    <view class="mt-10 default-false" id="v-show-element-default-false" v-show="dataInfo.showDefaultFalse"></view>
+    <Foo v-show="dataInfo.showDefaultFalse" />
   </view>
 </template>
 
 <script lang="uts">
+  import Foo from './Foo.uvue'
+
   type DataInfo = {
     showDefaultTrue : boolean
     showDefaultFalse : boolean
   }
 
   export default {
+    components: { Foo },
     data() {
       return {
         dataInfo: {
@@ -33,17 +37,19 @@
   }
 </script>
 
-<style>
-  .default-true,
-  .default-false{
-    display: flex;
-    width: 100px;
-    height: 50px;
+<style>
+  .default-true,
+  .default-false {
+    display: flex;
+    width: 100px;
+    height: 50px;
+  }
+
+  .default-true {
+    background-color: greenyellow;
   }
-  .default-true {
-    background-color: greenyellow;
-  }
-  .default-false {
-    background-color: antiquewhite;
+
+  .default-false {
+    background-color: antiquewhite;
   }
 </style>
\ No newline at end of file

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

@@ -13,6 +13,8 @@ describe('v-show', () => {
     expect(await vShowElementDefaultTrue.style('display')).toBe('flex')
     const vShowElementDefaultFalse = await page.$('#v-show-element-default-false')
     expect(await vShowElementDefaultFalse.style('display')).toBe('none')
+    const foo = await page.$('#foo')
+    expect(await foo.style('display')).toBe('none')
 
     const toggle = await page.$('#toggle-btn')
     await toggle.tap()
@@ -22,6 +24,7 @@ describe('v-show', () => {
     expect(dataInfo.showDefaultFalse).toBe(true)
     expect(await vShowElementDefaultTrue.style('display')).toBe('none')
     expect(await vShowElementDefaultFalse.style('display')).toBe('flex')
+    expect(await foo.style('display')).toBe('flex')
     
     await toggle.tap()
     dataInfo = await page.data('dataInfo')
@@ -29,6 +32,7 @@ describe('v-show', () => {
     expect(dataInfo.showDefaultFalse).toBe(false)
     expect(await vShowElementDefaultTrue.style('display')).toBe('flex')
     expect(await vShowElementDefaultFalse.style('display')).toBe('none')
+    expect(await foo.style('display')).toBe('none')
   }
   
   it('v-show options API', async () => {