javascript - VueJS - 如何拥有多个 v 槽？

Question

我正在使用 vee-validate v3.0 进行验证并且设置很顺利，但现在我正在尝试设置我的元素的样式，但我似乎无法让它工作。我遵循了关于样式的非常简短的文档并编辑了 vee-validate 配置，但我注意到 v-slot 现在已更改为类。这让我很困惑，因为 v 槽已经用于错误，我可以使用多个吗？我希望输入字段使用 input.valid 和 input.invalid。

https://logaretm.github.io/vee-validate/guide/styling.html#classes

Vue注册组件中的表单

<ValidationProvider rules="required|min" v-slot="{ errors, classes }">
    <input
        v-model="form.username"
        type="text"
        id="username"
        class="fadeIn second"
        :class="classes"
        name="login"
        placeholder="username"
    />
    <span class="form-error">{{ errors[0] }}</span>
</ValidationProvider>

Vue Register 组件中的样式

<style>
input.invalid {
    color: red;
}

input.valid {
    color: green;
}
</style>

配置

import { configure } from "vee-validate";

configure({
    classes: {
        valid: "is-valid",
        invalid: "is-invalid"
    }
});

Answer 1

你可以使用 v-slot="{ errors, classes }"。它会起作用

这是一个工作示例

VeeValidate.configure({
  classes: {
    valid: "my-valid",
    invalid: "my-invalid"
  }
});

Vue.component('ValidationProvider', VeeValidate.ValidationProvider);
Vue.component('ValidationObserver', VeeValidate.ValidationObserver);

new Vue({
  el: '#app',
  data() {
    return {
      username: null
    }
  }
});

input.my-invalid {
  background-color: #ff000030;
}

input.my-valid {
  background-color: #00ff0030;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/3.0.5/vee-validate.full.min.js"></script>
<div id="app">
  <validation-observer tag="form" #default="{ dirty, pristine, valid, invalid, errors, validate }">
    <validation-provider name="username" rules="required|min:3" v-slot="{ errors, classes }">
      <input v-model="username" type="text" id="username" class="fadeIn second" :class="classes" name="login" placeholder="username" />
      <span class="form-error">{{ errors[0] }}</span>
    </validation-provider>
    <br>
    <br>
    <button :disabled="!dirty || !valid" type="submit">
      Submit
    </button>
    <button type="button" @click="validate">
      Validate manually
    </button>
    <pre>
      pristine: {{ pristine }}
      dirty:{{ dirty }}
      valid: {{ valid }}
      invalid: {{ invalid }}
      errors:{{ errors }}
    </pre>
  </validation-observer>
</div>