Vue Tabbar插件的设计思考

如今的移动端项目开发中，常常需要用到Tabbar组件，而Mint-ui或者Vux都是两款非常好用的UI框架，能够节省开发工作的时间。在使用过程中，经常会疑惑，为什么一定要对每个mt-tab-item指定一个id呢？

而tabbar来说，开发工作并不关心按下对象id是多少，而是更关注的是点击对象的顺序以及所对应的索引。

若是直接通过vue路由实现tabbar效果的话，还需要自己处理路由和样式相关代码。

因此，我就开始思考能不能直接通过Vue创建一个Tabbar插件，不仅能够兼顾功能需求，还要比现有的方案更加灵活。

经过对Tabbar的深入理解后，设计出如下效果：

• 使用配置来构造Tabbar，不需要编写任何的代码
• 使用可复用的方式来构建Tabbar Item组件
• 支持路由功能
• 可以自由控制Tabbar Item的显示顺序

代码如下：

import { Component, Vue } from 'vue';
import { createNamespace } from 'sn-vue-next';

const namespace = createNamespace('sn-tabbar');

export default {
  name: namespace.name,
  render() {
    return <ul class={namespace.b()}>
      {this.$slots.default}
    </ul>;
  }
};

export const TabbarItem = defineComponent({
  name: `${namespace.name}-item`,
  props: ['href', 'active', 'badge', 'title'],
  render() {
    return <li class={namespace.b('item') + (this.active ? ` ${namespace.b('item-active')}` : '')}>
      <a class={namespace.b('link')} href={this.href}>
        <i class={namespace.b('icon')}></i>
        <span class={namespace.b('title')}>{this.title}</span>
        <span class={namespace.b('badge')}>{this.badge}</span>
      </a>
    </li>;
  }
});

实际使用过程：

<sn-tabbar>
  <sn-tabbar-item href="#demo1" active>首页</sn-tabbar-item>
  <sn-tabbar-item href="#demo2">列表页</sn-tabbar-item>
  <sn-tabbar-item href="#demo3">详情页</sn-tabbar-item>
</sn-tabbar>

这样就能快速实现Tabbar的功能。