做后台管理系统时,登陆后浏览器会弹框提示是否记住密码,而且它记住密码后下次输密码会自动填充,很烦,这里做一个密码输入框的组件,防止浏览器记住密码
第一步,创建一个PwInput.vue
的文件当作组件,里面代码如下
<template>
<!-- 这里使用了elemntUI的类名,如果没有安装elmentUI则自己自定义样式 -->
<div class="pw_input_cp el-input">
<input
class="el-input__inner"
placeholder="请输入密码"
ref="input"
@input="handleInput"
@compositionstart="handleCompositionStart"
@compositionend="handleCompositionEnd"/>
</div>
</template>
<script>
//自定义密码输入框
//input元素光标操作
class CursorPosition{
constructor(_inputEl) {
this._inputEl = _inputEl;
}
//获取光标的位置 前,后,以及中间字符
get(){
var rangeData = { text: "", start: 0, end: 0 };
if (this._inputEl.setSelectionRange) { // W3C
this._inputEl.focus();
rangeData.start = this._inputEl.selectionStart;
rangeData.end = this._inputEl.selectionEnd;
rangeData.text = (rangeData.start != rangeData.end) ? this._inputEl.value.substring(rangeData.start, rangeData.end) : "";
} else if (document.selection) { // IE
this._inputEl.focus();
var i,
oS = document.selection.createRange(),
oR = document.body.createTextRange();
oR.moveToElementText(this._inputEl);
rangeData.text = oS.text;
rangeData.bookmark = oS.getBookmark();
for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i++) {
if (this._inputEl.value.charAt(i) == '\r') {
i++;
}
}
rangeData.start = i;
rangeData.end = rangeData.text.length + rangeData.start;
}
return rangeData;
}
//写入光标的位置
set(rangeData){
var oR;
if (!rangeData) {
alert("You must get cursor position first.")
}
this._inputEl.focus();
if (this._inputEl.setSelectionRange) { // W3C
this._inputEl.setSelectionRange(rangeData.start, rangeData.end);
} else if (this._inputEl.createTextRange) { // IE
oR = this._inputEl.createTextRange();
if (this._inputEl.value.length === rangeData.start) {
oR.collapse(false);
oR.select();
} else {
oR.moveToBookmark(rangeData.bookmark);
oR.select();
}
}
}
}
export default {
name: 'Pw_input_cp',
props:{
value:{
type:String,
default:"",
},
},
data(){
return{
symbol:"✘", //自定义的密码符号
pwd:"", //密码明文数据
inputEl:null, //input元素
isComposing:false, //输入框是否还在输入(记录输入框输入的是虚拟文本还是已确定文本)
};
},
mounted(){
this.inputEl = this.$refs.input;
},
watch:{
value(){
this.pwd = this.value;
this.inputDataConversion(this.pwd);
},
},
methods:{
inputDataConversion(value){ //输入框里的数据转换,将123转为***
if (!value) return;
let data = "";
for(let i=0;i<value.length;i++){
data+=this.symbol;
}
this.inputEl.value = data;
},
pwdSetData(positionIndex,value){ //写入原始数据
let _pwd = value.split(this.symbol).join("");
if(_pwd){
let index = this.pwd.length - (value.length - positionIndex.end);
this.pwd = this.pwd.slice(0,positionIndex.end-_pwd.length) + _pwd + this.pwd.slice(index);
}else{
this.pwd = this.pwd.slice(0,positionIndex.end) + this.pwd.slice(positionIndex.end+this.pwd.length - value.length);
}
},
handleInput(e){ //输入值变化后执行
//撰写期间不应发出输入
if (this.isComposing) return;
let cursorPosition = new CursorPosition(this.inputEl);
let positionIndex = cursorPosition.get();
let value = e.target.value; //整个输入框的值
this.pwdSetData(positionIndex,value);
this.inputDataConversion(value);
cursorPosition.set(positionIndex,this.inputEl);
this.$emit("input",this.pwd);
},
handleCompositionStart() {
//表示正在写
this.isComposing = true;
},
handleCompositionEnd(e) {
if (this.isComposing) {
this.isComposing = false;
//handleCompositionEnd比handleInput后执行,避免isComposing还为true时handleInput无法执行正确逻辑
this.handleInput(e);
}
},
},
}
</script>
<style scoped lang="scss">
.pw_input_cp{
width: 100%;
}
</style>
在需要引用的地方使用就行了(vue使用组件就不用多说了)
<PwInput
v-model="password">
</PwInput>
DEMO,这里的密码输入框采用的就是这种方式
原文地址
第一次在掘金上写文章,还算不上写吧,就是把自己写的组件分享给大家,在多个平台发布了,希望能帮到大家
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!