1.子组件A页面
<template>
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
<button @click="toggleCollapse()">开关</button>
</el-radio-group>
</template>
<script setup lang="ts">
import { ref } from "vue";
const emits = defineEmits(["parentCli"]);
const isCollapse = ref(false);
const toggleCollapse = () => {
isCollapse.value = !isCollapse.value;
console.log("isCollapse", isCollapse.value);
emits("parentCli", isCollapse.value); // 使用方式和 wue2 this.$emit 一样
};
//yufatan
</script>
<style>
</style>
定义了一个名为emits
的变量,并使用defineEmits
方法创建了一个可供组件使用的自定义事件parentCli
。
然后,代码创建了一个名为isCollapse
的响应式变量,并将其初始值设置为false
。该变量用于表示一个折叠状态,即是否处于折叠状态。
之后,代码定义了一个名为toggleCollapse
的函数。这个函数的作用是切换isCollapse
的值,将其设置为相反的布尔值。然后,在控制台中输出isCollapse
的值。
最后,代码通过调用emits
方法,触发了名为parentCli
的自定义事件,并传递了isCollapse
的值作为参数
2.A和B的公共父组件
<template>
<div class="common-layout">
<el-container>
<el-aside :width="isCollapse ?'64px':'250px'">
<Menu :isCollapse="isCollapse"></Menu>
</el-aside>
<el-container>
<el-header>
<Head @parentCli="parentCli"></Head>
</el-header>
<el-main>
<main></main>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script setup lang="ts">
import Menu from "./menu/index.vue";
import Head from "./head/index.vue";
import Main from "./main/index.vue";
import { ref } from "vue";
const isCollapse = ref(false);
const parentCli = (isCollapseValue: boolean) => {
isCollapse.value = isCollapseValue;
console.log("isCollapse22", isCollapse.value);
};
这段代码使用 Vue.js 的 ref
函数创建了一个响应式的变量 isCollapse
,然后定义了一个函数 parentCli
用于更新 isCollapse
的值,并在控制台打印出来。
B组件页面
<template>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
:collapse="isCollapse"
@open="handleOpen"
@close="handleClose"
>
<el-sub-menu index="1">
<template #title>
<el-icon><location /></el-icon>
<span>Navigator One{
{ isCollapse }}</span>
</template>
<el-menu-item-group>
<template #title><span>Group One</span></template>
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title><span>item four</span></template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<el-icon><icon-menu /></el-icon>
<template #title>Navigator Two</template>
</el-menu-item>
<el-menu-item index="3" disabled>
<el-icon><document /></el-icon>
<template #title>Navigator Three</template>
</el-menu-item>
<el-menu-item index="4">
<el-icon><setting /></el-icon>
<template #title>Navigator Four</template>
</el-menu-item>
</el-menu>
</template>
<script lang="ts" setup>
import { ref } from "vue";
// import { defineEmits} from "vue";
import {
Document,
Menu as IconMenu,
Location,
Setting,
} from "@element-plus/icons-vue";
type Props = {
isCollapse: boolean;
};
defineProps<Props>();
// const props = defineProps(['receivedData']);
// const isCollapse = ref(true);
const handleOpen = (key: string, keyPath: string[]) => {
console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
console.log(key, keyPath);
};
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 250px;
min-height: 100vw;
}
.el-menu--collapse {
height: 100vh;
}
</style>
此代码也同时处理了菜单折叠问题:动画卡顿,菜单高度,菜单背景不变等问题