InputRegZen.vue 正则Input 限制输入框输入内容
核心内容 已经 perfect,没有用外库,原生完成 用的 iview的Input组件 封装
// InputRegZen.vue
<template>
<div>
<Input v-model="currentValue"
ref="inputRef"
:maxlength="maxlength"
:placeholder="placeholder"
:disabled="disabled"
@input="inputHandle" />
</div>
</template>
<script>
export default {
name: 'InputRegZen',
props: {
regStr: {
type: String,
default: "中文数字字母_"
},
maxlength: {
type: Number,
default: 30,
},
placeholder: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false,
},
value: {
type: String,
default: ''
},
},
components: {},
data () {
return {
currentValue: this.value.toString(),
}
},
watch: {
value: function (val) {
this.currentValue = this.value.toString()
},
},
computed: {},
methods: {
inputHandle (val) {
if (this.clearSpot(val) !== val) { // 有非法字符
const diff = this.getDiff(val, this.clearSpot(val))
this.$nextTick(() => {
this.currentValue = this.value
this.$nextTick(() => {
this.$refs.inputRef.$refs.input.setSelectionRange(diff, diff)
})
})
} else { // 全部合法
this.$emit('input', val)
this.$emit('validateField') // 这句很重要
// 外层需要 每次 验证一下
// @validateField="$refs.yourRef.validateField('yourFiledName')"
}
},
getDiff (str1, str2) {
let ret = 0
for (let i = 0; i < str1.length; i++) {
if (str1.substr(i, 1) === str2.substr(i, 1)) {
// next
} else {
ret = i
break
}
}
return ret
},
clearSpot (vStr) {
// return vStr.replace(/[^0-9]/ig, '')
const restList = {
"数字": /[^0-9]/ig,
"中文数字字母_": /[^a-zA-Z0-9_\u4e00-\u9fa5]+$/ig,
}
return vStr.replace(restList[this.regStr], '')
}
},
created () { },
activated () { },
mounted () { },
beforeDestroy () { }
}
</script>
<style>
</style>
---------------------------------------------
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结
2020-07-28 vxe table columns 要用data里的值,用computed的值会导致排序部分不好用。