magiccube-vue3/package/components/breadcrumb/index.js

vue3-js版组件库

const Breadcrumb = {
    name: 'McBreadcrumb',
    props: {
        options: {
            type: Array,
            default: () => []
        },
        defaultColor: {
            type: String,
            default: '#999'
        },
        activeColor: {
            type: String,
            default: '#00beff'
        },
        separator: {
            type: String,
            default: '>'
        },
        disabled: Boolean
    },
    emits: ['click'],
    setup(props, { emit }) {

        const handleClick = item => {
            emit('click', item)
        }

        const _itemNode = (item, idx) => (
            <>
                <span class="mc-breadcrumb__item"
                    class={{
                        active: idx === props.options.length - 1
                    }}
                    style={{
                        color: idx === props.options.length - 1 ? props.activeColor : props.defaultColor
                    }}
                    onClick={() => handleClick(item)}>
                    {item.name}
                </span>
                {
                    idx !== props.options.length - 1 ? (
                        <span class="mc-breadcrumb__separator">{props.separator}</span>
                    ) : ''
                }
            </>
        )

        return () => (
            <div class="mc-breadcrumb">
                {
                    props.options.map(_itemNode)
                }
            </div>
        )
    }
}

Breadcrumb.install = (app) => {
    app.component(Breadcrumb.name, Breadcrumb)
}

const McBreadcrumb = Breadcrumb

export { McBreadcrumb, McBreadcrumb as default }