将vee-validate / HTML属性添加到插槽中的输入元素

<template>
  <div>
    <slot></slot>
  </div>
</template>

<template>
  <div>
    <slot :class="{ 'is-invalid': errors.has('input') }"></slot>
    <span v-if="errors.has('input')" class="error">{{ errors.first('input') }}</span>
  </div>
</template>

<template>
  <div>
    <slot :class="{ 'is-invalid': errors.has('input') }" v-validate="'required'"></slot>
    <span v-if="errors.has('input')" class="error">{{ errors.first('input') }}</span>
  </div>
</template>

<template>
  <div>
    <slot :class="{ 'is-invalid': errors.has('input') }" v-validate="'required'"></slot>
    <span v-if="errors.has('input')" class="error">{{ errors.first('input') }}</span>
    <button @click="submitForm">提交</button>
  </div>
</template>

<script>
export default {
  methods: {
    submitForm() {
      this.$validator.validateAll().then(result => {
        if (result) {
          // 表单验证通过，执行提交操作
        }
      });
    }
  }
}
</script>