fix(props): 修复 tab 和 menu 的双绑逻辑

docs/docs/zh-CN/components/menu.md

@@ -1,7 +1,7 @@
 ::: demo
 
 <template>
-  <lay-menu selectedKey="5">
+  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys">
     <lay-menu-item title="首页" id="1"></lay-menu-item>
     <lay-menu-item title="用户" id="2"></lay-menu-item>
     <lay-menu-item title="角色" id="3"></lay-menu-item> 
@@ -19,7 +19,11 @@ import { ref } from 'vue'
 export default {
   setup() {
 
+    const selectedKey = ref("5")
+    const openKeys = ref(["7"])   
     return {
+      selectedKey,
+      openKeys
     }
   }
 }

docs/docs/zh-CN/guide/changelog.md

@@ -4,6 +4,10 @@
 ::: demo
 <template>
     <lay-timeline>
+        <lay-timeline-item title="0.1.5">
+          [修复] menu 菜单 selectedKey 选中项 openKeys 打开项 props 双绑。<br>
+          [修复] tab 选项卡 v-model 激活项 双绑。<br>
+        </lay-timeline-item>
         <lay-timeline-item title="0.1.4">
           [新增] button 按钮 loading 属性, 提供 加载 状态。<br>
           [新增] tab 选项卡 allow-close 属性，支持 关闭。<br>

docs/docs/zh-CN/guide/sandbox.md

@@ -0,0 +1,54 @@
+::: field 测试
+:::
+
+::: demo
+
+<template>
+<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" :tree="isTree">
+    <lay-menu-item title="工作空间" id="0">
+        <lay-menu-child-item id="1" title="控制台">
+        </lay-menu-child-item>
+        <lay-menu-child-item id="2" title="分析页">
+        </lay-menu-child-item>
+    </lay-menu-item>
+    <lay-menu-item title="错误页面" id="3">
+        <lay-menu-child-item id="4" title="403">
+        </lay-menu-child-item>
+        <lay-menu-child-item id="5" title="404">
+        </lay-menu-child-item>
+        <lay-menu-child-item id="6" title="500">
+        </lay-menu-child-item>
+    </lay-menu-item>
+</lay-menu>
+  <lay-tab type="brief" v-model="selectedKey">
+    <lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
+    <lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
+  </lay-tab>
+</template>
+
+<script>
+import { ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+export default {
+  setup() {
+    const router = useRouter();
+    const route = useRoute();
+
+    const isTree = ref(true);
+    const selectedKey = ref("1");
+    const openKeys = ref(["0"]);
+    const change = function (id) {
+        selectedKey.value = id
+    };
+
+    return {
+      isTree,
+      selectedKey,
+      openKeys,
+      change,
+    };
+  },
+};
+</script>
+
+:::

docs/src/layouts/Layout.vue

@@ -105,6 +105,12 @@ export default {
         subTitle: 'change log',
         path: '/zh-CN/guide/changelog',
       },
+      {
+        id: 39,
+        title: '沙盒',
+        subTitle: 'sandbox',
+        path: '/zh-CN/guide/sandbox'
+      },
       {
         id: 4,
         title: '布局',

docs/src/router/zh-CN.ts

@@ -22,6 +22,11 @@ const zhCN = [
         component: () => import('../../docs/zh-CN/guide/changelog.md'),
         meta: { title: '更新' },
       },
+      {
+        path: '/zh-CN/guide/sandbox',
+        component: () => import('../../docs/zh-CN/guide/sandbox.md'),
+        meta: { title: '沙盒' },
+      },
     ],
   },
   {

src/module/carouselItem/index.vue

@@ -12,5 +12,4 @@ const props =
   }>()
 
 const active = inject('active')
-
 </script>

src/module/menu/index.vue

@@ -5,7 +5,9 @@
 </template>
 
 <script setup name="LayMenu" lang="ts">
-import { defineProps, provide, ref, watch } from 'vue'
+import { computed, defineProps, provide, ref, watch } from 'vue'
+
+const emit = defineEmits(['update:selectedKey', 'update:openKeys'])
 
 const props = withDefaults(
   defineProps<{
@@ -15,28 +17,46 @@ const props = withDefaults(
   }>(),
   {
     selectedKey: '',
-    openKeys: function() {
+    openKeys: function () {
       return []
     },
     tree: false,
   }
 )
 
-const isTree = ref(props.tree)
+const isTree = computed(() => props.tree)
-const selectedKey = ref(props.selectedKey)
+
-const openKeys = ref([...props.openKeys])
+const openKeys = computed({
+  get() {
+    return props.openKeys
+  },
+  set(val) {
+    emit('update:selectedKey', val)
+  },
+})
+
+const selectedKey = computed({
+  get() {
+    return props.selectedKey
+  },
+  set(val) {
+    emit('update:selectedKey', val)
+  },
+})
+
+watch(selectedKey, function (val) {
+  emit('update:selectedKey', val)
+})
+
+watch(
+  openKeys,
+  function (val) {
+    emit('update:openKeys', val)
+  },
+  { deep: true }
+)
 
 provide('isTree', isTree)
 provide('selectedKey', selectedKey)
-provide('openKeys',openKeys)
+provide('openKeys', openKeys)
-
-const emit = defineEmits(['update:selectedKey','update:openKeys'])
-
-watch(selectedKey, function(val) {
-  emit('update:selectedKey',val)
-})
-
-watch(openKeys, function(val) {
-  emit('update:openKeys',val)
-},{deep : true})
 </script>

src/module/tab/index.vue

@@ -4,11 +4,15 @@
       <li
         v-for="ss in slots"
         :key="ss"
-        :class="[ss.props.id === modelValue ? 'layui-this' : '']"
+        :class="[ss.props.id === active ? 'layui-this' : '']"
         @click.stop="change(ss.props.id)"
       >
         {{ ss.props.title }}
-        <i @click.stop="close(ss.props.id)"  v-if="allowClose" class="layui-icon layui-icon-close layui-unselect layui-tab-close"></i>
+        <i
+          @click.stop="close(ss.props.id)"
+          v-if="allowClose"
+          class="layui-icon layui-icon-close layui-unselect layui-tab-close"
+        ></i>
       </li>
     </ul>
     <div class="layui-tab-content">
@@ -18,7 +22,7 @@
 </template>
 
 <script setup name="LayTab" lang="ts">
-import { defineProps, provide, ref, useSlots } from 'vue'
+import { computed, defineProps, provide, ref, useSlots } from 'vue'
 
 const slot = useSlots() as any
 const slots = slot.default && slot.default()
@@ -30,17 +34,23 @@ const props = defineProps<{
 }>()
 
 // select update 时, 通知 change 事件
-const emit = defineEmits(['update:modelValue','change','close'])
+const emit = defineEmits(['update:modelValue', 'change', 'close'])
 
-const active = ref(props.modelValue)
+const active = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  }
+})
 
 const change = function (id: any) {
   emit('update:modelValue', id)
   emit('change', id)
-  active.value = id
 }
 
-const close = function(id: any) {
+const close = function (id: any) {
   emit('close', id)
 }