feat: transition 新增 enable 属性, 用于开启关闭过渡

This commit is contained in:
就眠儀式 2022-03-24 16:23:29 +08:00
parent ce356012ce
commit 7b6854629b
2 changed files with 11 additions and 6 deletions

View File

@ -53,8 +53,8 @@ const handleClick = function () {
<em>{{ isActive == true ? activeText : inactiveText }}</em> <em>{{ isActive == true ? activeText : inactiveText }}</em>
<span> <span>
<div> <div>
<slot v-if="isActive" name="onswitch-icon"></slot> <slot v-if="isActive" name="onswitch-icon"></slot>
<slot v-else name="unswitch-icon"></slot> <slot v-else name="unswitch-icon"></slot>
</div> </div>
</span> </span>
</div> </div>

View File

@ -1,8 +1,11 @@
<template> <template>
<LayCollapseTransition v-if="type === 'collapse'" <template v-if="enable">
><slot></slot <LayCollapseTransition v-if="type === 'collapse'"><slot></slot></LayCollapseTransition>
></LayCollapseTransition> <LayFadeTransition v-if="type === 'fade'"><slot></slot></LayFadeTransition>
<LayFadeTransition v-if="type === 'fade'"><slot></slot></LayFadeTransition> </template>
<template v-else>
<slot></slot>
</template>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -17,9 +20,11 @@ import LayFadeTransition from "./fadeTransition.vue";
export interface LayTransitionProps { export interface LayTransitionProps {
type?: string; type?: string;
enable?: boolean;
} }
const props = withDefaults(defineProps<LayTransitionProps>(), { const props = withDefaults(defineProps<LayTransitionProps>(), {
type: "collapse", type: "collapse",
enable: true
}); });
</script> </script>