开发过程中,碰到 只能输入英文跟数字的需求。 当下决定限制不能输入中文文字来”解决需求“
但是项目中使用的 是el-select,使用了 ref,@oninput 都有bug,所以决定使用原生js 搭配解决,以下便是相关代码。
<el-select
v-model="value"
filterable
remote
reserve-keyword
placeholder="请输入"
:remote-method="getData"
id="associatedid"
>
<el-option
v-for="item in [1,2,3]"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
methods
methods:{
dom () {
const input1 = document.querySelector('#associatedid')
input1.oninput = function () {
console.log('change', input1.value)
const reg = /^[\u4e00-\u9fa5]{0,30}$/
input1.value = input1.value.replace(reg, '')
}
}
mounted
mounted(){
this.dom()
}
当select组件放在弹窗中的话,就需要在弹窗 visible = true 的时候 结合
this.$nextTick
使用
如:
this.Dialog = true
this.$nextTick(() => {
this.dom()
})