vue:el-input 입력 시 입력 형식 조작 제한

2071 단어 vueel-input입력유형
@keyup을 통해native 시간 동적 감시 입력 유형
1. 핸드폰 번호, 숫자만 가능, 비숫자를 입력하면 바로 비우기
2. 주민등록번호, Xx와 숫자를 제외한 나머지는 일률적으로 비운다
3. 1.2 두 가지 상황을 바탕으로 동적으로 만들어진 필드(즉 v-for에서 나온 필드)도 있습니다. 해결 방법: 먼저 split를 사용하여 필드 그룹을 형성하고 for 순환을 사용하여 마지막 점의 앞 필드를 찾으면 $set 업데이트와 페이지 렌더링을 편리하게 할 수 있습니다.

setDelMsicStr(field,type){
   let props
   let len
   let value
   let newphoestr
   let item = this
   if (field) {
    props = field.split('.')
    len = props.length
    for (let i = 0; i < len - 1; i++) {
     item = item[props[i]]
    }
    if(type=="phone"){
     newphoestr = (item[props[len - 1]]).replace(/([^0-9])+/g, '')
    }else if(type=='idCard'){
     newphoestr = (item[props[len - 1]]).replace(/([^0-9Xx])+/g, '')
    }
    this.$set(item, props[len - 1], newphoestr)
   }
  },
포인트:this.$를 사용합니다.set () 시 필수 점

    for (let i = 0; i < len - 1; i++) {
     item = item[props[i]]
    }
테이블은 입력한 숫자의 길이를 제한합니다. 제한된 값을 초과하면 9999를 직접 표시합니다.

          <el-form-item prop="activStoreSellPrice">
           <el-input type="number" @keyup.native="setRange('form.prdctStoreList.'+scope.$index+'.activStoreSellPrice',99999,0)" v-model.number="scope.row.activStoreSellPrice" :disabled="disabled" min="0" max="99999999"></el-input>
          </el-form-item>
중점:
표의 줄에 대한 index (scope.$index)
@keyup.native="setRange('form.prdctStoreList.'+scope.$index+'.activStoreSellPrice',99999,0)"
추가 정보: elementUI + vue 입력 상자는 정수만 입력할 수 있고 알파벳 e 및 + - 번호는 입력할 수 없습니다.
코드 보세요~

상기 vue:el-input 입력 시 입력을 제한하는 유형 조작은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고 부탁드리고 저희를 많이 사랑해 주세요.
[Javascript] 두 개 뽑아서 더하기
[Vue.js] 2. Vue 인스턴스 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage