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

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

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

const namespace = Namespace.Create('tag')

export default {
    name: namespace.name,
    props:{
        theme:{
            type:String,
            default: 'brand'
        },
        size:{
            type:String,
            default: 'middle'
        },
        round:{
            type: Boolean,
            default: true
        },
        plain:{
            type: Boolean,
            default: false
        },
        mark:{
            type: Boolean,
            default: false
        },
        color:{
            type: String
        },
        textColor:{
            type: String
        }
    },
    computed:{
        cls(){
            return namespace.derive([
                this.theme,
                this.size,
                {
                    round: this.round,
                    plain: this.plain,
                    mark: this.mark
                }
            ])
        },
        style(){
            const style = {}
            if(this.color){
                if(this.plain){
                    style.borderColor = this.color
                    style.color = this.color
                }else{
                    const clr = Color.FromHex(this.color)
                    style.backgroundColor = this.color
                    style.color = clr.isDark ? Color.WHITE : Color.BLACK
                }
            }
            if(this.textColor){
                style.color = this.textColor
            }
            return style
        }
    },
    render(){
        return (
            <span class={this.cls} style={this.style}>
                {this.$slots.default}
            </span>
        )
    }
}