[新增] collapse 组件

This commit is contained in:
就眠仪式 2021-10-04 21:56:49 +08:00
parent 454b527541
commit cccd93a076
3 changed files with 11 additions and 15 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>