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

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

import { Namespace } from "../../utils/namespace";
import Badge from "../badge/badge.jsx";

const namespace = Namespace.Create('icon')

export default {
    name:namespace.name,
    components:{
        Badge
    },
    props:{
        tag:{
            type: String,
            default: 'i'
        },
        dot:{
            type: Boolean,
            default: false
        },
        badge:{
            type: String | Number
        },
        name:{
            type: String,
            required: true
        },
        size:{
            type: Number | String
        },
        color:{
            type: String
        },
        round:{
            type: Boolean,
            default: false
        },
        classPrefix:{
            type: String,
            default:'mx-icon'
        },
        theme:{
            type:String
        },
        offset:{
            type: Array
        }  
    },
    computed:{
        imgCls(){
            return namespace.derive('img')
        },
        isImgIcon(){
            return this.name.includes('/')
        },
        style(){
            const style = {}
            if(this.color){
                style[this.isImgIcon ? 'backgroundColor' : 'color'] = this.color
            }
            if(this.size){
                style.fontSize = `${this.size}px`
            }
            if(this.round){
                style.borderRadius = '50%'
            }
            return style
        }
    },
    methods:{
        onClick(e){
            this.$emit('click',e)
        }
    },
    render(){
        const {tag, dot, badge, name, classPrefix } = this.$props

        const renderIcon = ()=>(
            <tag 
                class = {[
                    classPrefix,
                    this.isImgIcon ? '' : `${classPrefix}-${name}`,
                    this.isImgIcon && 'mx-icon--img',
                    this.theme && `mx-icon--${this.theme}`
                ]}
                style={this.style}
                onClick={this.onClick}
            >
                {this.isImgIcon && <img class={this.imgCls}  src={name}/>}
            </tag>
        )

        if(dot || badge){
            return (
                <Badge
                    dot = {dot}
                    content = {badge}
                    offset = {this.offset}
                    small
                >
                    {renderIcon()}
                </Badge>
            )
        }

        return renderIcon()
    }
}