IkPageTabs

Tab 页

含 Tab 页时，可以借助 IkPageTabs 实现

props

props	类型	说明	默认值
tabs	Array as PropType<Array<{ label: string \| number; id: string\| number; }>>	tab 数据,数据中每个 id 都会被注册为一个 name 为 id 值的 slot 插槽	[]
lazyTab	Boolean	是否懒加载(为 true 时只渲染 v-model 绑定的默认 tab，其它 tab 在点击 tab 切换时才会渲染)	false
defaultSlot	Boolean	当存在默认 slot 且需要展示默认 slot 时	true

注意

在IkPageTabs中使用IkPageFull组件时，注意IkPageFull需传入tabId属性(自己定义，同一页面唯一即可)

使用方式配合IkPageFull使用方式

vue

<script lang="ts" setup name="ManageLog">
const countTotal = ref(0);
const loading = ref(false);

const activeName = ref("login");
// 查询方法
const query = async () => {
  await nextTick();
  // 查询方法
};

const tabs = [
  { id: "login", label: "登录日志" },
  { id: "operate", label: "操作日志" },
  { id: "system", label: "系统日志" },
];
</script>

<template>
  <IkPageMain fixed>
    <IkPageTabs v-model="activeName" lazy-tab :tabs="tabs" @tab-click="query">
      <!-- id值即为插槽名 -->
      <template #login> login </template>
      <!-- id值即为插槽名 -->
      <template #operate> operate </template>
      <!-- id值即为插槽名 -->
      <template #system> system </template>
      
      <!-- 默认插槽  defaultSlot 为true是显示-->
      <!-- tab页之间具有相同的内容可以放在这里 -->
      <template>
        默认插槽
      </template>
    </IkPageTabs>
  </IkPageMain>
</template>

vue

<script lang="ts" setup name="ManageLog">
const countTotal = ref(0);
const loading = ref(false);

const activeName = ref("login");
// 查询方法
const query = async () => {
  await nextTick();
  // 查询方法
};

const tabs = [
  { id: "login", label: "登录日志" },
  { id: "operate", label: "操作日志" },
  { id: "system", label: "系统日志" },
];
</script>

<template>
  <IkPageMain fixed>
    <IkPageTabs v-model="activeName" lazy-tab :tabs="tabs" @tab-click="query">
      <!-- id值即为插槽名 -->
      <template #login> 
        <!-- 需要传递tab-id -->
        <IkPageFull tab-id="1">
          ...
        </IkPageFull>
       </template>
      <template #operate> 
        <!-- 需要传递tab-id -->
       <IkPageFull tab-id="2">
          ...
        </IkPageFull>
       </template>
      <template #system> 
        <!-- 需要传递tab-id -->
        <IkPageFull tab-id="3">
          ...
        </IkPageFull>
       </template>
      
      <!-- 默认插槽  defaultSlot 为true是显示-->
      <!-- tab页之间具有相同的内容可以放在这里 -->
      <template>
        默认插槽
      </template>
    </IkPageTabs>
  </IkPageMain>
</template>

IkPageTabs ​

props ​

IkPageTabs

props