feat: ✨ Tab 添加 lazy 属性支持配置是否开启懒加载

✅ Closes: #641

Author: Moonofweisheng

docs/component/tabs.md

@@ -190,8 +190,9 @@ const tab = ref('Design')
 | 参数     | 说明       | 类型    | 可选值 | 默认值 | 最低版本 |
 | -------- | ---------- | ------- | ------ | ------ | -------- |
 | name     | 标签页名称 | string  | -      | -      | -        |
-| title    | 标题       | string  | -      | -      | -        |
-| disabled | 禁用       | boolean | -      | false  | -        |
+| title    | 标题       | string  | -     | -      | -        |
+| disabled | 禁用       | boolean | -     | false  | -        |
+| lazy     | 延迟渲染，默认开启，开启`animated`后此选项始终为`false`    | boolean | -     | true   | $LOWEST_VERSION$ |
 
 ## Tabs Events
 

src/uni_modules/wot-design-uni/components/wd-tab/types.ts

@@ -14,7 +14,12 @@ export const tabProps = {
   /**
    *  是否禁用，无法点击
    */
-  disabled: makeBooleanProp(false)
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否懒加载，切换到该tab时才加载内容
+   * @default true
+   */
+  lazy: makeBooleanProp(true)
 }
 
 export type TabProps = ExtractPropTypes<typeof tabProps>

src/uni_modules/wot-design-uni/components/wd-tab/wd-tab.vue

@@ -1,6 +1,6 @@
 <template>
   <view :class="`wd-tab ${customClass}`" :style="customStyle">
-    <view v-if="painted" class="wd-tab__body" :style="tabBodyStyle">
+    <view class="wd-tab__body" v-if="shouldBeRender" :style="tabBodyStyle">
       <slot />
     </view>
   </view>
@@ -25,24 +25,30 @@ import { tabProps } from './types'
 
 const props = defineProps(tabProps)
 
-const painted = ref<boolean>(false) // 初始状态tab不会渲染，必须通过tabs来设置painted使tab渲染
-const isShow = ref<boolean>(false)
 const { proxy } = getCurrentInstance() as any
 const { parent: tabs, index } = useParent(TABS_KEY)
 
 // 激活项下标
-const activeIndex = computed(() => {
-  return isDef(tabs) ? tabs.state.activeIndex : 0
+const active = computed(() => {
+  return isDef(tabs) ? tabs.state.activeIndex === index.value : false
 })
 
+const painted = ref<boolean>(active.value) // 初始状态tab不会渲染，必须通过tabs来设置painted使tab渲染
+
 const tabBodyStyle = computed(() => {
   const style: CSSProperties = {}
-  if (!isShow.value && (!isDef(tabs) || !tabs.props.animated)) {
+  if (!active.value && (!isDef(tabs) || !tabs.props.animated)) {
     style.display = 'none'
   }
   return objToStyle(style)
 })
 
+const shouldBeRender = computed(() => !props.lazy || painted.value || active.value)
+
+watch(active, (val) => {
+  if (val) painted.value = true
+})
+
 watch(
   () => props.name,
   (newValue) => {
@@ -60,18 +66,6 @@ watch(
   }
 )
 
-watch(
-  () => activeIndex.value,
-  (newValue) => {
-    if (newValue === index.value) {
-      setShow(true, true)
-    } else {
-      setShow(painted.value, false)
-    }
-  },
-  { deep: true, immediate: true }
-)
-
 /**
  * @description 检测tab绑定的name是否和其它tab的name冲突
  * @param {Object} self 自身
@@ -88,21 +82,6 @@ function checkName(self: any) {
       }
     })
 }
-
-/**
- * 设置子组件展示
- * @param setPainted
- * @param setIsShow
- */
-function setShow(setPainted: boolean, setIsShow: boolean) {
-  painted.value = setPainted
-  isShow.value = setIsShow
-}
-
-defineExpose({
-  setShow,
-  painted
-})
 </script>
 <style lang="scss" scoped>
 @import './index.scss';