🐛: 修复 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>
<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() {

View File

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

View File

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