[新增] collapse 组件
This commit is contained in:
parent
454b527541
commit
cccd93a076
@ -2,7 +2,7 @@
|
||||
|
||||
<template>
|
||||
<lay-collapse>
|
||||
<lay-collapse-item title="标题"> 内容 </lay-collapse-item>
|
||||
<lay-collapse-item title="标题" show> 内容 </lay-collapse-item>
|
||||
<lay-collapse-item title="标题"> 内容 </lay-collapse-item>
|
||||
<lay-collapse-item title="标题"> 内容 </lay-collapse-item>
|
||||
</lay-collapse>
|
||||
|
@ -5,13 +5,4 @@
|
||||
</template>
|
||||
|
||||
<script setup name="LayCollapse" lang="ts">
|
||||
import { provide } from "vue";
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
openKeys?:Array<string>
|
||||
}>()
|
||||
|
||||
provide('openKeys',props.openKeys);
|
||||
|
||||
</script>
|
||||
|
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">
|
||||
<h2 class="layui-colla-title" @click="showHandle">
|
||||
{{ title }}<i class="layui-icon layui-colla-icon"></i>
|
||||
</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
<div class="layui-colla-content" :class="isShow ? 'layui-show':''">
|
||||
<p>
|
||||
<slot></slot>
|
||||
</p>
|
||||
@ -12,14 +12,19 @@
|
||||
</template>
|
||||
|
||||
<script setup name="LayCollapseItem" lang="ts">
|
||||
import { defineProps, inject, ref } from 'vue'
|
||||
import { defineProps, Ref, ref } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
key?: string
|
||||
show?: boolean
|
||||
title?: string
|
||||
}>()
|
||||
|
||||
const openKeys = inject('openKeys');
|
||||
const isShow = ref(props.show) as Ref
|
||||
|
||||
const showHandle = function() {
|
||||
isShow.value = !isShow.value
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
Loading…
Reference in New Issue
Block a user