ScoutYin/fun-tab

🎉 A mobile touch-swappable tabs component for Vue.js 3.x

fun-tab

ly-tab的 Vue3 版本，更名为 fun-tab。

基本效果展示

安装

pnpm add fun-tab
# or
yarn add fun-tab
# or
npm i fun-tab

使用

全局注册

import { createApp } from 'vue'
import FunTab from 'fun-tab'
import 'fun-tab/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(FunTab)

app.mount('#app')

局部注册

<script setup>
import { FunTabs, FunTabBar, FunTabItem } from 'fun-tab';

// ...
</script>

FunTabs

简易示例

<fun-tabs v-model="value">
  <fun-tab-item name="1" title="选项卡1" />
  <fun-tab-item name="2" title="选项卡2" />
</fun-tabs>

<script setup>
import { ref } from 'vue'

const value = ref('1')
</script>

属性

属性	说明	类型	默认值
modelValue	当前激活的 tab 的 name 属性值	string | number	''
lineWidth	当前激活 tab 下划线的宽度，单位 px，为auto时表示当前激活 tab 项的宽度	number | string	30
lineHeight	当前激活 tab 下划线的高度，单位 px	number	3
activeColor	激活状态下 tab 文案及下划线的颜色	string	#1677ff
additionalX	近似等于超出边界时最大可拖动距离，单位 px	number	50
reBoundExponent	惯性回弹指数，值越大，惯性回弹距离越长	number	10
inertialDuration	惯性滑动过程的持续时间，值越小，感知上阻力越大，可近似认为惯性滑动过程速度减为零所需的时间(ms)	number	1000
reBoundingDuration	回弹过程动画duration，单位 ms	number	360

事件

事件名	说明	回调参数
update:modelValue	切换激活 tab 项的回调	name: string | number
change	切换激活 tab 项的回调	name: string | number

方法

方法名	说明	参数	返回值
resize	外层元素大小或组件布局、尺寸变化时，可以调用此方法来进行重绘	-	-

插槽

名称	说明
default	默认插槽，放置 FunTabItem 组件

FunTabItem

属性

属性	说明	类型	默认值
title	选项卡显示文字	string	-
name	选项卡标识符	string | number	选项卡索引
badge	右上角徽标内容	string | number	-

插槽

名称	说明
default	选项卡文字内容插槽，优先级高于传入的 title 属性
icon	选项卡图标

FunTabBar

简易示例

<fun-tab-bar v-model="value">
  <fun-tab-item name="1" title="选项卡1" />
  <fun-tab-item name="2" title="选项卡2" />
</fun-tab-bar>

<script setup>
import { ref } from 'vue'

const value = ref('1')
</script>

属性

属性	说明	类型	默认值
modelValue	当前激活的 tab 的 name 属性值	string | number	''
activeColor	激活状态下 tab 文案及icon的颜色	string	#1677ff

事件

事件名	说明	回调参数
update:modelValue	切换激活 tab 项的回调	name: string | number
change	切换激活 tab 项的回调	name: string | number

插槽

名称	说明
default	默认插槽，放置 FunTabItem 组件