feat: add VSwitch component (#1562)

xiaodong2008 · kermanx · antfu · commit b1a9d8361d7b · 2024-06-30T14:17:18.000+02:00
Co-authored-by: _Kerman &lt;kermanx@qq.com&gt;
diff --git a/builtin/components.md b/builtin/components.md
@@ -259,6 +259,16 @@ Parameters:
 
 See https://sli.dev/guide/animations.html
 
+### `VSwitch`
+
+Switch between multiple slots based on clicks.
+
+See https://sli.dev/guide/animations.html#enter-leave
+
+- If the `unmount` prop is set to `true`, the previous slot will be unmounted when switching to the next slot. Default is `false`.
+- Use the `tag` and `childTag` props to change the default tag of the component and its children. Default is `div`.
+- Use the `transition` prop to change the transition effect. Default is `false` (disabled).
+
 ### `VDrag`
 
 See https://sli.dev/guide/draggable.html
diff --git a/guide/animations.md b/guide/animations.md
@@ -193,13 +193,24 @@ You can also specify the enter and leave index for the `v-click` directive by pa
 <div v-click.hide="[2, 4]">
   This will be hidden at click 2 and 3.
 </div>
-
 <div v-click />
 <div v-click="'[+1, +1]'">
   This will be shown at click 3, and hidden since click 4.
 </div>
 ```
 
+You can also use `v-switch` to achieve the same effect:
+
+```md
+<v-switch>
+  <template #1> show at click 1, hide at click 2. </template>
+  <template #2> show at click 2, hide at click 5. </template>
+  <template #5-7> show at click 5, hide at click 7. </template>
+</v-switch>
+```
+
+See [`VSwitch` Component](/builtin/components#vswitch) for more details.
+
 ### Custom Total Clicks Count
 
 By default, Slidev counts how many steps are needed before going to the next slide. You can override this setting by passing the `clicks` frontmatter option:
