如何在Element UI Input v2.x中键入时发出值

Question

这是我的最小工作示例，下面的示例使用了我们目前在该项目中使用的元素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/部件/输入编号

谢谢。

Answer 1

试试这个：

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

不使用v-bind，只需使用v-model并使用本机输入事件即可。根据本文档，el-input-number标签没有input事件，只有change事件。

链接到他们的文档：https://element.eleme.io/#/en-US/部件/输入编号#输入编号

Answer 2

因为在取消焦点和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);
},
}
}

Answer 3

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