🐛: 修复 changeOpenKeys 内存引用的问题

This commit is contained in:
就眠儀式 2022-05-08 23:18:06 +08:00
parent b5d41e23e5
commit 65f36a0a61
3 changed files with 21 additions and 9 deletions

View File

@ -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() {

View File

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

View File

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