禁止浏览器记住密码、自动填写密码,支持明文暗文显示密码
使用方法:父组件中引入handPwd.vue组件
父组件使用:
import handPassword from '@/components/common/handPassword.vue'
components: {
handPassword
},
data(){
return {
form:{
password:''
},
rules:{
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' },
{ pattern: /^[^su4e00-u9fa5]+$/, message: '不允许输入空格、中文等特殊符号' }
]
}
}
},
methods:{
inputPassword(val) {
this.form.password = val
this.$refs.form.validateField('password')
}
}
handPwd.vue
{}"
@paste.prevent="() => {}"
@cut.prevent="() => {}"
:placeholder="placeholder"
:maxlength="maxLength"
class="el-input__inner"
:style="{ 'padding-right': clearPwd != '' ? '56px' : '30px' }"
/>
密码不能为空
/**
* 手写密码,不支持右键菜单、复制、黏贴、剪切
*/
export default {
name: 'handPassword',
props: {
// 输入框的id
inputId: {
type: String,
default: 'passwordInput'
},
// 后门:用户名称,方便开发使用浏览器记住密码
account: {
type: String,
default: ''
},
// 需要使用子组件的校验,一般不使用
needValidatePwd: {
type: Boolean,
default: false
},
// 输入框的暗注释
placeholder: {
type: String,
default: '请输入密码'
},
// 输入框的最大输入长度
maxLength: {
type: Number,
default: 100
},
// 输入框头部图标类名
prefixIconName: {
type: String,
default: ''
},
// 初始化密码值,一般用于编辑表单
originPwd: {
type: String,
default: ''
}
},
data() {
return {
secretPwd: '', //暗文密码
clearPwd: '', //明文密码
showPwd: false, //是否显示明文
errorPwd: false //是否密码错误
}
},
watch: {
/**
* 监听初始化密码,将明文和暗文密码分别初始化
*/
originPwd: {
handler(val) {
this.clearPwd = val
this.secretPwd = '●'.repeat(val.length)
},
immediate: true
}
},
created() {
/**
* 禁止浏览器右键,因为右键菜单里有撤销、重写、黏贴、复制
*/
window.oncontextmenu = function(e) {
e.preventDefault()
}
},
methods: {
/**
* 重置方法,一般是给父组件调用
*/
reset() {
this.showPwd = false
this.errorPwd = false
},
/**
* 检查密码
*/
checkPassword() {
if (this.needValidatePwd) {
if (this.clearPwd === '') {
this.errorPwd = true
} else {
this.errorPwd = false
}
}
},
/**
* 点击密码框后的小眼睛,切换明文或暗文
*/
handleShowPwd() {
if (this.showPwd) {
this.secretPwd = '●'.repeat(this.secretPwd.length)
} else {
this.secretPwd = JSON.parse(JSON.stringify(this.clearPwd))
}
this.showPwd = !this.showPwd
},
/**
* 输入密码
*/
inputPassword(val) {
const inputVal = val.target.value //原生input需要取target.value
// 如果明文展示或者只输入了一个字符,比较简单,直接复制
if (this.showPwd || inputVal.indexOf('●') === -1) {
if (this.showPwd) {
this.secretPwd = inputVal
} else {
this.secretPwd = '●'.repeat(inputVal.length)
}
this.clearPwd = inputVal
} else {
const planeTextLen = this.clearPwd.length, //明文长度
cipherTextLen = inputVal.length, //暗文长度
selectionEnd = document.getElementById(this.inputId).selectionEnd // 获取光标位置
const realArr = this.clearPwd.split(''), // 真实密码数组
coverArr = inputVal.split('') // 文本框显示密码数组
let index = -1 // 新输入的字符位置
let lastChar = '' // 新输入的字符
// 找到新输入的字符及位置
coverArr.forEach((el, idx) => {
if (/[^●]/g.test(el)) {
index = idx
lastChar += el
}
})
if (planeTextLen < cipherTextLen) {
// 新增
realArr.splice(index, 0, lastChar)
} else if (cipherTextLen {
document.getElementById(this.inputId).selectionEnd = selectionEnd
})
}
this.checkPassword()
// 告知父组件明文密码
this.$emit('inputPwd', this.clearPwd)
}
}
}
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
前言 当我们使用爬虫程序时,有可能会遇到因为大量访问网站而被网站封锁IP的情况。这时,我们可以使用代理IP来解决这个问题。下面将详细介绍如何使用代理IP来避免被封IP的情况,并附上代码实例。 一、为什么会被封IP? 在访问网站时,网站会记录我们的IP地址,如果…