状态管理思路
- 数据绑定:使用 Vue 的数据绑定机制,将下拉框的选中值、输入框的显示状态、可输入内容及校验规则绑定到 Vue 实例的 data 中。
- 计算属性:通过计算属性根据下拉框的选中值动态计算输入框的状态、可输入内容及校验规则,以便在模板中使用。
- 方法:定义方法来处理下拉框的 change 事件,触发计算属性重新计算,从而更新输入框的相关状态。
关键代码片段
<template>
<div>
<select v-model="selectedOption" @change="handleOptionChange">
<option value="option1">选项1</option>
<option value="option2">选项2</option>
</select>
<input v-if="inputVisible" :maxlength="inputMaxLength" :disabled="inputDisabled" />
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: 'option1',
inputVisible: true,
inputMaxLength: 10,
inputDisabled: false
};
},
methods: {
handleOptionChange() {
// 这里根据 selectedOption 的值更新 inputVisible、inputMaxLength、inputDisabled
if (this.selectedOption === 'option1') {
this.inputVisible = true;
this.inputMaxLength = 10;
this.inputDisabled = false;
} else {
this.inputVisible = false;
this.inputMaxLength = 5;
this.inputDisabled = true;
}
}
}
};
</script>
校验规则实现思路
- 使用计算属性:可以通过计算属性返回不同的校验函数,在表单提交时调用这些校验函数。
- 自定义指令:也可以通过自定义指令实现输入框实时校验,在指令的钩子函数中根据下拉框选中值进行校验逻辑。
校验规则关键代码片段(计算属性示例)
<template>
<div>
<select v-model="selectedOption" @change="handleOptionChange">
<option value="option1">选项1</option>
<option value="option2">选项2</option>
</select>
<input v-if="inputVisible" :maxlength="inputMaxLength" :disabled="inputDisabled" @blur="validateInput" />
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: 'option1',
inputVisible: true,
inputMaxLength: 10,
inputDisabled: false,
inputValue: ''
};
},
methods: {
handleOptionChange() {
// 这里根据 selectedOption 的值更新 inputVisible、inputMaxLength、inputDisabled
if (this.selectedOption === 'option1') {
this.inputVisible = true;
this.inputMaxLength = 10;
this.inputDisabled = false;
} else {
this.inputVisible = false;
this.inputMaxLength = 5;
this.inputDisabled = true;
}
},
validateInput() {
const validator = this.inputValidator;
if (!validator(this.inputValue)) {
console.error('输入不合法');
}
}
},
computed: {
inputValidator() {
if (this.selectedOption === 'option1') {
return value => value.length <= this.inputMaxLength && /^\d+$/.test(value); // 假设选项1要求输入数字且长度不超过inputMaxLength
} else {
return value => value.length <= this.inputMaxLength && /^[a-zA-Z]+$/.test(value); // 选项2要求输入字母且长度不超过inputMaxLength
}
}
}
};
</script>