Bug: 验证码登录的验证码组件如何获取手机号

[linsxw]

Version

Vben Admin V5

Describe the bug?

各位大佬 验证码组件发送验证码需要上面input的手机号 这种写法怎么获取手机号？

Reproduction

https://github.com/vbenjs/vue-vben-admin/blob/main/apps/web-antd/src/views/_core/authentication/code-login.vue

System Info

5.3.0-beta.2

Relevant log output

No response

Validations

• [X] Read the docs
• [X] Ensure the code is up to date. (Some issues have been fixed in the latest version)
• [X] I have searched the existing issues and checked that my issue does not duplicate any existing issues.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[mynetfan]

const phone = ref('');

const formSchema = computed((): VbenFormSchema[] => {
  return [
    {
      component: 'VbenInput',
      componentProps: {
        modelValue: phone.value,
        'onUpdate:modelValue': (v) => {
          phone.value = v;
        },
        placeholder: $t('authentication.mobile'),
      },
      fieldName: 'phoneNumber',
      label: $t('authentication.mobile'),
      rules: z
        .string()
        .min(1, { message: $t('authentication.mobileTip') })
        .refine((v) => /^\d{11}$/.test(v), {
          message: $t('authentication.mobileErrortip'),
        }),
    },
    {
      component: 'VbenPinInput',
      componentProps: {
        createText: (countdown: number) => {
          const text =
            countdown > 0
              ? $t('authentication.sendText', [countdown])
              : $t('authentication.sendCode');
          return text;
        },
        handleSendCode: async () => {
          console.log('发送验证码给这个手机', phone.value);
        },
        placeholder: $t('authentication.code'),
      },
      fieldName: 'code',
      label: $t('authentication.code'),
      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
    },
  ];
});

[anncwb]

这样也行

const formSchema = computed((): VbenFormSchema[] => {
  return [
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: $t('authentication.mobile'),
      },
      fieldName: 'phoneNumber',
      label: $t('authentication.mobile'),
      rules: z
        .string()
        .min(1, { message: $t('authentication.mobileTip') })
        .refine((v) => /^\d{11}$/.test(v), {
          message: $t('authentication.mobileErrortip'),
        }),
    },
    {
      component: 'VbenPinInput',
      componentProps: (values)=>{
           return {
                createText: (countdown: number) => {
                  const text =
                    countdown > 0
                      ? $t('authentication.sendText', [countdown])
                      : $t('authentication.sendCode');
                  return text;
                  },
                  handleSendCode: async () => {
                    console.log('发送验证码给这个手机', values.phoneNumber);
                  },
                  placeholder: $t('authentication.code'),
          }
      },
      fieldName: 'code',
      label: $t('authentication.code'),
      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
    },
  ];
});