list-container

简单易用的形式实现 tab 点击切换效果，无论是配合动态组件渲染还是内容修改，都及其容易扩展!

基本使用

绑定的数据: /dashboard/edit/info

COPY

999

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

<template>
    <div>
    <ClientOnly>
      <list-container v-model="value" :tabs="routes" @change="handleChange"/>
    </ClientOnly>  
      <div>
        绑定的数据:
        {{value}}
      </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      value: "/dashboard/edit/info",
      routes: [
        {
          label: '基本信息',
          value: '/dashboard/edit/info',
        },
        {
          label: '数据配置',
          value: '/dashboard/edit/data',
        },
        {
          label: '权限管理',
          value: '/dashboard/edit/permission',
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
};
</script>

显示代码

slot header

绑定的数据: /dashboard/edit/info

COPY

999

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

<template>
    <div>
    <ClientOnly>
      <list-container v-model="value" :tabs="tabs" @change="handleChange">
        <div slot="header">
          this is header slot
        </div>
      </list-container>
    </ClientOnly>
      <div>
        绑定的数据:
        {{value}}
      </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      value: "/dashboard/edit/info",
      tabs: [
        {
          label: '基本信息',
          value: '/dashboard/edit/info',
        },
        {
          label: '数据配置',
          value: '/dashboard/edit/data',
        },
        {
          label: '权限管理',
          value: '/dashboard/edit/permission',
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
};
</script>

显示代码

props

Name	Description	Type	Required	Default
tabs	example [ { value: 0, label: '这是第一项'}, { value: 1, label: '这是第二项'} ]	Array	false	[]
animation	是否有动画效果	Boolean	false	true
value	-	Number / String	false	-

slots

Name	Description	Default Slot Content
header	头部插槽	-

events

Event Name	Description	Parameters
input	选中的 tab 的值	value
change	选中的 tab 对象	tab