利用JS+JQuery写弹出层组件

利用JQuery写弹出层组件

对于很多初学者来说，组件可以大大节省代码量，但是又没有接触过Vue以及其他框架，可以用js+JQuery完成，当然还可以添加css样式文件，有很大的自定义性，对于菜鸡的我来说还是很香的。

组件大概分为两个文件：js和css

js

利用class模板化组件html代码以及open和close方法

class SettingBox {
	//构造器，接收传参以及初始化dialog
    constructor(options) {
        this.options = options;
        this.init();
    }
	
	//弹出层父级套件模板，加上class配合css使用，这里可以加很多属性，把它当作html写就好了
    get template() {
        return `
        <div class="settingBox_bg">
            <div class="settingBox">
            </div>
        </div>
      `;
    }
	
	//将我的传入的内容标签内容经过jq处理，然后返回
    get content() {
        let { content } = this.options;
        let $b = content;
        // 将hidden去掉
        $b.attr("hidden",false);
        return $b;
    }

    init() {
        // 使用this.template的时候会调用class中的get方法
        var $dialog = $(this.template);
        //将你的内容放入settingBox中
        $dialog.find('.settingBox').prepend(this.content);
        this.$dialog = $dialog;
    }

	//打开dialog，将dialog放入body中
    open() {
        this.$dialog.appendTo('body');
    }

	//关闭dialog，但是remove方法不能保留你的content，所以要先放到html中，以便于后续使用
    close() {
        this.$dialog.find('input').val("");
        this.$dialog.find('#dialog-main').attr('hidden',true);
        this.$dialog.find('#dialog-main').appendTo('body');
        this.$dialog.remove();
    }

}

css

主要是父级套件的样式设置

/* 以下是组件样式，一般不用修改 */
/* 遮罩层  */
.settingBox_bg {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
/* 容器层 */
.settingBox_bg .settingBox {
    background: white;
    padding: 20px;
    box-shadow: 0 0 8px #D2D2D250;
    z-index: 101;
}

运用 !important

运用的时候我们在html中先引入两个组件文件

<!-- 引入组件 -->
<script type="text/javascript" src="../../Components/SettingBox/settingBox.js"></script>
<link rel="stylesheet" href="../../Components/SettingBox/settingBox.css">

在js里创建类，可以将创建类过程绑定在某个事件上

//创建全局dialog对象
var dialog = null;
// 引入组件
// 组件内容id一定是dialog-main,并且要带hidden防止破环原来html结构
// button可以写在dialog-main中
function changeSettings(){
    dialog = new SettingBox({
        content : $("#dialog-main"),
    });
    dialog.open();
}
//这个函数是模板中关闭按钮绑定的函数
function exitSettingBox(){
    dialog.close();
}

当然，我们内容样式怎么传呢，可以看到我将id为’dialog-main’的标签整个传入content中，而我的组件js里会将这个content放入到我模板的settingBox中，很nice！（这个传入过程可以看作将整个标签及内容代码剪切到settingBox中）

// hidden是为了防止破坏页面样式
<div id="dialog-main" hidden>
	// 里面可以放任何你想放的，当然id不能和组件里两个父组件重名，以免覆盖样式
</div>

以上就是小菜鸡的整个构建流程~~

我作为参考的样例：https://gitee.com/niuniulz/wheel/tree/master/dialog👍👍👍