Vue.js中如何在用户输入时显示'typing'提示文本？

Vue3 组合式API实现 #

核心思路是用响应式变量绑定占位符，监听输入事件切换文本，配合防抖处理加载状态：

• 定义响应式变量placeholderText，初始设为默认占位符
• 监听输入框input事件，触发时立即把占位符改成'typing'
• 用防抖延迟切换到'loading'，模拟加载完成后再恢复原占位符
• 失焦时清除定时器，恢复默认占位符

<template>
  <input 
    type="text" 
    :placeholder="placeholderText"
    @input="handleInput"
    @blur="handleBlur"
  />
</template>

<script setup>
import { ref } from 'vue'

const placeholderText = ref('请输入内容')
let debounceTimer = null

const handleInput = () => {
  placeholderText.value = 'typing'
  // 清除之前的定时器，避免重复触发
  clearTimeout(debounceTimer)
  // 用户停止输入800ms后切换到loading状态
  debounceTimer = setTimeout(() => {
    placeholderText.value = 'loading'
    // 模拟加载完成，1秒后恢复默认占位符
    setTimeout(() => {
      placeholderText.value = '请输入内容'
    }, 1000)
  }, 800)
}

const handleBlur = () => {
  clearTimeout(debounceTimer)
  placeholderText.value = '请输入内容'
}
</script>

Vue2 选项式API实现 #

逻辑和Vue3一致，写法适配选项式API：

<template>
  <input 
    type="text" 
    :placeholder="placeholderText"
    @input="handleInput"
    @blur="handleBlur"
  />
</template>

<script>
export default {
  data() {
    return {
      placeholderText: '请输入内容',
      debounceTimer: null
    }
  },
  methods: {
    handleInput() {
      this.placeholderText = 'typing'
      clearTimeout(this.debounceTimer)
      this.debounceTimer = setTimeout(() => {
        this.placeholderText = 'loading'
        setTimeout(() => {
          this.placeholderText = '请输入内容'
        }, 1000)
      }, 800)
    },
    handleBlur() {
      clearTimeout(this.debounceTimer)
      this.placeholderText = '请输入内容'
    }
  }
}
</script>

扩展调整 #

• 要是不需要loading状态，直接删掉防抖后的loading和恢复逻辑就行
• 防抖时间可以根据需求改，比如改成500ms更灵敏
• 多输入框场景可以封装成自定义组件，把默认占位符、typing/loading文本作为props传入，复用逻辑

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