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

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

import Overlay from '../overlay/overlay.jsx';
import { Namespace } from '../../utils/namespace';

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

export default {
    name: namespace.name,
    components: {
        Overlay
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        overlay: {
            type: Boolean,
            default: true
        },
        zIndex: {
            type: Number,
            default: 1030
        },
        lockScroll: {
            type: Boolean,
            default: true
        },
        duration: {
            type: Number,
            default: 0.36
        },
        overlayStyle: {
            type: Object,
            default: () => { }
        },
        background:{
            type: String
        },
        round: {
            type: Boolean,
            default: false
        },
        position: {
            type: String,
            default: 'bottom'
        },
        closeOnClickOveraly: {
            type: Boolean,
            default: true
        },
        safeAreaInsetBottom: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        cls() {
            return namespace.derive({
                round: this.round,
                [this.position]: this.position,
                'safe-area-inset-bottom': this.safeAreaInsetBottom
            });
        },
        style() {
            const res = {
                zIndex: this.zIndex
            };
            if(this.background){
                res.background = this.background
            }
            if (this.duration) {
                const key = this.position === 'center' ? 'animationDuration' : 'transitionDuration';
                res[key] = `${this.duration}s`;
            }
            return res;
        },
        transitionName() {
            return namespace.derive(`slide-${this.position}`);
        }
    },
    methods: {
        onClickOverlay(e) {
            if (this.closeOnClickOveraly) {
                this.close(e);
            }
        },
        close(e) {
            this.$emit('close', e);
        }
    },
    render() {
        const renderOverlay = () => {
            if (this.overlay) {
                return <Overlay
                    show={this.show}
                    z-index={this.zIndex}
                    lock-scroll={this.lockScroll}
                    duration={this.duration}
                    overlay-style={this.overlayStyle}
                    onClick={this.onClickOverlay}
                />
            }
        }
        const renderPopup = () => (
            <transition name={this.transitionName}>
                { 
                    this.show && (
                        <div class={this.cls} style={this.style}>
                            {this.$slots.default}
                        </div>
                    )
                }
            </transition>
        )
        return (
            <div>
                {renderOverlay()}
                {renderPopup()}
            </div>
        )
    }
};