master

分支 (1)

管理

管理

master

learning-es6
/
6.组件样式模板.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%;
            display: none;
        }

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

        .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-cancel {
            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-cancel: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>
    <!-- <div class="k-wrapper"></div>
    <div class="k-dialog">
        <div class="k-header">
            <span class="k-title">提示</span><span class="k-close">X</span>
        </div>
        <div class="k-body">
            <span>这是一段文本</span>
            <input class="input-inner" type="text" />
        </div>
        <div class="k-footer">
            <span class="k-cancel">取消</span>
            <span class="k-primary">确定</span>
        </div>
    </div> -->
    <button class="dailog1">点击</button>
    <button class="dailog2">点击2</button>
</body>
<script>
    // 对内：封闭；对外：开放（Api、配置）
    /*{
        width:'30%',
        height:'250px',
        title:'测试标题',
        content:'测试内容',
        dragable:true, //是否可拖拽
        maskable:true, //是否有遮罩
        isCancel:false //是否有取消
    }
    */
    class MyEvent {
        constructor() {
            this.handle = {
                // "myevent":[fn1,fn2],
                // "myevent2":[fn1,fn2...],
            }
        }
        addEvent(eventName, fn) {
            if (typeof this.handle[eventName] === 'undefined') {
                this.handle[eventName] = []
            }
            this.handle[eventName].push(fn)
        }

        trigger(eventName) {
            if (!(eventName in this.handle)) {
                return;
            } else {
                this.handle[eventName].forEach(v => {
                    v();
                });
            }

        }
        removeEvent(eventName, fn) {

            if (!(eventName in this.handle)) {
                return;
            } else {
                for (let i = 0; i < this.handle[eventName].length; i++) {
                    if (this.handle[eventName][i] == fn) {
                        this.handle[eventName].splice(i, 1)
                        break;
                    }
                }

            }
        }
    }
    //封装的JS
    class Dailog extends EventTarget {
        // 构造函数
        constructor(options) {
            super();
            //合并配置；
            // let {width = '100px',height = '100px',title='默认值'} = options;
            this.opts = Object.assign({
                width: '30%',
                height: '250px',
                title: '测试标题',
                content: '测试内容',
                dragable: true, //是否可拖拽
                maskable: false, //是否有遮罩
                isCancel: false, //是否有取消
                //回调
                success() {
                    console.log('默认确定')
                },
                cancel() {
                    console.log('默认取消')
                }
            }, options);
            // console.log(opts)
            this.init()
        }
        //定义初始化方法
        init() {
            this.renderView()
            // this.addEvent('cancel', this.opts.cancel)
            let cancel = new Event('cancel')
            this.addEventListener('cancel', this.opts.cancel)

            // let success = new Event('success')
            this.addEventListener('success', this.opts.success)


            // let success = new CustomEvent('success',{
            //     detail:value
            // })
            this.dailogHtml.onclick = e => {
                // console.log(e.target.className)
                switch (e.target.className) {
                    case 'k-cancel':
                        this.close();
                        // this.opts.cancel();
                        // this.trigger('cancel')
                        // this.confirm();

                        this.dispatchEvent(cancel)
                        break;
                    case 'k-primary':
                        this.close();
                        // this.opts.success();
                        // this.trigger('success')
                        // this.dispatchEvent(success)
                        this.confirm()

                        break;
                    case 'k-close':
                        this.close();
                        // this.trigger('cancel')
                        this.dispatchEvent(cancel)

                        break;
                }
            }

        }
        confirm(value) {


            let success = new CustomEvent('success',{
                detail:value
            })
            this.dispatchEvent(success)
            // this.dispatchEvent(cancel)

            // console.log(value)

        }
        // 渲染
        renderView() {
            this.dailogHtml = document.createElement('div')
            this.dailogHtml.innerHTML = `
            <div class="k-wrapper" ></div>
                    <div class="k-dialog" style="width:${this.opts.width}">
                        <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-cancel">取消</span>' : ''}
                             ${this.opts.isCancel ? '<span class="k-primary">确定</span>' : ''}
                        </div>

                    </div>
            `
            document.querySelector('body').appendChild(this.dailogHtml)
            // console.log(123)
        }
        // 显示对话框
        open() {
            if (this.opts.maskable) {
                this.dailogHtml.querySelector('.k-wrapper').style.display = 'block'

            }
            this.dailogHtml.querySelector('.k-dialog').style.display = 'block'
        }
        // 关闭对话框
        close() {
            this.dailogHtml.querySelector('.k-wrapper').style.display = 'none'
            this.dailogHtml.querySelector('.k-dialog').style.display = 'none'
        }
    }


    class ExtendsDailog extends Dailog {
        constructor(options) {
            super(options);
            this.renderInput()

        }

        renderInput() {
            let myInput = document.createElement('input');
            myInput.type = 'text';
            myInput.classList.add("input-inner");
            // this.dailogHtml.querySelector('k-dialog')
            this.dailogHtml.querySelector('.k-body').appendChild(myInput)

        }
        confirm() {
            super.confirm(this.dailogHtml.querySelector('.input-inner').value)

        }
    }

    //调用
    let dailog1 = new Dailog({
        width: '30%',
        height: '250px',
        title: '测试标题123',
        isCancel: true,
        maskable: true,
        success() {
            console.log('确定')
        },
        cancel() {
            console.log('取消')
        }
    })

    document.querySelector('.dailog1').onclick = function () {
        // dailog1.renderInput()
        dailog1.open()

    }
    let dailog2 = new ExtendsDailog({
        width: '30%',
        height: '250px',
        title: '测试标题123',
        isCancel: true,
        maskable: true,
        success(e) {
            console.log('确定', e.detail)

        },
        cancel() {
            console.log('取消')
        }
    })

    document.querySelector('.dailog2').onclick = function () {
        // dailog1.renderInput()
        dailog2.open()

    }
</script>

</html>