如何在Vue.js中实现点击切换输入框禁用与启用状态

现有代码存在3个核心问题：

1. 处于disabled状态的输入框默认会拦截所有鼠标交互事件，直接给输入框绑定点击事件无法触发，自然无法切换启用状态
2. 你定义的isDisabled计算属性没有实际绑定到输入框的disabled属性上，相当于没有生效
3. 缺少全局点击监听逻辑来判断是否点击了输入框外部区域

第一步：调整模板代码 #

给输入框外层套一个容器来承接点击事件，同时给输入框绑定ref用于后续判断点击区域：

<div class="input-wrapper" @click.stop="enableInput">
  <input 
    ref="amountInput"
    id="cart_amount" 
    type="number" 
    min="1" 
    class="col-1 form-control cart-input" 
    v-model="item.amount" 
    :disabled="disabled"
  >
</div>

这里的@click.stop是为了阻止点击事件冒泡到全局，避免点击输入框时触发外部点击的禁用逻辑。

第二步：调整逻辑代码 #

补充全局点击监听和对应的切换方法：

data() {
  return {
    disabled: true,
  };
},
mounted() {
  // 挂载全局点击监听，判断是否点击外部
  document.addEventListener('click', this.handleClickOutside)
},
beforeUnmount() {
  // 组件销毁前移除监听，避免内存泄漏
  document.removeEventListener('click', this.handleClickOutside)
},
methods: {
  enableInput() {
    // 点击输入框区域时启用输入框
    this.disabled = false
    // 启用后自动聚焦到输入框，优化体验
    this.$nextTick(() => {
      this.$refs.amountInput.focus()
    })
  },
  handleClickOutside(e) {
    // 已经是禁用状态不用处理
    if (this.disabled) return
    // 判断点击目标是否不在输入框范围内
    if (!this.$refs.amountInput.contains(e.target)) {
      this.disabled = true
    }
  }
}

你之前定义的isDisabled计算属性如果没有其他地方使用可以直接删除，当前逻辑直接用disabled变量即可满足需求。

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