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

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

import Icon from '../icon/icon.jsx';
import { Namespace } from '../../utils/namespace';

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

export default {
    name: namespace.name,
    components: {
        Icon
    },
    props: {
        name: {
            type: String,
            default: ''
        },
        icon: {
            type: String,
            default: ''
        },
        iconPrefix: {
            type: String
        },
        dot: {
            type: Boolean,
            default: false
        },
        badge: {
            type: Number | String
        },
        size: {
            type: Number,
            default: 48
        }
    },
    computed: {
        cls () {
            return namespace.derive({
                active: this.active
            });
        },
        style () {
            return {
                color: this.active ? this.$parent.activeColor : this.$parent.inactiveColor
            }
        },
        textCls () {
            return namespace.derive('text')
        },
        index () {
            return this.$parent.$children.indexOf(this);
        },
        active () {
            return this.$parent.value === (this.name || this.index);
        }
    },
    methods: {
        onClick (e) {
            this.$parent.setActive(this.name || this.index);
            this.$emit('click', e);
        }
    },
    render () {
        const renderIcon = () => {
            if (this.$scopedSlots.icon) {
                return this.$scopedSlots.icon({ active: this.active })
            }
            if (this.icon) {
                return <Icon classPrefix={this.classPrefix} name={this.icon} size={this.size} badge={this.badge} dot={this.dot} offset={[0, 5]} />
            }
        }

        return (
            <div class={this.cls} style={this.style} onClick={this.onClick}>
                {renderIcon()}
                <div class={this.textCls}>
                    {this.$slots.default}
                </div>
            </div>
        )
    }
};