Helper Hooks(1.0.0)

说明

切换DOM元素或者组件时，对其进行延迟加载，并且只加载一次

示例


Pane1 Content


函数定义 

function(
  activeTab: Ref<unknown>, // 选中tab
  selfMark: unknown, // tab标识
  cb?: () => void // 选中回调
): {
  loaded: Ref<boolean> // 是否加载，配合v-if使用
  show: Ref<boolean> //是否显示，配合v-show使用
}
1
2
3
4
5
6
7
8

Demo代码 

<template>
  <div>
    <button @click="switchPane('1')">Pane1</button>
    <button @click="switchPane('2')">Pane2</button>
    <button @click="switchPane('3')">Pane3</button>
  </div>
  <br>
  <div v-if="Pane1Loaded" v-show="Pane1Show">
    Pane1 Content
  </div>
  <div v-if="Pane2Loaded" v-show="Pane2Show">
    Pane2 Content
  </div>
  <div v-if="Pane3Loaded" v-show="Pane3Show">
    Pane3 Content
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useLazyPane } from './'

export default defineComponent({
  setup() {
    const which = ref('1')

    const { loaded: Pane1Loaded, show: Pane1Show } = useLazyPane(which, '1')
    const { loaded: Pane2Loaded, show: Pane2Show } = useLazyPane(which, '2')
    const { loaded: Pane3Loaded, show: Pane3Show } = useLazyPane(which, '3')

    const switchPane = (idx: string) => {
      which.value = idx
    }

    return {
      which,
      switchPane,
      Pane1Loaded,
      Pane1Show,
      Pane2Loaded,
      Pane2Show,
      Pane3Loaded,
      Pane3Show,
    }
  },
})
</script>
<style lang="scss" scoped>
button {
  margin-right: 5px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53