Vue3中聚焦时将输入框类型从text改为date的代码实现方案

你的代码没法生效主要有两个问题：一是Vue3模板里不能用this直接访问属性，二是直接修改type不是响应式操作，Vue不会触发视图更新。按照下面的步骤改就能实现需求：

1. 定义响应式的类型变量
   在组件的<script setup>里声明一个响应式变量，用来控制输入框的类型：

   import { ref } from 'vue'
   const inputType = ref('text')
   

2. 绑定类型变量到输入框
   把输入框的type属性改成绑定到这个响应式变量，同时调整事件处理逻辑：

   <input 
     :type="inputType" 
     name="insurance_expires_at" 
     v-model="form.provider.insurance_expires_at"
     :validation="$v.provider.insurance_expires_at" 
     placeholder="MM/DD/YYYY"
     @focus="inputType = 'date'"
     @blur="inputType = 'text'"
   />
   

3. 处理日期格式兼容（可选但重要）
   因为date类型输入框返回的是ISO格式字符串（比如2024-12-31），而text状态下用户输入的是MM/DD/YYYY格式，为了保证v-model的值统一，建议在赋值时做格式转换：

   // 获取焦点时，把MM/DD/YYYY格式转成ISO格式适配date控件
   const handleFocus = () => {
     if (form.provider.insurance_expires_at) {
       const [month, day, year] = form.provider.insurance_expires_at.split('/')
       form.provider.insurance_expires_at = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
     }
     inputType.value = 'date'
   }
   
   // 失去焦点时，把ISO格式转成MM/DD/YYYY格式
   const handleBlur = () => {
     if (form.provider.insurance_expires_at) {
       const date = new Date(form.provider.insurance_expires_at)
       const month = String(date.getMonth() + 1).padStart(2, '0')
       const day = String(date.getDate()).padStart(2, '0')
       const year = date.getFullYear()
       form.provider.insurance_expires_at = `${month}/${day}/${year}`
     }
     inputType.value = 'text'
   }
   

   然后把事件改成绑定这些处理函数：

   <input 
     :type="inputType" 
     name="insurance_expires_at" 
     v-model="form.provider.insurance_expires_at"
     :validation="$v.provider.insurance_expires_at" 
     placeholder="MM/DD/YYYY"
     @focus="handleFocus"
     @blur="handleBlur"
   />
   

这样修改后，输入框在获取焦点时会切换成date类型，弹出系统日期选择器，失去焦点时切回text类型，保持placeholder的显示格式，同时保证v-model的值格式统一。

内容的提问来源于stack exchange，提问作者Prof Nami