下面是从脚本部分的API选项到API组合的转换。模板部分不应该改变。

<script setup lang="ts">
import { Form } from "vee-validate";
import BaseInput from "./BaseInput";
import { computed, ref } from "vue";

const addRequired = ref(true);
const addMin = ref(false);
const username = ref("");

const rules = computed(() => {
  let result = "";

  if (addRequired.value) result += "required";
  if (addMin.value) result += addRequired.value ? "|min:4" : "min:4";

  return result;
});

function toggleRequired() {
  addRequired.value = !addRequired.value;
}

function toggleMin() {
  addMin.value = !addMin.value;
}

function onSubmit(values) {
  console.log(values);
  console.log("Submitting :(");
}
</script>