4

这是我的最小工作示例，以下示例使用我们当前在此项目中使用的元素 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以很少的延迟（几毫秒）发出值。但是，它在 v2.x 上发生了变化。您能告诉我如何编辑此代码，以便在我完成输入后几乎立即发出并验证该值吗？

是否可以创建与 1.x 版本类似的行为？
在这里查看：https ://element.eleme.io/1.4/#/en-US/component/input-number

谢谢你。

4

3 回答 3

2

因为验证不会应用于输入更改，直到 unfocusv-model或者v-bind似乎没有工作，我们可以使用DOMor访问输入标签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);
    },
  }
}
于 2020-12-12T11:31:19.700 回答
2

尝试这个：

<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

于 2020-12-11T19:41:38.430 回答
0

为什么不使用 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>

于 2020-12-16T12:13:50.757 回答