vue3+antv+ts实现勾选同意协议复选框之后才能继续注册登录

效果如下：

勾选复选框之前

勾选复选框之后

这里偷懒了，没有把登录和注册按钮分开控制，自己实操的时候可以去细化一下功能

代码如下：

javascript 复制代码

<script setup lang="ts">
import { ref, defineProps, reactive } from "vue";
import { login, register } from "@/api";
import { useRouter } from "vue-router";
import { setToken } from "@/utils/auth";

const router = useRouter();
const formRef = ref<any>(); // Form reference can be of any type
const { loginName, userName, password } = defineProps({
  loginName: String,
  userName: String,
  password: String,
});
const agree = ref<any>(false);
const formState = reactive({
  loginName: "Saucesy",
  userName: "saucesy",
  password: "123456",
});
const formRules = reactive({
  loginName: [{ required: true, message: "请输入账号" }] as const,
  userName: [{ required: true, message: "请输入昵称" }] as const,
  password: [{ required: true, message: "请输入密码" }] as const,
});

enum SubmitType {
  LOGIN = 1,
  REGISTER = 2,
}

const onSubmit = (type: SubmitType): void => {
  formRef.value?.validate().then((value: any) => {
    if (type === SubmitType.LOGIN) {
      login(value).then(onFulfilled);
    } else {
      register(value).then(onFulfilled);
    }
  });

  function onFulfilled(token: string): void {
    console.log(token);
    router.push({ path: "/", replace: true });
  }
};
</script>
<template>
  <div class="page">
    <a-form
      ref="formRef"
      :model="formState"
      :rules="formRules"
      @finish="onSubmit"
    >
      <a-form-item label="账号" name="loginName">
        <a-input v-model:value="formState.loginName">
          <template #prefix>
            <UserOutlined class="site-form-item-icon" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item label="昵称" name="userName">
        <a-input v-model:value="formState.userName">
          <template #prefix>
            <UserOutlined class="site-form-item-icon" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item label="密码" name="password">
        <a-input-password v-model:value="formState.password">
          <template #prefix>
            <LockOutlined class="site-form-item-icon" />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item>
        <a-checkbox v-model:checked="agree">我已阅读并同意用户守则</a-checkbox>
      </a-form-item>

      <a-form-item>
        <div style="display: flex; gap: 20px">
          <a-button
            style="flex: 3"
            type="primary"
            @click="onSubmit(submitType.LOGIN)"
            :disabled="!agree"
          >
            登录</a-button
          >
          <a-button
            style="flex: 1"
            type="primary"
            @click="onSubmit(submitType.REGISTER)"
            :disabled="!agree"
          >
            注册</a-button
          >
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<style scoped lang="scss">
.page {
  margin: 100px auto;
  width: 400px;
}
</style>

关键的地方就三个：

javascript 复制代码

const agree = ref<any>(false);

javascript 复制代码

      <a-form-item>
        <a-checkbox v-model:checked="agree">我已阅读并同意用户守则</a-checkbox>
      </a-form-item>

和这里的:disabled="!agree"

复选框后要再加上需要同意的条款，做一个弹出框或者其他什么都可以