Quick 文档 0.2.3

Tabs 标签页

选项卡切换组件，常用于平级区域大块内容的的收纳和展现。

Tabs 选项卡

>{}
<!-- 帮助 -->
<template>
  <div>
    <Tabs
      :list="the.tabs.list"
      :active="the.tabs.active"
      closable
      scrolled
      @onEvent="onTabsEvent"
    >
      <template #qv-tabs-2> 插槽内容 2 </template>
      <template #qv-tabs-3> 插槽内容 3 </template>
      <template #qv-tabs-4> 插槽内容 4 </template>
    </Tabs>
  </div>
</template>

<script>
// 引用方式
//import { reactive, h } from '../../components/vue.api';

export default {
  setup() {
    // 外挂vue
    const { reactive, h } = window.$plus.vue;

    const the = reactive({
      tabs: {
        active: 0,
        list: [
          {
            title: '架构关系',
            dot: true,
            body: '<b>html 内容，不是用插槽</b>'
          },
          {
            title: '架构分组',
            // dot: true,
            // tip: "item.tip",
            model: {
              props: {
                title: ' 函数组件 传入的参数'
              },
              // 进行组件标记
              //  component: Help,
              // 函数组件
              component: (props, { emit }) => {
                //let _text = props.text || ''

                const btnEvent = () => {
                  console.log('btnEvent');
                  emit('onEvent', { cmd: 'init', data: props.title });
                };

                //  return h('div', `${props.title}`)
                return h('div', [
                  h(
                    'Button',
                    {
                      class: ['foo', 'bar'],
                      style: { margin: '10px' },
                      // attrs: attrs,
                      onClick: btnEvent
                    },
                    `${props.title}`
                  )
                ]);

                // return () => (
                //   <div>{props.text}</div>
                // )
              }
            },
            /** 监听组件回调 */
            onEvent: (resp) => {
              the.tabs.list[1].tip = '99';
              console.log('onEvent', resp);
            }
          },
          {
            title: '应用授权'
          },
          {
            title: '服务器'
          },
          {
            title: '组织列表'
          }
        ]
      }
    });

    // 本地组件引入
    // const EditPage = () => import('../views/EditPage.vue');
    // the.tabs.list.push({
    //   title: '外挂组件',
    //   dot: true,
    //   // 添加组件
    //   model: {
    //     props: {
    //       title: '组件传入的参数'
    //     },
    //     component: markRaw(EditPage)
    //   }
    // });

    const onTabsEvent = (resp) => {
      console.log('onTabsEvent', resp);
      switch (resp.cmd) {
        case 'click':
          // 标签点击切换触发
          break;
        case 'close':
          // 标签点击关闭触发
          the.tabs.list.splice(resp.index, 1);
          break;
      }
    };

    return { the, onTabsEvent };
  }
};
</script>
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

Tabs props

属性说明类型默认值
named 0.4.2组件触发事件名称Stringtabs
css 0.4.2样式皮肤，默认带框线Stringqv-tabs-border
active选中页的序号Number-
closable默认是否有关闭按钮Booleanfalse
scrolled默认是否有滑动按钮Booleanfalse
list标签页的数据Array[]

Tabs.list props

参数名说明类型
title菜单名称String
bodyhtml 内容String
model绑定组件{props,component}josn
onEvent监听子项组件回调function

Tabs slot

名称说明
bar 0.4.2插入头部标签条
extra头部标签条右边扩展
qv-tabs-'当前项的索引'标签序号内容插槽
无标签内容插槽

Tabs events

事件名说明值
onEvent点击触发回调事件json
cmd指令 click ,closestring
named组件命名string
index当前标签页的索引Number
item当前点击对象Object

Last Updated: