vue实现动态禁用

动态禁用表单元素的方法

在Vue中实现动态禁用表单元素可以通过v-bind指令绑定disabled属性，结合响应式数据控制禁用状态。以下是几种常见场景的实现方式：

基础数据绑定

通过v-model和计算属性动态控制禁用状态：

<template>
  <input v-model="inputValue" :disabled="isDisabled">
  <button @click="toggleDisable">切换禁用状态</button>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      disableFlag: false
    }
  },
  computed: {
    isDisabled() {
      return this.disableFlag || this.inputValue.length > 10
    }
  },
  methods: {
    toggleDisable() {
      this.disableFlag = !this.disableFlag
    }
  }
}
</script>

条件禁用

根据表单验证结果动态禁用提交按钮：

<template>
  <input v-model="email" type="email">
  <input v-model="password" type="password">
  <button :disabled="!isFormValid">提交</button>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  computed: {
    isFormValid() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      return emailRegex.test(this.email) && this.password.length >= 6
    }
  }
}
</script>

动态表单禁用

循环渲染表单时根据条件禁用特定项：

<template>
  <div v-for="item in formItems" :key="item.id">
    <input 
      v-model="item.value" 
      :disabled="item.disabled || (item.dependOn && formItems.find(i => i.id === item.dependOn)?.value === 'disable')"
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      formItems: [
        { id: 1, value: '', disabled: false },
        { id: 2, value: '', disabled: true },
        { id: 3, value: '', dependOn: 1 }
      ]
    }
  }
}
</script>

使用自定义指令

创建自定义指令实现更复杂的禁用逻辑：

<template>
  <input v-model="value" v-disable="disableConditions">
</template>

<script>
export default {
  directives: {
    disable: {
      inserted(el, binding) {
        el.disabled = binding.value.some(condition => condition)
      },
      update(el, binding) {
        el.disabled = binding.value.some(condition => condition)
      }
    }
  },
  data() {
    return {
      value: '',
      disableConditions: [
        false,
        () => this.value.length > 5
      ]
    }
  }
}
</script>

组件通信禁用

父组件控制子组件禁用状态：

<!-- 父组件 -->
<template>
  <ChildComponent :disabled="parentDisabled" />
  <button @click="parentDisabled = !parentDisabled">切换子组件禁用</button>
</template>

<script>
export default {
  data() {
    return {
      parentDisabled: false
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <input :disabled="disabled">
</template>

<script>
export default {
  props: {
    disabled: Boolean
  }
}
</script>

动态样式禁用

通过CSS类实现视觉禁用效果：

<template>
  <div 
    :class="{ 'disabled-style': isDisabled }" 
    @click="handleClick"
  >
    可点击元素
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDisabled: true
    }
  },
  methods: {
    handleClick() {
      if (!this.isDisabled) {
        // 处理点击逻辑
      }
    }
  }
}
</script>

<style>
.disabled-style {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
</style>

以上方法可以根据具体业务需求组合使用，实现灵活的动态禁用功能。在Vue 3的组合式API中，这些模式同样适用，只需将选项式API替换为ref和computed等组合式函数即可。