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

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

import Overlay from '../overlay/overlay.jsx';
import Icon from '../icon/icon.jsx';
import Loading from '../loading/loading.jsx';

import { Namespace } from '../../utils/namespace';
const namespace = Namespace.Create('toast');

export default {
    name: namespace.name,
    components: {
        Overlay,
        Icon,
        Loading
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        overlay: {
            type: Boolean,
            default: false
        },
        zIndex: {
            type: Number,
            default: 1030
        },
        duration: {
            type: Number,
            default: 1600
        },
        overlayStyle: {
            type: Object,
            default: () => { }
        },
        closeOnClickOveraly: {
            type: Boolean,
            default: true
        },
        position: {
            type: String,
            default: 'center'
        },
        message: {
            type: String,
            default: ''
        },
        theme: {
            type: String,
            default: 'dark'
        },
        icon: {
            type: String,
            default: ''
        },
        loading: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            timer: 0
        };
    },
    computed: {
        cls() {
            return namespace.derive([
                this.theme,
                this.position,
                {
                    round: this.round,
                    icon: this.hasIcon && !this.message,
                    it: this.hasIcon && this.message
                }
            ]);
        },
        textCls() {
            return namespace.derive('text', [
                this.theme,
                {
                    icon: this.hasIcon
                }
            ]);
        },
        transitionName() {
            return namespace.derive('fade');
        },
        hasIcon(){
            return this.icon || this.loading
        }
    },
    watch: {
        show() {
            this.toast();
        }
    },
    methods: {
        onClickOverlay(e) {
            if (this.closeOnClickOveraly) {
                this.close(e);
            }
        },
        onClose(e) {
            this.close(e);
        },
        close(e) {
            this.$emit('close', e);
        },
        clearTimer() {
            window.clearTimeout(this.timer);
        },
        toast() {
            this.clearTimer();
            if (this.show && this.duration) {
                this.timer = window.setTimeout(() => {
                    this.close();
                }, this.duration);
            }
        }
    },
    render(){
        const renderIcon = ()=>{
            if(this.loading){
                return <Loading size="32" type="spinner"/>
            }
            if(this.icon){
                return <Icon name={this.icon} size="32" />
            }
        }
        const renderOverlay = ()=> {
            if(this.overlay){
                return <Overlay
                    show={this.show}
                    z-index = {this.zIndex}
                    lock-scroll={this.lockScroll}
                    overlay-style={this.overlayStyle}
                    onClick = {this.onClickOverlay}
                 />
            }
        }

        const renderToast = ()=> (
            <transition name={this.transitionName}>
                {
                    this.show && (
                        <div class={this.cls}>
                            {renderIcon()}
                            {this.message && <div class={this.textCls}>{this.message}</div>}
                        </div>
                    )
                }
            </transition>
        )
        return (
            <div>
                {renderOverlay()}
                {renderToast()}
            </div>
        )
    }
}