更新记录

1.0.1（2024-05-08）

支持tabItem插槽自定义内容

1.0.0（2024-05-08）

初始发布

平台兼容性

HR Tabs 组件文档

hr-tabs是一个灵活的 Vue 组件，用于创建水平或垂直的标签页导航。该组件支持可滚动的标签列表和自定义标签宽度，允许开发者自定义样式和行为。

安装

点击这里下载安装

基本用法

<template>
  <view class="content">
    <view class="tab-wrap">
      <hr-tabs
        tabPosition="left"
        :line-width="60"
        :items="mainTabList"
        v-model="current"
        @change="handleMainTabsChange"
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      mainTabList: [
        {
          id: "base",
          label: "基本信息",
        },
        {
          id: "activity",
          label: "活动项目",
        },
        {
          id: "location",
          label: "位置信息",
        },
        {
          id: "base1",
          label: "禁用项",
          disabled: true,
        },
        {
          id: "activity1",
          label: "活动项目",
        },
        {
          id: "location1",
          label: "位置信息",
        },
        {
          id: "base2",
          label: "基本信息",
        },
        {
          id: "activity2",
          label: "活动项目",
        },
        {
          id: "location2",
          label: "位置信息",
        },
      ],
    };
  },
  methods: {
    handleMainTabsChange({ index }) {
      this.current = index;
    },
  },
};
</script>

<style>
.content {
  width: 100%;
  height: 100%;
}
.tab-wrap {
  width: 100%;
  height: 200px;
}
</style>

API

hr-tabs组件支持以下 props（属性）：

TabItemType 组件用于定义单个选项卡的属性。以下表格详细列出了其所有可用的属性。

属性

使用说明

每个 TabItemType 定义了一个选项卡的所有必要信息。通过设置这些属性，你可以控制选项卡的行为和外观，例如禁用选项卡，自定义关闭图标，以及控制选项卡内容的渲染与销毁。

事件

Slots

插槽使用示例【使用了 uni-icons，请检查是否安装】

<
<template>
  <view class="content">
    <view class="tab-wrap">
      <hr-tabs
        tabPosition="top"
        :line-width="60"
        :items="mainTabList"
        v-model="current"
        @change="handleMainTabsChange"
      >
        <template v-slot:tab-item="{ item }">
          <!-- 完全自定义的标签项 -->
          <view class="custom-tab-item">
            <uni-icons :type="item.icon" size="30"></uni-icons>
            <text>{{ item.label }}</text>
          </view>
        </template>
      </hr-tabs>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      mainTabList: [
        {
          id: "base",
          label: "基本信息",
          icon: "contact",
        },
        {
          id: "activity",
          label: "活动项目",
          icon: "contact",
        },
        {
          id: "location",
          label: "位置信息",
          icon: "contact",
        },
        {
          id: "base1",
          label: "禁用项",
          disabled: true,
          icon: "camera",
        },
        {
          id: "activity1",
          label: "活动项目",
          icon: "chatboxes",
        },
        {
          id: "location1",
          label: "位置信息",
          icon: "cloud-download",
        },
        {
          id: "base2",
          label: "基本信息",
          icon: "gift",
        },
        {
          id: "activity2",
          label: "活动项目",
          icon: "mic",
        },
        {
          id: "location2",
          label: "位置信息",
          icon: "phone",
        },
      ],
    };
  },
  methods: {
    handleMainTabsChange({ index }) {
      this.current = index;
    },
  },
};
</script>

<style>
.content {
  width: 100%;
  height: 100%;
}
.tab-wrap {
  width: 100%;
  height: 200px;
}
.custom-tab-item {
  width: 100px;
  height: 100px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
</style>

样式

使用hidden-scroll-style类来隐藏滚动条，保持滚动功能

。 若要自定义标签和其他元素的样式，请使用标准 CSS 或 SCSS。