javaScript之原生js封装组件（弹窗为例）组件封装

83 阅读 0 评论 55 点赞

我是靠谱客的博主玩命花卷，最近开发中收集的这篇文章主要介绍javaScript之原生js封装组件（弹窗为例）组件封装，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

组件封装

html调用组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .k-dialog {
            width: 30%;
            z-index: 2001;
            display: block;
            position: absolute;
            background: #fff;
            border-radius: 2px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
            margin: 0 auto;
            top: 15vh;
            left:30%;
        }

        .k-wrapper {
            position: fixed;
            left: 0px;
            top: 0px;
            bottom: 0px;
            right: 0px;
            background: black;
            opacity: 0.4;
            z-index: 2000;
        }

        .k-header {
            padding: 20px 20px 10px;
        }

        .k-header .k-title {
            line-height: 24px;
            font-size: 18px;
            color: #303133;
            float: left;
        }

        .k-body {
            padding: 30px 20px;
            color: #606266;
            font-size: 14px;
        }

        .k-footer {
            padding: 10px 20px 30px;
            text-align: right;
        }

        .k-close {
            color: #909399;
            font-weight: 400;
            float: right;
            cursor: pointer;
        }

        .k-default {
            color: #606266;
            border: 1px solid #dcdfe6;
            text-align: center;
            cursor: pointer;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
            font-weight: 500;
            margin-right: 10px;
        }

        .k-default:hover {
            color: #409eff;
            background: #ecf5ff;
            border-color: #c6e2ff;
        }

        .k-primary {
            border: 1px solid #dcdfe6;
            text-align: center;
            cursor: pointer;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
            font-weight: 500;
            background: #409eff;
            color: #fff;
            margin-left: 10px;
        }

        .k-primary:hover {
            background: #66b1ff;
        }
        .k-input{
            width: 100%;
            margin-left: 20px;
            margin-bottom: 20px;
        }
        .input-inner {
            -webkit-appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: none;
            padding: 0 15px;
            transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
            width: 100%;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <button class="btn1">点击</button>
    <button class="btn2">点击</button>
    <!-- 通过标签调用组件，通过属性做配置 -->
    <show-dialog
        title="自定义组件标题"
    ></show-dialog>
<script type="module">
import Dialog,{InputDialog} from './dialog.js';
let dialog = new Dialog({
    title:"我的标题",
    content:"我的内容",
    isCancel:true ,
    dragable: true,
    success(){
        console.log("点击了确定");
    },
    cancel(){
        console.log("点击了取消");
    },
    maskable: true
})
document.querySelector(".btn1").onclick = function(){
    dialog.open();
}
let dialog2 = new InputDialog({
    title:"我的标题2",
    content:"我的内容2",
    isCancel:true ,
    dragable: true,
    success(e){
        console.log("点击了确定",e.detail);
    },
    cancel(){
        console.log("点击了取消");
    },
    maskable: true
})
document.querySelector(".btn2").onclick = function(){
    dialog2.open();
}

// axios({})  /axios.get()...post put delete head; 
// success: 点击确定之后触发自定义success 事件；
document.querySelector("show-dialog").addEventListener("success",function(){
    console.log("触发了组件的事件");
})
</script>
</body>
</html>

封装的弹窗

export default class Dialog extends EventTarget{
    constructor(options){
        super();


        // 默认配置
        let defalultOptions = {
            width: "30%",
            height: "250px",
            title: "测试标题",
            content: "测试内容",
            dragable: true, //是否可拖拽
            maskable: true, //是否有遮罩
            isCancel:false, //是否有取消
            success(){},
            cancel(){}
        }
         // 合并配置；
         //方法一：
        // this.opts = Object.assign(defalultOptions,options);
        //方法二:
        this.opts = {...defalultOptions,...options};
        //方法三：
        // this.opts = {
        //     width,
        //     height,
        //     title,
        //     content,
        //     dragable,
        //     maskable,
        //     isCancel,
        //     success,
        //     cancel
        // }
        // console.log(this.opts);
       this.init();
    }
    // 初始化组件方法
    init(){
        this.createElement();
        // this.addEvent("success",this.opts.success);
        this.addEventListener("success",this.opts.success)
        this.addEleEvent();
        if(!this.opts.maskable){
            this.divEles.querySelector(".k-wrapper").style.display = "none";
        }
        if(this.opts.dragable){
            this.drag();
        }
    }
    // 创建节点
    createElement(){
        // console.log(this.opts.width)
        let divEles = document.createElement("div"); 
        divEles.innerHTML = `<div class="k-wrapper"></div>
        <div class="k-dialog" style="width:${this.opts.width};height:${this.opts.height}">
            <div class="k-header">
                <span class="k-title">${this.opts.title}</span><span class="k-close">X</span>
            </div>
            <div class="k-body">
                <span>${this.opts.content}</span>
            </div>
            <div class="k-footer">
                ${this.opts.isCancel?'<span class="k-default">取消</span>':''}
                <span class="k-primary">确定</span>
            </div>
        </div>`;
        divEles.style.display = "none";
        document.body.appendChild(divEles);
        this.divEles = divEles;
    }
    // 添加事件
    addEleEvent(){
        // let closeEle = this.divEles.querySelector(".k-close");
        // closeEle.addEventListener("click",()=>{
        //     this.close();
        // })
        // let cancelEle = this.divEles.querySelector(".k-default") ;
        // console.log(cancelEle)
        // cancelEle &&  cancelEle.addEventListener("click",()=>{
        //     console.log("close")
        // })
        // 事件委托
        let kDialog = this.divEles.querySelector(".k-dialog");
        kDialog.addEventListener("click",e=>{
        //    console.log(e.target); 
         let className = e.target.className;
        //  console.log(className);
            switch(className){
                case 'k-close':
                    this.close();
                    break;
                case 'k-default':
                    this.opts.cancel();
                    this.close();
                    break;
                case 'k-primary':
                    // this.opts.success();
                    // this.trigger("success");
                    this.sure();
                    this.close();
                    break;
                default:
                    console.log("未点中");
                    break;
            }

        })
    }
    sure(value){
        let success = new CustomEvent("success",{
            detail:value
        });
        this.dispatchEvent(success);
    }
    // 关闭组件
    close(){
        this.divEles.style.display = "none";
    }
    // 打开组件
    open(){
        // console.log("open");
        this.divEles.style.display = "block";
    }
    drag(){
        let kDialog = this.divEles.querySelector(".k-dialog");
        kDialog.onmousedown = function (e) {
            let x = e.clientX  - this.offsetLeft;
            let y = e.clientY - this.offsetTop;
            this.onmousemove = function (e) {
                let xx = e.clientX;
                let yy = e.clientY;
                this.style.left = xx - x + "px";
                this.style.top = yy - y + "px";
            }
        }
        document.onmouseup = function () {
            kDialog.onmousemove = "";
        }
    }
}
// 通过继承扩展功能；
export class InputDialog extends Dialog{
    constructor(options){
        super(options);
        this.createInput();
    }
    createInput(){
        let myInput = document.createElement("input");
        myInput.classList.add("input-inner");
        this.divEles.querySelector(".k-body").appendChild(myInput);
        this.myInput = myInput;
    }
    sure(){
        let value = this.myInput.value;
        super.sure(value);
    }
}
class ShowDialog extends HTMLElement{
    constructor(){
        super();
        this.innerHTML = `<button>按钮</button>`;
        let dialog = new Dialog({
                title:this.title,
                success:(e)=>{
                    // console.log("点击了确定")
                    this.dispatchEvent(new CustomEvent("success"))
                }   
        })
        // this.title = this.getAttribute("title")
        this.onclick = function () {
            dialog.open();
        }
    }
    get title(){
        return this.getAttribute("title") ?? "默认标题"
    }

}
customElements.define("show-dialog",ShowDialog);