上一篇写的不能叫组件，只能是用js、html、css画了一个组件，不能算是真正的组件，
经过大神指导，这次的内容才算是一个最基础的input密码框组件。
首先说一下，比上个版本不同的是：
1、优化了命名污染的问题
2、优化了图标定位问题
3、优化了上个所谓组件不能复用的问题
4、优化了无法扩展方法、扩展属性、扩展校验等功能
5、优化了方法清晰化
实现效果：
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;
}