scoutyin / ly-tab Goto Github PK

View Code? Open in Web Editor NEW

325.0 5.0 67.0 578 KB

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

License: MIT License

JavaScript 75.28% HTML 0.63% Vue 24.09%

vue vue-components ui-components tab scrollable navbar tabbar tabs mobile

ly-tab's Introduction

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

ly-tab's People

Contributors

Stargazers

Watchers

ly-tab's Issues

v-model="selectedId" 在页面刚刚执行的时候，动态给赋值没有效果。

在页面刚刚执行的时候，动态给赋值没有效果
mounted: function () {
this.selectedId = 2;
}

选中项的下划线宽度固定可以吗？

选中项的下划线宽度固定可以吗？当想项的线条现在可以变颜色，然后可以改变宽度吗？求改可配置

请问是否支持异步加载数据，若支持，异步加载数据时，ly-tab-active-bar 的宽度为 0

利用ajax 异步加载数据，selectedId 默认为零，文字下面ly-tab-active-bar宽度为0
如图：

初始化的时候

当数据为动态可变时，宽度未变，左右拉动出现问题，应该重新计算listWidth的宽度才对

当数据是动态的，比如我点击某个按钮，数据增加，问题是数据确实加入进去了，但没有重新计算listWidth的宽度，导致最后拉不到底，比如之前10个数据，宽度是1000，可以拉到最右侧，变成15条数据后，宽度应该是1500才能拉到最右侧，但宽度没有重新计算还是1000没变，所以最后的几条拉不出来看不到了，不知道我描述明白没，有点啰嗦，呵呵，我现在是加了个v-if后， watch监听数据变化后，改变v-if的值，销毁再创建，这样是可以解决问题，但挺麻烦的

当外部div设置为fixed的时候，概率性左右滑不动

tab过少时，tab里的动画条不能根据tab宽度变化

touchEnd事件中未对timeStamp做判空处理

移动端使用时，在特定的情形中，click会触发touch,touchEnd事件，此时timeStamp = this.endMoveTime - this.startMoveTime的值为0，在this.speed = (this.lastX - this.startX) / timeStamp会生成NAN,最后影响到translateX为NAN，导致页面无法滑动