@minix-iot/ui/dist/packages/tabbar/tabbar.jsx

基于Vue的移动端轻量级UI组件库

import { Namespace } from '../../utils/namespace';

const namespace = Namespace.Create('tab-bar');

export default {
  name: namespace.name,
  props: {
    value: {
      type: Number | String,
      default: 0
    },
    fixed: {
      type: Boolean,
      default: false
    },
    activeColor: {
      type: String,
      default: '#000000'
    },
    inactiveColor: {
      type: String,
      default: '#8a8a8f'
    },
    safeAreaInsetBottom: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  computed: {
    cls () {
      return namespace.derive([
        {
          fixed: this.fixed,
          'safe-area-inset-bottom': this.fixed && this.safeAreaInsetBottom
        }
      ]);
    }
  },
  methods: {
    setActive (active) {
      this.$emit('change', active);
    }
  },
  render () {
    return (
      <div class={this.cls}>
        {this.$slots.default}
      </div>
    )
  }
};