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

vue3-js版组件库

const Progress = {
    name: 'McProgress',
    props: {
        backgroundColor: {
            type: String,
            default: '#F5F8FC'
        },
        barColor: String,
        height: {
            type: [Number, String],
            default: 8
        },
        showText: Boolean,
        percentage: {
            type: [Number, String],
            default: 0
        },
        tip: String
    },
    setup(props) {
        return () => (
            <div class="mc-progress">
                <div class="mc-progress__text">
                    <span class="mc-progress__text--left">{props.tip}</span>
                    <span class="mc-progress__text--right">{props.percentage}%</span>
                </div>
                <div class="mc-progress__bar" style={{
                    'background-color': props.backgroundColor,
                    'height': props.height + 'px',
                }}>
                    <div class="mc-progress__inner" style={{
                        'background': props.barColor,
                        width: props.percentage + '%',
                    }}></div>
                </div>
            </div>
        )
    }
}

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

const McProgress = Progress

export { McProgress, McProgress as default }