menduner/src/views/login/components/passwordPage.vue

<template>
  <v-form ref="passwordForm" @submit.prevent>
    <v-text-field v-model="loginData.phone" placeholder="请输入手机号" color="primary" variant="outlined" density="compact" :rules="phoneRules" validate-on="input">
        <template v-slot:prepend-inner>
          <span class="d-flex">
            <v-icon icon="mdi-cellphone" size="20"></v-icon>
            <span class="d-flex" id="menu-activator">
              <span class="phone-number">{{ currentArea }}</span>
              <v-icon size="20">mdi-chevron-down</v-icon>
            </span>
            <v-menu activator="#menu-activator">
              <v-list>
                <v-list-item v-for="(item, index) in items" :key="index" :value="index" @click="handleChangeCurrentArea(item)">
                  <v-list-item-title>{{ item.label }}</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
          </span>
        </template>
      </v-text-field>
    <v-text-field
      v-model="loginData.password"
      placeholder="请输入密码" 
      variant="outlined" 
      density="compact"
      color="primary"
      prepend-inner-icon="mdi-lock-outline" 
      :append-inner-icon="passwordType ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
      :type="passwordType ? 'text' : 'password'"
      :rules="[v=> !!v || '请填写密码']"
      @click:append-inner="passwordType = !passwordType"
    ></v-text-field>
  </v-form>
</template>

<script setup name="passwordPage">
import { ref, reactive } from 'vue'
defineOptions({ name: 'password-form' })
const passwordType = ref(false)

const phoneRules = ref([
  value => {
    if (value) return true
    return '请输入手机号'
  },
  value => {
    if (value?.length <= 11 && /^1[3456789]\d{9}$/.test(value)) return true
    return '请输入正确的手机号码'
  }
])

// 手机号区域
const currentArea = ref('0086')
const items = [
  { label: '中国大陆-0086', value: '0086' }
]
const handleChangeCurrentArea = (e) => {
  currentArea.value = e.value
}

const loginData = reactive({
  phone: '13229740091',
  password: '1111'
})

const passwordForm = ref()
defineExpose({
  loginData,
  passwordForm
})
</script>