纯生js实现Element中input组件的部分功能,修改为组件版,可扩充的

上一篇写的不能叫组件,只能是用js、html、css画了一个组件,不能算是真正的组件,

经过大神指导,这次的内容才算是一个最基础的input密码框组件。

首先说一下,比上个版本不同的是:

  1、优化了命名污染的问题

  2、优化了图标定位问题

  3、优化了上个所谓组件不能复用的问题

  4、优化了无法扩展方法、扩展属性、扩展校验等功能

  5、优化了方法清晰化

实现效果:

纯生js实现Element中input组件的部分功能,修改为组件版,可扩充的

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js实现input组件</title>
        <script src="../js/jsInput2.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/jsInput2.css" />
    </head>
    <body>
        <div id="app1"></div>
        <br />
        <div id="app2"></div>

        <script>
            var qcqInput = new qcq_input({
                el: 'app1',
                event: {
                    focus: function() {
                        console.log("app1-->外部的获取焦点的事件")
                    },
                    unfocus: function() {
                        console.log("app1-->外部的失去焦点事件")
                    }
                },
                valid: {
                    notNull: {
                        isTrue: true,
                        msg: 'app1-->密码框内容不可为空'
                    },

                }
            });
            var qcqInput = new qcq_input({
                el: 'app2',
                event: {
                    focus: function() {
                        console.log("app2-->外部的获取焦点的事件")
                    },
                    unfocus: function() {
                        console.log("app2-->外部的失去焦点事件")
                    }
                },
                valid: {
                    notNull: {
                        isTrue: true,
                        msg: 'app2-->密码框内容不可为空'
                    },
            
                }
            });
        </script>
    </body>
</html>

JS代码:

function qcq_input(params) {
    let obj = {
        el: params.el,
        value: function() {
            return document.getElementById(this.el).getElementsByClassName("qcq_input_pre")[0].value
        },
        myEvent: params.event,
        valid: params.valid
    }

    let mySelf = {
        init: function() {
            //创建模板
            this.methods.createTemplate(this.utils); 
            //点击眼睛显示密码
            this.methods.showPassword(this.utils);
            //输入框获取焦点的时候 显示眼睛
            this.methods.getFocus(this.utils);
            //输入框失去焦点的时候 隐藏眼睛
            this.methods.outFocus(this.utils);
        },
        utils: {
            getElementObj: function getElementObj(claName) {
                return document.getElementById(obj.el).getElementsByClassName(claName)[0];
            } 
        },
        methods: {
            //创建模板
            createTemplate: function createTemplate() {
                //添加验证
                if (obj.el == undefined || obj.el == null || obj.el == "") {
                    console.log("节点id为空")
                }
                var html = '<div class="qcq_input_div">';
                html += '<input class="qcq_input_pre" type="password"/>';
                html += '<span class="qcq_input_span"></span></div>';
                document.getElementById(obj.el).innerHTML = html;
            },
            //点击眼睛显示密码
            showPassword: function showPassword(utils) {
                //添加事件监听 而且是要给el也就是需要添加的节点id下的点击事件
                utils.getElementObj("qcq_input_span").addEventListener("mousedown",function() {
                        var inputObj = utils.getElementObj("qcq_input_pre");
                        //使用getAttribute兼容性更好
                        var inputType = inputObj.getAttribute("type");
                        inputType = (inputType == "password") ? "text" : "password";
                        inputObj.setAttribute("type", inputType);
                        utils.getElementObj("qcq_input_pre").focus();
                    })
                //鼠标弹上来的时候也要将焦点给input
                utils.getElementObj("qcq_input_span").addEventListener("mouseup",function() {
                        utils.getElementObj("qcq_input_pre").focus();
                    })
            },
            //输入框获取焦点的时候 显示眼睛
            getFocus: function getFocus(utils) {
                utils.getElementObj("qcq_input_pre").addEventListener("focus",function() {
                        utils.getElementObj("qcq_input_span").style.display = "block";
                        if (typeof obj.myEvent.focus == "function") {
                            obj.myEvent.focus();
                        }
                    })

            },
            //输入框失去焦点的时候 隐藏眼睛
            outFocus: function outFocus(utils) {
                utils.getElementObj("qcq_input_pre").addEventListener("focusout",function() {
                        var value = utils.getElementObj("qcq_input_pre").value;
                        if (obj.valid.notNull.isTrue === true) {
                            if (!value) {
                                console.log(obj.valid.notNull.msg)
                            }
                        }
                        //只要输入框中存在值 那么眼睛不消失
                        if (!value) {
                            utils.getElementObj("qcq_input_span").style.display = "none"
                            if (typeof obj.myEvent.unfocus == "function") {
                                obj.myEvent.unfocus();
                            }
                        }
                    })
            }
        },
    }
    mySelf.init();
    return obj;
}

CSS代码:标红是新的知识点

.qcq_input_div{
    height: 35px;
    border: #C0C0C0 1px solid;
    min-width: 150px;
    display: inline-block;
    margin: 0px;
    padding: 0px;
    position: relative;
    border-radius: 5px;
}
.qcq_input_pre{
    border-radius: 5px;
    height: 35px;
    width: 100px;
    box-sizing: border-box;
    border: none;
}
.qcq_input_span{
    position: absolute;
    background-image: url(../image/eye.svg);
    background-repeat: no-repeat;
    background-size: 45%;
    background-position: center;
    width: 30px;
    height: 35px;
    z-index: 5;
    top: 0px;
    bottom: 0px;
    right: 0px;
    display: none;
}
.qcq_input_div > input{
    margin: 0px;
    padding: 0px;
    line-height: 35px;
    border-radius: 4px;
    border: 1px solid #ccc;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding-left: 10px !important;
}
上一篇:15、django.db.utils.IntegrityError: The row in table 'xxxxx' with primary key '1'


下一篇:IDEA创建基于Maven的SpringBoot项目-多模块