🐛: 修复 changeOpenKeys 内存引用的问题
This commit is contained in:
parent
b5d41e23e5
commit
65f36a0a61
@ -5,7 +5,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, provide, ref, watch } from "vue";
|
||||
import { computed, ComputedRef, provide, Ref, ref, watch, WritableComputedRef } from "vue";
|
||||
import "./index.less";
|
||||
|
||||
export interface LayMenuProps {
|
||||
@ -39,10 +39,10 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
|
||||
childSpacing: false,
|
||||
});
|
||||
|
||||
const isTree = computed(() => props.tree);
|
||||
const isCollapse = computed(() => props.collapse);
|
||||
const isCollapseTransition = computed(() => props.collapseTransition);
|
||||
let oldOpenKeys = ref<string[]>(props.openKeys);
|
||||
const isTree: ComputedRef = computed(() => props.tree);
|
||||
const isCollapse: ComputedRef = computed(() => props.collapse);
|
||||
const isCollapseTransition: ComputedRef = computed(() => props.collapseTransition);
|
||||
const oldOpenKeys: Ref = ref<string[]>(props.openKeys);
|
||||
|
||||
const openKeys = computed({
|
||||
get() {
|
||||
|
@ -48,11 +48,13 @@ watch(isOpen, () => {
|
||||
|
||||
const openHandle = function () {
|
||||
if (!isCollapse.value) {
|
||||
let newOpenKeys = [...openKeys.value];
|
||||
if (openKeys.value.includes(props.id)) {
|
||||
openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
|
||||
newOpenKeys.splice(newOpenKeys.indexOf(props.id), 1)
|
||||
} else {
|
||||
openKeys.value.push(props.id);
|
||||
newOpenKeys.push(props.id);
|
||||
}
|
||||
openKeys.value = newOpenKeys;
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -59,7 +59,8 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys2" :tree="true">
|
||||
选中:{{ selectedKey }} 打开: {{ openKeys2 }}
|
||||
<lay-menu :selectedKey="selectedKey" @changeSelectedKey="changeSelectedKey" @changeOpenKeys="changeOpenKeys" v-model:openKeys="openKeys2" :tree="true">
|
||||
<lay-menu-item id="1">首页</lay-menu-item>
|
||||
<lay-menu-item id="2">首页</lay-menu-item>
|
||||
<lay-menu-item id="3">首页</lay-menu-item>
|
||||
@ -89,10 +90,19 @@ export default {
|
||||
|
||||
const openKeys2 = ref(["7"])
|
||||
const selectedKey = ref("5")
|
||||
const changeSelectedKey = (val) => {
|
||||
selectedKey.value = val;
|
||||
}
|
||||
|
||||
const changeOpenKeys = (val) => {
|
||||
openKeys2.value = val;
|
||||
}
|
||||
|
||||
return {
|
||||
openKeys2,
|
||||
selectedKey
|
||||
selectedKey,
|
||||
changeOpenKeys,
|
||||
changeSelectedKey
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user