<div class="relative right" v-if="form.isPassword">
<vo-tooltip v-if="tipRequiredPassword" :errorMessage="errorMessagePassword" top="-25px"></vo-tooltip>
<!--火狐浏览器-->
<el-input placeholder="4-6位密码" :minlength="4" name="txtPassword" :maxlength="6" v-model="form.password"
size="small" :type="passwordVisibleW?'text':'password'"
autocomplete="off" ref="inputPassword" auto-complete="off"
class="vo-ui password-input modify-ui" v-if="!isWebKit" @input.native="passwordInputClick"
:class="{'border-error':tipRequiredPassword,'password-class':!passwordVisible}"
@blur="inputBlur($event,'password','tipRequiredPassword')">
<span slot="suffix"><i class="el-icon-view pointer" @click="showPassordClick('passwordVisibleW')"></i></span>
</el-input>
<!--普通浏览器-->
<el-input placeholder="4-6位密码" :minlength="4" name="txtPassword" :maxlength="6" v-model="form.password"
size="small" v-if="isWebKit"
autocomplete="off" ref="inputPassword" auto-complete="off"
class="vo-ui password-input modify-ui" id="passwordInput" @input.native="passwordInputClick"
:class="{'border-error':tipRequiredPassword,'password-class':!passwordVisible}"
@blur="inputBlur($event,'password','tipRequiredPassword')">
<span slot="suffix"><i class="el-icon-view pointer" @click="showPassordClick('passwordVisible')"></i></span>
</el-input>
<!--@focus="passwordFocus"-->
<!-- <el-input placeholder="4-6位密码" :minlength="4" :maxlength="6" v-model="form.password" size="small"
auto-complete="new-password" type="password" show-password autocomplete="off"
class="vo-ui password-input modify-ui" :class="{'border-error':tipRequiredPassword}"
@blur="inputBlur($event,'password','tipRequiredPassword')">
</el-input>-->
</div>
js中：
initPassword() {//判断样式生效没。
var x = document.getElementById("passwordInput");
var style = window.getComputedStyle(x);
if (style.webkitTextSecurity) {
this.isWebKit = true;
//do nothing
} else {
this.isWebKit = false;
x.setAttribute("type", "password");
}
},
passwordInputClick(e){//可以输入数字，英文字母，符号
e.target.value = e.target.value.replace(/[\u4e00-\u9fa5]/g, '');//禁止输入中文
e.target.value=e.target.value.replace(/\s/g,'');//禁止输入空格
},
showPassordClick(flag) {
this[flag] = !this[flag];
this.$nextTick(() => {//不放会导致光标在最前边；
this.$refs.inputPassword.$refs.input.focus();
})
}
<style>
.password-class {
.el-input__inner {
text-security: disc;
-webkit-text-security: disc;
-mox-text-security: disc;
}
}
</style>
其中vo-tooltip是错误提示
<template>
<div class="vo-tooltip-page">
<div class="tips_box" :style="{'top':top}">
<span>{{errorMessage}}</span>
<div class="div-top"></div>
</div>
</div>
</template>
<script>
export default {
name: "voTooltip",
props:{
errorMessage:{
type:String
},
top:{
type:String
},
},
data(){
return{
}
},
mounted() {
}
}
</script>
<style lang="scss">
.vo-tooltip-page{
position: relative;
.div-top{
width: 0;
height: 0;
border-width: 5px;
border-style: solid;
border-color: #000000 transparent transparent transparent;
opacity: 0.7;
position: absolute;
bottom: -10px;
left: calc(50% - 5px);
}
.tips_box {
position: absolute;
top: 0;
left: 50%;
z-index: 9999;
/* top: 0; !* 四周拉力相同 *!*/
right: 0; /* 四周拉力相同 */
bottom: 0; /* 四周拉力相同 */
/* left: 0; !* 四周拉力相同 *!*/
/* margin: auto;*/
margin: 0;
background: rgba(0, 0, 0, 1);
opacity: 0.7;
padding: 5px 20px;
display: inline-block;
font-size: 13px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
border-radius: 2px;
/*width: -webkit-fill-available!important;*/
width: -webkit-fit-content!important;
width: -moz-fit-content!important;
width: fit-content!important;
transform: translateX(-50%) translateY(-50%);
height: -webkit-fit-content!important;
height:-moz-fit-content!important;
height: fit-content!important;
/*height: 24px;*/
line-height: 24px;
}
}
</style>
