适用于Vue/React/原生JS的Modal组件

install

确保自己在qiyi的源下,如果不是,参考WIKI

$ npm i -S qy-modal

use

通常用的开发方式

import Modal from 'qy-modal';

如果是用script标签引入的话:

new window.Modal(dom, config);

API

const div1 = document.querySelector('.div1');
const config = {
    bgColor: 'rgba(0, 0, 0, .75)', // mask层背景色: 默认为rgba(0, 0, 0, .75),
    parent: document.querySelector('body'), // mask层挂载的父元素,默认为document.querySelector('body'),
    clickMaskOff: true, // 点击mask是否关闭模态框,默认为true,
    pointerEvents: true, // 如果设为false，则事件可以被穿透到下一层。
    style：{
        // 自定义内部样式
        position: 'absolute',
        top: '0',
        right: '0',
        left: 'unset',
        transform: 'translate(-5vw, 4vh)',
    }
};
const modal1 = new Modal(div1, config);

modal1.show(); // 显示模态框

modal1.hide(); // 隐藏模态框

modal1.show(callback, hideCallback); // 显示模态框并调用回调, （展示时回调，隐藏时回调。）

modal1.hide(); // 隐藏模态框并调用回调