feat: collapse 新增 isAmin 属性, 是否启用折叠动画
This commit is contained in:
parent
89deffc121
commit
5c4e0c805f
@ -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 事件使用
|
||||
:::
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user