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

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

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

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

export default {
    name: namespace.name,
    components: {
        Popup,
        Icon
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        overlay: {
            type: Boolean,
            default: true
        },
        zIndex: {
            type: Number,
            default: 1030
        },
        lockScroll: {
            type: Boolean,
            default: false
        },
        duration: {
            type: Number,
            default: 0.36
        },
        overlayStyle: {
            type: Object,
            default: () => { }
        },
        closeOnClickOveraly: {
            type: Boolean,
            default: true
        },
        img: {
            type: String,
            required: true
        }
    },
    computed: {
        cls() {
            return namespace.derive();
        },
        imgCls() {
            return namespace.derive('img');
        },
        closeCls() {
            return namespace.derive('close');
        }
    },
    methods: {
        onClose() {
            this.$emit('close');
        },
        onImgClick(e) {
            this.$emit('img-click', e);
        }
    },
    render(){
        return (
            <Popup
                show={this.show}
                overlay={this.overlay}
                z-index={this.zIndex}
                lock-scroll={this.lockScroll}
                duration={this.duration}
                overlay-style={this.overlayStyle}
                vOn:close-on-click-overlay={this.closeOnClickOveraly}
                position="center"
                onClose={this.onClose}
            >
                <div class={this.cls}>
                    {this.img && <img class={this.imgCls}src={this.img} onClick={this.onImgClick} />}
                    <div class={this.closeCls}>
                        {this.$slots.close || <Icon size="35" name="close" color="#fff" onClick={this.onClose} />}
                    </div>
                </div>
            </Popup>
        )
    }
}