更新记录

1.0.0（2024-12-02） 下载此版本

• 首次发布
• 支持Vue2/Vue3
• 支持H5/APP/小程序
• 支持滑动切换
• 支持自定义样式
• 支持动态增减选项卡

平台兼容性

wht-tabs 标签页组件

介绍

一个简单易用的标签页组件，支持自定义样式、吸顶等功能。

平台支持

• Vue2/Vue3
• H5/APP/小程序

基础用法

<template>
  <wht-tabs 
    v-model="active" 
    :list="tabList"
    @change="onChange"
  />
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      tabList: [
        { title: '标签1' },
        { title: '标签2' },
        { title: '标签3' }
      ]
    }
  },
  methods: {
    onChange(index) {
      console.log('当前选中:', index)
    }
  }
}
</script>

吸顶用法

<template>
  <wht-tabs 
    v-model="active" 
    :list="tabList"
    :fixed="true"
    :top="0"
    @change="onChange"
  />
</template>

API

Props

Events

list 数据结构

list: [
  { 
    title: '标签标题'  // 标签文字
  }
]

示例

自定义样式

<template>
  <wht-tabs 
    v-model="active" 
    :list="tabList"
    activeColor="#ff4444"
    color="#999999"
    :fontSize="32"
    :height="100"
    :padding="40"
    :lineHeight="6"
    bgColor="#f8f8f8"
    :bold="true"
    :minWidth="160"
    @change="onChange"
  />
</template>

更新日志

1.0.0（2024-01-01）

• 首次发布
• 支持基础标签切换功能
• 支持吸顶功能
• 支持自定义样式
• 支持Vue2/Vue3
• 支持H5/APP/小程序