Skip to content

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

License

Notifications You must be signed in to change notification settings

ScoutYin/fun-tab

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f14b45a · Oct 4, 2022

History

20 Commits
May 21, 2022
May 7, 2022
Oct 4, 2022
May 20, 2022
May 20, 2022
May 21, 2022
May 7, 2022
May 9, 2022
May 7, 2022
May 8, 2022
May 21, 2022
Apr 30, 2022
May 20, 2022
May 21, 2022
May 20, 2022
May 20, 2022
May 20, 2022
May 20, 2022
May 20, 2022

Repository files navigation

fun-tab

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

基本效果展示

v3 0 0

安装

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 组件