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

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

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

const namespace = Namespace.Create('loading');

export default {
    name: namespace.name,
    props:{
        type:{
            type: String,
            default: 'circular'
        },
        size:{
            type: Number | String
        },
        theme:{
            type: String,
            default: 'loading-gray'
        },
        color:{
            type: String
        },
        textColor:{
            type: String
        },
        textSize:{
            type: Number | String
        },
        vertical:{
            type: Boolean,
            default: false
        }
    },
    computed:{
        cls(){
            return namespace.derive([
                this.theme,
                {
                    vertical:this.vertical
                }
            ])
        },
        spinnerCls(){
            return namespace.derive('spinner',[this.type])
        },
        spinnerStyle(){
            const style = {}
            if(this.color){
                style.color = this.color
            }
            if(this.size){
                style.width = `${this.size}px`
                style.height = `${this.size}px`
            }
            return style
        },
        textCls(){
            return namespace.derive('text',{
                vertical:this.vertical
            })
        },
        textStyle(){
            const style = {}
            style.color = this.textColor ?? this.color
            if(this.textSize){
                style.fontSize=`${this.textSize}px`
            }
            return style
        }
    },
    render(){
        const Circular = (
            <svg class={namespace.derive('circular')} viewBox="25 25 50 50">
                <circle cx="50" cy="50" r="20" fill="none" />
            </svg>
        )
        const Spinner =  Array(8).fill(null).map((_,index)=><i class={namespace.derive('line',[String(index +1)])} />)

        const renderText = ()=>{
            if(this.$slots.default){
                return (
                    <span class={this.textCls} style={this.textStyle}>
                        {this.$slots.default}
                    </span>
                )
            }
        }

        return (
            <div class={this.cls}>
                <span class= {this.spinnerCls} style={this.spinnerStyle}>
                    {(this.type === 'circular') && Circular}
                    {(this.type === 'spinner') && Spinner}
                </span>
                {renderText()}
            </div>
        )
    }
}