feat: collapse 新增 isAmin 属性, 是否启用折叠动画

This commit is contained in:
就眠儀式 2022-03-24 17:51:41 +08:00
parent 89deffc121
commit 5c4e0c805f
3 changed files with 37 additions and 6 deletions

View File

@ -133,6 +133,39 @@ export default {
:::
::: title 关闭动画
:::
::: demo
<template>
<lay-collapse v-model="openKeys5" :isAmin="isAmin">
<lay-collapse-item title="标题1" id="1"> 内容1 </lay-collapse-item>
<lay-collapse-item title="标题2" id="2"> 内容2 </lay-collapse-item>
<lay-collapse-item title="标题3" id="3"> 内容3 </lay-collapse-item>
</lay-collapse>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const isAmin = ref(false)
const openKeys5 = ref("2")
return {
openKeys5,
isAmin
}
}
}
</script>
:::
::: title 事件使用
:::

View File

@ -21,6 +21,7 @@
<li>[新增] transition 组件 type 属性, 默认为 collapse 过渡。</li>
<li>[新增] transition 组件 enable 属性, 默认为 true 启用动画。</li>
<li>[新增] transition 组件 type 属性 fade 值, 提供淡出淡入效果。</li>
<li>[新增] collapse 组件 isAmin 属性, 是否启用折叠动画, 默认为 true。</li>
<li>[新增] input 组件 allow-clear 属性, 提供输入清空。</li>
<li>[新增] input 组件 prefix 插槽, 提供前缀设置。</li>
<li>[新增] input 组件 suffix 插槽, 提供后缀设置。</li>

View File

@ -19,7 +19,7 @@ const props = withDefaults(defineProps<LayCollapseItemProps>(), {
disabled: false,
});
const { accordion, activeValues, emit } = inject("layCollapse") as any;
const { accordion, activeValues, emit, isAmin } = inject("layCollapse") as any;
let isShow = computed(() => {
return activeValues.value.includes(props.id);
@ -50,14 +50,11 @@ const showHandle = function () {
<template>
<div class="layui-colla-item">
<h2
:class="['layui-colla-title', { 'layui-disabled': disabled }]"
@click="showHandle"
>
<h2 :class="['layui-colla-title', { 'layui-disabled': disabled }]" @click="showHandle">
<slot name="title" :props="props">{{ title }}</slot>
<i class="layui-icon layui-colla-icon">{{ isShow ? "" : "" }}</i>
</h2>
<lay-transition>
<lay-transition :enable="isAmin">
<div v-if="isShow">
<div class="layui-colla-content">
<p>