cv-tabs-jump tab栏切换 ¶

简要 ¶

tab栏切换

示例 ¶

::: demo

vue

<template>
  <div>
    <cvTabsJump tab-position="top">
      <cvTabPane label="用户管理" @click="jumpAuth('/reserve/add')"></cvTabPane>
      <cvTabPane label="配置管理" @click="jumpAuth('/reserve/add')"></cvTabPane>
      <cvTabPane label="角色管理" current @click="jumpAuth('/reserve/add')">
        <template #label>
          <cv-icons type="ElIconCalendar" />
          角色管理
        </template>
      </cvTabPane>
      <cvTabPane label="定时任务补偿" @click="jumpAuth('/reserve/add')"></cvTabPane>
    </cvTabsJump>
    <cvTabsJump tab-position="left">
      <cvTabPane label="用户管理" @click="jumpAuth('/reserve/add')"></cvTabPane>
      <cvTabPane label="配置管理" @click="jumpAuth('/reserve/add')"></cvTabPane>
      <cvTabPane label="角色管理" current @click="jumpAuth('/reserve/add')">
        <template #label>
          <cv-icons type="ElIconCalendar" />
          角色管理
        </template>
      </cvTabPane>
      <cvTabPane label="定时任务补偿" @click="jumpAuth('/reserve/add')"></cvTabPane>
    </cvTabsJump>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    jumpAuth() {
      console.log('jumpAuth');
    }
  }
};
</script>

:::

属性 ¶

属性名	类型	默认值	说明	可选值
label	String	-	字段名	--
tab-position	String	top	标签的位置	top/right/bottom/left
current	boolean	false	默认选中该项	--

插槽 ¶

name	说明
-	预留了匿名插槽可以自定义标签内容