vue使用rules校验下拉框失去焦点不生效

在Vue中，当你使用`v-model`绑定了一个下拉框并尝试通过`v-bind:class="{ error: rule !== true }"`这样的`rules`属性来进行表单验证时，如果该规则只在输入字段改变或者提交表单时触发校验，而下拉框失去焦点时不主动触发验证，那么默认的Vue内置的`v-model.number`, `v-model.required`, 等内置验证规则并不会覆盖到这种特定情况。

解决这个问题通常需要手动处理，你可以自定义一个验证函数，在下拉框`@blur`事件触发时进行校验。例如：

<template>
  <select v-model="selectedValue" @blur="validateDropdown">
    <!-- 下拉框选项 -->
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      rules: {
        dropdownValue: { required: true },
      },
    };
  },
  methods: {
    validateDropdown() {
      this.$refs.yourSelectRule.validate((valid) => {
        if (!valid) {
          // 验证失败，添加错误样式
          this.$set(this.rules, 'dropdownValue', false);
        } else {
          // 验证成功，清除错误样式
          this.$set(this.rules, 'dropdownValue', true);
        }
      });
    },
  },
};
</script>

在这里，`yourSelectRule` 应该是你绑定的 select 组件实例的 ref，确保在模板里添加了`ref="yourSelectRule"`。这个自定义的`validateDropdown`方法会在下拉框失去焦点时运行，并检查`dropdownValue`是否满足`required`规则。