Vue中如何批量禁用输入框？基于许可证类型的方案咨询

Great question! Dealing with repetitive :disabled bindings across dozens of inputs is not just tedious—it’s a recipe for missed fields and maintenance headaches. Let’s walk through a few practical, battle-tested approaches that’ll solve this cleanly, including your custom directive idea plus some even simpler options.

1. Use Native HTML <fieldset> (The Simplest Fix) #

You might not need custom code at all! The native <fieldset> element has a built-in disabled attribute that automatically disables every form control inside it (inputs, selects, buttons, etc.). This is browser-native, zero extra JS, and super easy to implement:

<fieldset :disabled="!isLicenseActive">
  <legend>Premium Features</legend>
  <div class="form-group">
    <label>Premium Setting 1</label>
    <input type="text" v-model="premiumSetting1">
  </div>
  <div class="form-group">
    <label>Premium Setting 2</label>
    <select v-model="premiumSetting2">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
    </select>
  </div>
  <button @click="savePremiumSettings">Save Changes</button>
</fieldset>

Pros: No custom code, works out of the box, accessible (screen readers recognize disabled fieldsets).
Cons: Minor styling tweaks might be needed (some browsers gray out the fieldset border by default), and you can’t nest fieldsets if you need granular control.

2. Custom v-disable-all Directive (Your Original Idea) #

If you need more flexibility than <fieldset> provides (like targeting specific element types, or applying to non-form containers), a custom directive is a great fit. Here’s a polished Vue 3 implementation that’s efficient and reusable:

// Register globally in main.js (or locally in a component)
app.directive('disable-all', {
  // Cache controls on mount to avoid repeated DOM queries
  mounted(el, binding) {
    el._controls = el.querySelectorAll('input, select, textarea, button, [tabindex]');
    this.updateDisabledState(el, binding.value);
  },
  updated(el, binding) {
    // Only update if the value actually changed
    if (binding.oldValue !== binding.value) {
      this.updateDisabledState(el, binding.value);
    }
  },
  // Helper method to set disabled state
  updateDisabledState(el, isDisabled) {
    el._controls.forEach(control => {
      control.disabled = isDisabled;
      // Optional: Add a CSS class for styling
      control.classList.toggle('disabled-control', isDisabled);
    });
  },
  // Clean up cached controls on unmount
  unmounted(el) {
    delete el._controls;
  }
});

Then use it on any container:

<div v-disable-all="!isLicenseActive">
  <input type="text" placeholder="Regular field">
  <button>Standard Action</button>
  <div class="custom-control">
    <input type="checkbox" id="toggle">
    <label for="toggle">Custom Toggle</label>
  </div>
</div>

Pros: Flexible (target any elements), reusable across your app, easy to extend (add custom selectors via directive arguments).
Cons: Requires writing and maintaining a custom directive (though it’s a one-time setup).

3. Reusable Wrapper Component #

For a more component-driven approach (great if you want to add extra UI like "License Required" banners), create a wrapper component that encapsulates the disable logic:

<!-- LicenseProtected.vue -->
<template>
  <div class="license-protected">
    <!-- Optional: Show a banner when disabled -->
    <div v-if="!isLicenseValid" class="license-lockout-banner">
      This feature requires an active license.
    </div>
    <fieldset :disabled="!isLicenseValid">
      <slot></slot>
    </fieldset>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  licenseState: {
    type: String,
    required: true,
    validator: (value) => ['active', 'expired', 'trial'].includes(value)
  }
});

const isLicenseValid = computed(() => props.licenseState === 'active');
</script>

<style scoped>
.license-lockout-banner {
  background-color: #fff3cd;
  color: #856404;
  padding: 0.5rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

fieldset:disabled {
  opacity: 0.7;
}
</style>

Use it anywhere in your app:

<LicenseProtected :license-state="currentLicense">
  <input type="text" v-model="premiumData">
  <button @click="runPremiumAction">Run Premium Task</button>
</LicenseProtected>

Pros: Encapsulates all license-related logic in one place, easy to add UI feedback, highly reusable.
Cons: Adds a small component to your codebase (but it’s worth it for maintainability).

Which one should you choose? Start with <fieldset> if it fits your layout—it’s the fastest, most accessible option. If you need more control, go with the custom directive. For larger apps where you want to standardize license-locked UI, the wrapper component is the way to go.

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