From b043eb7ee5bbab3f4beac7d9a804bcff47077770 Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Tue, 30 Jul 2024 16:52:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(v-slot):=20=E8=A1=A5=E5=85=85=20v-for=20?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E6=8F=92=E6=A7=BD=E5=90=8D=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/directive/v-slot/Foo-composition.uvue   |  8 ++
 pages/directive/v-slot/Foo-options.uvue       |  8 ++
 .../directive/v-slot/v-slot-composition.uvue  | 83 ++++++++++++-------
 pages/directive/v-slot/v-slot-options.uvue    | 32 ++++++-
 pages/directive/v-slot/v-slot.test.js         | 14 +++-
 5 files changed, 114 insertions(+), 31 deletions(-)

diff --git a/pages/directive/v-slot/Foo-composition.uvue b/pages/directive/v-slot/Foo-composition.uvue
index b562856..7766673 100644
--- a/pages/directive/v-slot/Foo-composition.uvue
+++ b/pages/directive/v-slot/Foo-composition.uvue
@@ -2,6 +2,10 @@
   <view>
     <slot name="header" :msg="msg"></slot>
     <slot :num="num"></slot>
+    <slot name="num1" :num="num"></slot>
+    <slot name="num2" :num="num"></slot>
+    <slot name="msgTrue" :msg="msg"></slot>
+    <slot name="msgFalse" :msg="msg"></slot>
     <slot name="footer" :arr="arr"></slot>
   </view>
 </template>
@@ -14,6 +18,10 @@
   defineSlots<{
     header(props : { msg : string }) : any,
     default(props : { num : number }) : any,
+    num1(props : { num : number }) : any,
+    num2(props : { num : number }) : any,
+    msgTrue(props : { msg : string }) : any,
+    msgFalse(props : { msg : string }) : any,
     footer(props : { arr : string[] }) : any
   }>()
 </script>
diff --git a/pages/directive/v-slot/Foo-options.uvue b/pages/directive/v-slot/Foo-options.uvue
index e2ab869..0471f59 100644
--- a/pages/directive/v-slot/Foo-options.uvue
+++ b/pages/directive/v-slot/Foo-options.uvue
@@ -2,6 +2,10 @@
   <view>
     <slot name="header" :msg="msg"></slot>
     <slot :num="num"></slot>
+    <slot name="num1" :num="num"></slot>
+    <slot name="num2" :num="num"></slot>
+    <slot name="msgTrue" :msg="msg"></slot>
+    <slot name="msgFalse" :msg="msg"></slot>
     <slot name="footer" :arr="arr"></slot>
   </view>
 </template>
