ScoutYin / ly-tab

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

Ly-Tab 3.x版本（非Vue3）

请注意，这个版本依然是 Vue2 版本。如果你想使用 Vue3 版本，请点击这里。

当前的3.x版本和之前2.x版本存在使用方法及API上的不兼容，使用者如需升级，请参照3.x版本。强烈建议使用3.x版本，2.x版本将不再进行更新维护。

基本效果展示

安装

yarn add ly-tab
# or
npm i ly-tab

使用

全局注册

import LyTab from 'ly-tab';

Vue.use(LyTab);

局部注册

import { LyTabs, LyTabBar, LyTabItem } from 'ly-tab';

export default {
  components: {
    LyTabs,
    LyTabBar,
    LyTabItem
  }
  // ...
}

LyTabs

简单示例

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

export default {
  data() {
    return  {
      value: '1'
    }
  }
}

属性

属性	说明	类型	默认值
value	当前激活的 tab 的 name 属性值	string | number	''
lineWidth	当前激活 tab 下划线的宽度，单位 px	number	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

事件

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

方法

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

插槽

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

LyTabItem

属性

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

插槽

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

LyTabBar

简单示例

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

export default {
  data() {
    return  {
      value: '1'
    }
  }
}

属性

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

事件

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

插槽

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