npm 包 vue-tabbar 使用教程

阅读时长 4 分钟读完

简介

vue-tabbar 是一个用于构建底部 TabBar 的 Vue 组件库。该库简洁、易用,同时也支持一些自定义配置。

安装

使用 npm 进行安装:

使用方法

引入组件

使用组件

-- -------------------- ---- -------
------ ------- -
  ------ -
    ------ -
      ------- --
      ------ -
        - ------ ----- ----- ------ --
        - ------ ----- ----- -------- --
        - ------ ----- ----- ------ -
      -
    -
  --
  -------- -
    ------------------- -
      ----------- - -----
    -
  -
-

参数说明

items

  • 类型:Array
  • 必需:是
  • 默认值:[]

TabBar 的配置项列表。

每个配置项包含以下属性:

  • title(必需):按钮标题
  • icon(必需):按钮图标,须遵循 Font Awesome 图标命名规范

active

  • 类型:Number
  • 必需:是
  • 默认值:0

当前选中的 Tab 按钮下标。

change

  • 类型:Function
  • 必需:是

Tab 按钮切换时触发的回调函数,参数为切换后的 Tab 按钮下标。

box-cls

  • 类型:String
  • 必需:否
  • 默认值:''

TabBar 容器的类名。

item-cls

  • 类型:String
  • 必需:否
  • 默认值:''

TabBar 每个按钮的类名。

active-cls

  • 类型:String
  • 必需:否
  • 默认值:'active'

选中的 Tab 按钮的类名。

icon-cls

  • 类型:String
  • 必需:否
  • 默认值:'fas'

按钮图标的类名,须遵循 Font Awesome 图标命名规范。

示例

以下是一个示例代码。可以尝试修改 app.vue 中的 items 属性,观察效果变化。

-- -------------------- ---- -------
----------
  ---- ---------
    -------- -------------- ---------------- ---------------------- --
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      ------- --
      ------ -
        - ------ ----- ----- ------ --
        - ------ ----- ----- -------- --
        - ------ ----- ----- ------ -
      -
    -
  --
  -------- -
    ------------------- -
      ----------- - -----
    -
  -
-
---------

结语

vue-tabbar 是一个方便易用的 Vue 底部 TabBar 组件库,可以帮助开发者快速构建底部导航栏。在使用过程中,如果遇到任何问题,欢迎提交 issue

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60058ac481e8991b448ed3a8

纠错
反馈