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

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

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

const namespace = Namespace.Create('steps')

export default {
    name: namespace.name,
    props:{
        theme:{
            type: String,
            default: 'brand'
        },
        active:{
            type:String | Number,
            default: 0
        },
        activeColor:{
            type:String
        },
        inactiveColor:{
            type:String
        },
        activeIcon:{
            type: String
        },
        inactiveIcon:{
            type: String
        },
        finishedIcon:{
            type:String
        },
        iconPrefix:{
            type:String,
            default:'mx-icon'
        },
        isHorizental:{
            type: Boolean,
            default:false
        },
        titleFontSize:{
            type: String | Number
        }
    },
    computed:{
        cls(){
            return namespace.derive({
                horizental: this.isHorizental
            })
        },
        containerCls(){
            return namespace.derive('container')
        }
    },
    methods:{
        onClickStep(index){
            this.$emit('click-step',index)
        }
    },
    render(){
        return (
            <div class={this.cls}>
                <div class={this.containerCls}>
                    {this.$slots.default}
                </div>
            </div>
        )
    }
}