feat: ✨ Tabs 组件调整为受控组件

✅ Closes: #82
Moonofweisheng · Oct 16, 2023 · b2a70bc · b2a70bc
1 parent 5c53c43
commit b2a70bc
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/src/pages/tabs/Index.vue b/src/pages/tabs/Index.vue
@@ -5,7 +5,10 @@
       <wd-tabs v-model="tab1" @change="handleChange">
         <block v-for="item in 4" :key="item">
           <wd-tab :title="`标签${item}`" :name="item">
-            <view class="content">内容{{ item }}</view>
+            <view class="content">
+              内容{{ item }}
+              <wd-button @click="tab1 < 3 ? tab1++ : (tab1 = 0)">下一个</wd-button>
+            </view>
           </wd-tab>
         </block>
       </wd-tabs>
@@ -105,8 +108,11 @@ function handleChange(event) {
 </script>
 <style lang="scss" scoped>
 .content {
-  line-height: 120px;
+  height: 120px;
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
 }
 .large {
   line-height: 320px;

diff --git a/src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue b/src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue
@@ -245,14 +245,24 @@ watch(
       // eslint-disable-next-line quotes
       console.error("[wot design] error(wd-tabs): tabs's value cannot be less than zero")
     }
-    // setActive && setActive(newValue)
   },
   {
     immediate: true,
     deep: true
   }
 )
 
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    setActive(newValue)
+  },
+  {
+    immediate: false,
+    deep: true
+  }
+)
+
 watch(
   () => props.slidableNum,
   (newValue) => {