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 事件使用
|
::: title 事件使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
@ -21,6 +21,7 @@
|
|||||||
<li>[新增] transition 组件 type 属性, 默认为 collapse 过渡。</li>
|
<li>[新增] transition 组件 type 属性, 默认为 collapse 过渡。</li>
|
||||||
<li>[新增] transition 组件 enable 属性, 默认为 true 启用动画。</li>
|
<li>[新增] transition 组件 enable 属性, 默认为 true 启用动画。</li>
|
||||||
<li>[新增] transition 组件 type 属性 fade 值, 提供淡出淡入效果。</li>
|
<li>[新增] transition 组件 type 属性 fade 值, 提供淡出淡入效果。</li>
|
||||||
|
<li>[新增] collapse 组件 isAmin 属性, 是否启用折叠动画, 默认为 true。</li>
|
||||||
<li>[新增] input 组件 allow-clear 属性, 提供输入清空。</li>
|
<li>[新增] input 组件 allow-clear 属性, 提供输入清空。</li>
|
||||||
<li>[新增] input 组件 prefix 插槽, 提供前缀设置。</li>
|
<li>[新增] input 组件 prefix 插槽, 提供前缀设置。</li>
|
||||||
<li>[新增] input 组件 suffix 插槽, 提供后缀设置。</li>
|
<li>[新增] input 组件 suffix 插槽, 提供后缀设置。</li>
|
||||||
|
@ -19,7 +19,7 @@ const props = withDefaults(defineProps<LayCollapseItemProps>(), {
|
|||||||
disabled: false,
|
disabled: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const { accordion, activeValues, emit } = inject("layCollapse") as any;
|
const { accordion, activeValues, emit, isAmin } = inject("layCollapse") as any;
|
||||||
|
|
||||||
let isShow = computed(() => {
|
let isShow = computed(() => {
|
||||||
return activeValues.value.includes(props.id);
|
return activeValues.value.includes(props.id);
|
||||||
@ -50,14 +50,11 @@ const showHandle = function () {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="layui-colla-item">
|
<div class="layui-colla-item">
|
||||||
<h2
|
<h2 :class="['layui-colla-title', { 'layui-disabled': disabled }]" @click="showHandle">
|
||||||
:class="['layui-colla-title', { 'layui-disabled': disabled }]"
|
|
||||||
@click="showHandle"
|
|
||||||
>
|
|
||||||
<slot name="title" :props="props">{{ title }}</slot>
|
<slot name="title" :props="props">{{ title }}</slot>
|
||||||
<i class="layui-icon layui-colla-icon">{{ isShow ? "" : "" }}</i>
|
<i class="layui-icon layui-colla-icon">{{ isShow ? "" : "" }}</i>
|
||||||
</h2>
|
</h2>
|
||||||
<lay-transition>
|
<lay-transition :enable="isAmin">
|
||||||
<div v-if="isShow">
|
<div v-if="isShow">
|
||||||
<div class="layui-colla-content">
|
<div class="layui-colla-content">
|
||||||
<p>
|
<p>
|
||||||
|
Loading…
Reference in New Issue
Block a user