L'option de désactivation ajoutée au nœud ne fonctionne pas avec vuetify

Question

Salut, j'utilise vuetify, j'ai créé cette directive pour pouvoir désactiver tous les éléments enfants d'un parent avec l'attribut "disableAll", elle fonctionne parfaitement avec certains éléments comme le texte de saisie normal, mais quand c'est le cas, lorsqu'un type de case à cocher ( comme un interrupteur), ils ne sont pas désactivés... vuetify pourrait-il en être la cause ? J'ai imprimé la constante "Nodes", qui comporte les cases à cocher. Il s'agit donc de trouver l'élément et d'appliquer l'attribut désactivé, mais ça ne fonctionne pas du tout

C'est la commande

directives: {
        
    disableAll: {

      componentUpdated: (el) => {
        const tags = ['input', 'button', 'textarea', 'select'];
        tags.forEach(tagName => {
          const nodes = el.getElementsByTagName(tagName);
          for (let i = 0; i < nodes.length; i++) {
            nodes[i].disabled = true;
            nodes[i].tabIndex = -1;
          }
        });
      }
    },

C'est le HTML de Switch

<div class="col">
   <div class="v-input my-0 v-input--is-label-active v-input--is-dirty theme--light v-input--selection-controls v-input--switch primary--text">
      <div class="v-input__control">
         <div class="v-input__slot">
            <div class="v-input--selection-controls__input">
               <input aria-checked="true" id="input-414" role="switch" type="checkbox" aria-disabled="false" value="true" disabled tabindex="-1">
               <div class="v-input--selection-controls__ripple primary--text"></div>
               <div class="v-input--switch__track theme--light primary--text"></div>
               <div class="v-input--switch__thumb theme--light primary--text">
                  <!---->
               </div>
            </div>
            <label for="input-414" class="v-label theme--light" style="left: 0px; right: auto; position: relative;">Habilitar cartas</label>
         </div>
         <div class="v-messages theme--light primary--text">
            <div class="v-messages__wrapper"></div>
         </div>
      </div>
   </div>
</div>

Comme vous pouvez le voir dans cette ligne

<input aria-checked="true" id="input-414" role="switch" type="checkbox" aria-disabled="false" value="true" disabled tabindex="-1">

Application des attributs désactivés Ça ne marche pas du tout

Je sais que vuetify a son propre attribut désactivé que vous pouvez ajouter à chaque nœud ou utiliser cet attribut désactivé dans votre formulaire. Mais j'essaie de personnaliser cela à l'aide de directives car il y a certains éléments que je n'ai pas besoin de désactiver.

Answer 1

Si vous souhaitez activer v-switch 的 UI 效果，不要更改组件状态，只需将 className=v-input--is-disabled 添加到 v-switch uniquement dans le Dom, comme indiqué ci-dessous :

Vue.directive('disable-all', {
  inserted: function (el) {
    el.querySelectorAll('div.v-input.v-input--switch').forEach(item => {
      item && item.classList.add('v-input--is-disabled')
    })
  }
})

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      switches: [true, false],
    }
  },
})

sssccc
sssccc
sssccc

[email protected]/css/materialdesignicons.min.css"  rel="stylesheet" type="text/css">

[email protected]/dist/vuetify.min.css"  rel="stylesheet" type="text/css">