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

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

import { Namespace } from '../../utils/namespace';
import Icon from '../icon/icon.jsx';

const namespace = Namespace.Create('notice-bar')
export default {
    name: namespace.name,
    components: {
        Icon
    },
    props: {
        text: {
            type: String,
            default: ''
        },
        type: {
            type: String,
            default: 'normal'
        },
        theme: {
            type: String,
            default: 'yellow'
        },
        buttonText: {
            type: String,
            default: ''
        },
        show: {
            type: Boolean,
            default: true
        },
        icon: {
            type: String,
            default: 'info'
        },
        scrollable: {
            type: Boolean,
            default: false
        },
        delay: {
            type: Number,
            default: 1
        },
        speed: {
            type: Number,
            default: 60
        }
    },
    model: {
        prop: 'show',
        event: 'close'
    },
    computed: {
        cls() {
            return namespace.derive([
                this.theme
            ])
        },
        leftCls() {
            return namespace.derive('left')
        },
        middleCls() {
            return namespace.derive('middle')
        },
        rightCls() {
            return namespace.derive('right')
        },
        textCls() {
            return namespace.derive('text')
        },
        btnCls() {
            return namespace.derive('btn')
        },
        isButton() {
            return this.type === 'button';
        },
        isClose() {
            return this.type === 'close';
        }
    },
    methods: {
        onClose() {
            this.$emit('close', false);
        },
        onButtonClick(e) {
            this.$emit('button-click', e);
        }
    },
    render() {
        const renderLeft = ()=>(
            <div class={this.leftCls}>
                {this.$slots.left || <Icon name={this.icon} theme={this.theme} size="16"/>}
            </div>
        )

        const renderMiddle = ()=>(
            <div class={this.middleCls}>
                {this.$slots.middle ||  <div class={this.textCls}>{ this.text }</div>}
            </div>
        )

        const renderRight = ()=>(
            <div class={this.rightCls}>
                {
                    this. $slots.right 
                    || (this.isButton && <div class={this.btnCls} vOn:click_stop={this.onButtonClick}>{this.buttonText}</div>)
                    || this.isClose && <Icon name="close-fill" size="12" theme={this.theme} onClick={this.onClose} />
                }
            </div>
        )

        if(this.show){
            return (
                <div class={this.cls}>
                    {renderLeft()}
                    {renderMiddle()}
                    {renderRight()}
                </div>
            )
        }
    }
};