Element UI Input v2.x에 입력할 때 값을 내보내는 방법

Element UI Input v2.x에 입력할 때 값을 내보내는 방법

이것은 최소한의 작업 예시로, 다음 예에서는 이 프로젝트에서 현재 사용하고 있는 요소 UI 버전 2.x를 사용합니다.

https://codepen.io/peter-peter-the-typescripter/pen/WNGxWEB

{{ input }}
<el-input-number placeholder="Please input" :value="input" @input="onInput" />

onInput(val) {
  console.log('input', val)
  this.input = val
  this.$emit('input', val)
}

이전 버전 1.x에서는 입력이 다음 중 값을 내보낼 수 있었습니다.@change지연이 거의 없습니다(14 ms).그러나 v2.x에서는 변경되어 버립니다.이 코드를 편집하여 입력을 마치자마자 값을 출력하고 검증하는 방법을 가르쳐 주시겠습니까?

버전 1.x에서와 같은 동작을 만들 수 있습니까?
https://element.eleme.io/1.4/ #/en-US/component/input-number 에서 확인하십시오.

감사합니다.

이것을 시험해 보세요.

<el-input-number placeholder="Please input" v-model="input" @input.native="onInput" />

사용하는 대신v-bind, 사용만 하면 됩니다.v-model대신 네이티브 입력 이벤트를 사용합니다.이 서류에 따르면,input이벤트, 단,change을 위한 행사.el-input-number태그를 붙입니다.

문서 링크:https://element.eleme.io/#/en-US/component/input-number#inputnumber

왜냐하면 포커스가 풀릴 때까지 입력 변경 시 검증이 적용되지 않기 때문입니다.v-model또는v-bind기능하지 않는 것 같습니다.입력 태그에 액세스 할 수 있습니다.DOM또는ref그 후 기능 내에서 검증합니다.

<el-input-number placeholder="Please input" v-model="input" :min="min" :max="max" @input.native="onInput" />

다음 중 하나를 사용하여 입력에 액세스할 수 있습니다.DOM컴포넌트가 마운트된 경우 또는ref접근하다el-input-number컴포넌트를 사용하여 입력에 액세스합니다.

여기서 나는 네이티브 입력 이벤트를 사용했는데, 그 이유는 사용자가 입력했을 때 오직 나만이 입력 변경에 액세스하여 입력값에 대한 검증을 적용할 수 있기 때문입니다.

var Main = {
  data() {
    return {
      input: '',
      min: 0,
      max: 100,
    }
  },
  mounted() {
    this.maxInputLength = String(this.max);
    this.inputElem = this.$el.querySelector('.el-input__inner'); // this.$el.querySelector('input');
  },
  methods: {
    onInput(evt) {
      let val = evt.target.value;
      let integer = parseInt(val);
      if (integer >= this.max || val.length > this.maxInputLength) {
        this.inputElem.value = 100;
      }
      else if (integer == 0) {
        this.inputElem.value = 0;        
      }
      else {
        this.inputElem.value = val;
      }
      this.$emit('input', val);
    },
  }
}

입력 시 검증을 지원하는 element-ui와 함께 제공되는 검증 프레임워크를 사용하지 않는 이유는 무엇입니까?

var Main = {
    data() {
      return {
        ruleForm: {
          name: '',
        },
        rules: {
          name: [
            { required: true, message: 'Please input Activity name', trigger: 'change' },
            { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'change' }
          ],
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.14.1/lib/index.js"></script>
<div id="app">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
  <el-form-item label="Activity name" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
    <el-button @click="resetForm('ruleForm')">Reset</el-button>
  </el-form-item>
</el-form>
</div>

언급URL : https://stackoverflow.com/questions/65204462/how-to-emit-value-as-you-type-in-element-ui-input-v2-x