Vue3组合式API中如何在TW Elements验证通过时禁用提示与样式？

针对Vue 3 Composition API结合TW Elements的场景，你可以通过手动控制Validation实例或配置属性来实现需求，具体方法如下：

方法一：自定义验证成功回调（精准控制） #

1. 修改模板结构 #

移除表单的data-te-validation-init自动初始化属性，添加Vue ref以便获取表单元素：

<template>
  <form ref="validationForm">
    <div
      class="relative mb-3"
      data-te-input-wrapper-init
      data-te-validate="input"
      data-te-validation-ruleset="isRequired"
    >
      <input
        type="text"
        class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
        id="exampleFormAdvancedInput1"
        placeholder="Example label"
      />
      <label
        for="exampleFormAdvancedInput1"
        class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
      >
        Example label
      </label>
    </div>
    <button
      type="button"
      class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
      data-te-submit-btn-ref
    >
      Validate
    </button>
  </form>
</template>

2. 手动初始化Validation并添加回调 #

在Composition API中创建实例，通过onValid回调移除成功样式和提示：

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { Validation, Input, initTE } from "tw-elements";

initTE({ Validation, Input });

const validationForm = ref(null);
let validationInstance = null;

onMounted(() => {
  validationInstance = new Validation(validationForm.value, {
    onValid: (context) => {
      // 获取验证通过的输入容器
      const wrapper = context.element;
      
      // 移除TW Elements添加的成功状态标记
      wrapper.removeAttribute('data-te-valid');
      
      // 隐藏自动生成的成功提示消息
      const successMsg = wrapper.querySelector('[data-te-error-message]');
      if (successMsg) successMsg.style.display = 'none';
      
      // 移除输入框的成功样式（根据TW Elements实际类名调整）
      const input = wrapper.querySelector('input');
      input.classList.remove('border-emerald-500', 'ring-emerald-200');
    }
  });
});

onUnmounted(() => {
  validationInstance?.dispose();
});
</script>

方法二：通过属性快速禁用成功提示 #

给输入容器添加data-te-validation-success-message="false"，直接关闭成功提示：

<div
  class="relative mb-3"
  data-te-input-wrapper-init
  data-te-validate="input"
  data-te-validation-ruleset="isRequired"
  data-te-validation-success-message="false"
>
<!-- 输入框和标签 -->
</div>

方法三：覆盖成功样式（全局生效） #

在tailwind.config.js中覆盖TW Elements的成功状态样式，让验证通过后无视觉变化：

module.exports = {
  theme: {
    extend: {
      colors: {
        'te-valid': 'inherit', // 继承默认文本/边框颜色
      },
    },
  },
}

内容的提问来源于stack exchange，提问作者Anatoly Lindemann