@@ -11,6 +15,10 @@
     slots: Object as SlotsType<{
       header: { msg: string }
       default: { num: number }
+      num1: { num: number }
+      num2: { num: number }
+      msgTrue: { msg: string }
+      msgFalse: { msg: string }
       footer: { arr: string[] }
     }>,
     data(){
diff --git a/pages/directive/v-slot/v-slot-composition.uvue b/pages/directive/v-slot/v-slot-composition.uvue
index bdeffe3..ca1e7d5 100644
--- a/pages/directive/v-slot/v-slot-composition.uvue
+++ b/pages/directive/v-slot/v-slot-composition.uvue
@@ -1,28 +1,55 @@
-<template>
-  <view class="page">
-    <Foo>
-      <template #header="{ msg }">
-        <view class="mb-10 flex justify-between flex-row">
-          <text>header slot msg:</text>
-          <text id="slot-header">{{ msg }}</text>
-        </view>
-      </template>
-      <template #default="{ num }">
-        <view class="mb-10 flex justify-between flex-row">
-          <text>default slot num:</text>
-          <text id="slot-default">{{ num }}</text>
-        </view>
-      </template>
-      <template #footer="{ arr }">
-        <view class="mb-10 flex justify-between flex-row">
-          <text>footer slot arr:</text>
-          <text id="slot-footer">{{ JSON.stringify(arr) }}</text>
-        </view>
-      </template>
-    </Foo>
-  </view>
-</template>
-
-<script setup lang="uts">
-import Foo from './Foo-composition.uvue'
-</script>
+<template>
+  <view class="page">
+    <Foo>
+      <template #header="{ msg }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>header slot msg:</text>
+          <text id="slot-header">{{ msg }}</text>
+        </view>
+      </template>
+      <template #default="{ num }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>default slot num:</text>
+          <text id="slot-default">{{ num }}</text>
+        </view>
+      </template>
+      <template v-for="item in 2" #[`num${item}`]="{ num }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>num{{ item }} slot:</text>
+          <text :id="`slot-num${item}`">{{ num }}</text>
+        </view>
+      </template>
+      <template v-if="msgTrue['isShow']" #[msgTrue['name']]="{ msg }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>{{ msgTrue['name'] }} slot msg:</text>
+          <text id="slot-msg-true">{{ msg }}</text>
+        </view>
+      </template>
+      <template v-if="msgFalse['isShow']" #[msgFalse['name']]="{ msg }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>{{ msgFalse['name'] }} slot msg:</text>
+          <text id="slot-msg-false">{{ msg }}</text>
+        </view>
+      </template>
+      <template #footer="{ arr }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>footer slot arr:</text>
+          <text id="slot-footer">{{ JSON.stringify(arr) }}</text>
+        </view>
+      </template>
+    </Foo>
+  </view>
+</template>
+
+<script setup lang="uts">
+  import Foo from './Foo-composition.uvue'
+
+  const msgTrue = ref({
+    isShow: true,
+    name: 'msgTrue'
+  })
+  const msgFalse = ref({
+    isShow: false,
+    name: 'msgFalse'
+  })
+</script>
\ No newline at end of file
diff --git a/pages/directive/v-slot/v-slot-options.uvue b/pages/directive/v-slot/v-slot-options.uvue
index 02a9e24..a2999cf 100644
--- a/pages/directive/v-slot/v-slot-options.uvue
+++ b/pages/directive/v-slot/v-slot-options.uvue
@@ -13,6 +13,24 @@
           <text id="slot-default">{{ num }}</text>
         </view>
       </template>
+      <template v-for="item in 2" #[`num${item}`]="{ num }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>num{{ item }} slot:</text>
+          <text :id="`slot-num${item}`">{{ num }}</text>
+        </view>
+      </template>
+      <template v-if="msgTrue['isShow']" #[msgTrue['name']]="{ msg }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>{{ msgTrue['name'] }} slot msg:</text>
+          <text id="slot-msg-true">{{ msg }}</text>
+        </view>
+      </template>
+      <template v-if="msgFalse['isShow']" #[msgFalse['name']]="{ msg }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>{{ msgFalse['name'] }} slot msg:</text>
+          <text id="slot-msg-false">{{ msg }}</text>
+        </view>
+      </template>
       <template #footer="{ arr }">
         <view class="mb-10 flex justify-between flex-row">
           <text>footer slot arr:</text>
@@ -26,6 +44,18 @@
 <script lang="uts">
 import Foo from './Foo-options.uvue'
 export default {
-  components: {Foo}
+  components: {Foo},
+  data(){
+    return {
+      msgTrue: {
+        isShow: true,
+        name: 'msgTrue'
+      },
+      msgFalse: {
+        isShow: false,
+        name: 'msgFalse'
+      }
+    }
+  }
 }
 </script>
diff --git a/pages/directive/v-slot/v-slot.test.js b/pages/directive/v-slot/v-slot.test.js
index bce6e0b..bce1d92 100644
--- a/pages/directive/v-slot/v-slot.test.js
+++ b/pages/directive/v-slot/v-slot.test.js
@@ -11,8 +11,18 @@ describe('v-slot', () => {
     const slotHeader = await page.$('#slot-header')
     expect(await slotHeader.text()).toBe('foo msg')
 
-    const slotContent = await page.$('#slot-default')
-    expect(await slotContent.text()).toBe('0')
+    const slotDefault = await page.$('#slot-default')
+    expect(await slotDefault.text()).toBe('0')
+    
+    const slotNum1 = await page.$('#slot-num1')
+    expect(await slotNum1.text()).toBe('0')
+    const slotNum2 = await page.$('#slot-num2')
+    expect(await slotNum2.text()).toBe('0')
+    
+    const slotMsgTrue = await page.$('#slot-msg-true')
+    expect(await slotMsgTrue.text()).toBe('foo msg')
+    const slotMsgFalse = await page.$('#slot-msg-false')
+    expect(slotMsgFalse).toBe(null)
 
     const slotFooter = await page.$('#slot-footer')
     expect(await slotFooter.text()).toBe('["a","b","c"]')
-- 
GitLab