94 lines
2.6 KiB
Vue
94 lines
2.6 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { ref } from "vue";
|
|||
|
|
|
|||
|
|
defineOptions({
|
|||
|
|
name: "Collapse"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const radio = ref();
|
|||
|
|
const collapseRef = ref();
|
|||
|
|
const activeNames = ref(["1", "2", "3", "4", "5"]);
|
|||
|
|
const isOpen = ref(true);
|
|||
|
|
|
|||
|
|
function onClick() {
|
|||
|
|
isOpen.value
|
|||
|
|
? (activeNames.value = [])
|
|||
|
|
: radio.value === "accordion"
|
|||
|
|
? (activeNames.value = ["5"])
|
|||
|
|
: (activeNames.value = ["1", "2", "3", "4", "5"]);
|
|||
|
|
isOpen.value = !isOpen.value;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleChange = (val: string[]) => {
|
|||
|
|
console.log(val);
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<el-card shadow="never">
|
|||
|
|
<template #header>
|
|||
|
|
<div class="card-header">
|
|||
|
|
<el-space wrap :size="40">
|
|||
|
|
<el-link
|
|||
|
|
v-tippy="{
|
|||
|
|
content: '点击查看详细文档'
|
|||
|
|
}"
|
|||
|
|
href="https://element-plus.org/zh-CN/component/collapse.html"
|
|||
|
|
target="_blank"
|
|||
|
|
style="font-size: 16px; font-weight: 800"
|
|||
|
|
>
|
|||
|
|
折叠面板
|
|||
|
|
</el-link>
|
|||
|
|
</el-space>
|
|||
|
|
</div>
|
|||
|
|
<el-link
|
|||
|
|
class="mt-2"
|
|||
|
|
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/collapse.vue"
|
|||
|
|
target="_blank"
|
|||
|
|
>
|
|||
|
|
代码位置 src/views/components/collapse.vue
|
|||
|
|
</el-link>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<p class="mb-2">基础用法</p>
|
|||
|
|
<el-radio-group v-model="radio" class="mb-3">
|
|||
|
|
<el-radio value="">可同时展开多个面板</el-radio>
|
|||
|
|
<el-radio value="accordion">每次只能展开一个面板</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
<el-button size="small" text bg class="ml-8 mb-1" @click="onClick">
|
|||
|
|
外部触发打开、关闭
|
|||
|
|
</el-button>
|
|||
|
|
<el-collapse
|
|||
|
|
ref="collapseRef"
|
|||
|
|
v-model="activeNames"
|
|||
|
|
class="w-[360px]"
|
|||
|
|
:accordion="radio === 'accordion' ? true : false"
|
|||
|
|
@change="handleChange"
|
|||
|
|
>
|
|||
|
|
<el-collapse-item title="周一" name="1">
|
|||
|
|
周一启航，新的篇章
|
|||
|
|
</el-collapse-item>
|
|||
|
|
<el-collapse-item title="周二" name="2">
|
|||
|
|
周二律动，携手共进
|
|||
|
|
</el-collapse-item>
|
|||
|
|
<el-collapse-item title="周三" name="3">
|
|||
|
|
周三昂扬，激情不减
|
|||
|
|
</el-collapse-item>
|
|||
|
|
<el-collapse-item title="周四" name="4">
|
|||
|
|
周四精进，事半功倍
|
|||
|
|
</el-collapse-item>
|
|||
|
|
<el-collapse-item name="5">
|
|||
|
|
<template #title>
|
|||
|
|
周五
|
|||
|
|
<IconifyIconOnline
|
|||
|
|
icon="streamline-emojis:beaming-face-with-smiling-eyes"
|
|||
|
|
class="ml-1"
|
|||
|
|
width="30"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
周五喜悦，收尾归档
|
|||
|
|
</el-collapse-item>
|
|||
|
|
</el-collapse>
|
|||
|
|
</el-card>
|
|||
|
|
</template>
|