封装的form表单里面input事件,我引用的组件需要自定义每一个input的事件
时间: 2024-03-22 08:41:51 浏览: 122
好的,我了解您的需求。我可以为您封装一个通用的 el-form 组件,支持自定义每个表单字段的 input 事件。具体做法如下:
1. 在 el-form 组件中,为每个表单字段绑定一个名为 `inputEvent` 的属性。
2. 在表单字段内部,通过 `$emit` 方法触发 `inputEvent` 事件,并传入当前输入框的值。
3. 在 el-form 组件中监听 `inputEvent` 事件,并根据事件的名称来调用对应的方法。
下面是一个简单的示例代码:
```
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="form.name" @input="handleInput('name', $event)" />
</el-form-item>
<el-form-item label="年龄">
<el-input v-model.number="form.age" @input="handleInput('age', $event)" />
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: 0,
},
};
},
methods: {
handleInput(field, value) {
this.$emit('inputEvent', field, value);
},
},
};
</script>
```
在父组件中,您可以通过监听 `inputEvent` 事件来自定义每个表单字段的输入事件。例如:
```
<template>
<my-form @inputEvent="handleInputEvent" />
</template>
<script>
import MyForm from './MyForm.vue';
export default {
components: {
MyForm,
},
methods: {
handleInputEvent(field, value) {
console.log(`输入框 ${field} 的值为:${value}`);
// 根据需要进行处理
},
},
};
</script>
```
这样,您就可以在父组件中自定义每个表单字段的输入事件了。
阅读全文