feat(v-slot): 补充 v-for 动态插槽名示例

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>

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(){

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

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

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>

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"]')