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