Dem Knoten hinzugefügte Deaktivierungsoption funktioniert nicht mit vuetify

Question

Hallo, ich verwende vuetify. Ich habe diese Direktive erstellt, damit ich alle untergeordneten Elemente eines übergeordneten Elements mit dem Attribut „disableAll“ deaktivieren kann. Sie funktioniert perfekt mit einigen Elementen wie normalem Eingabetext, aber wenn es sich um eine Art Kontrollkästchen handelt ( wie ein Schalter) werden sie nicht deaktiviert... könnte vuetify die Ursache sein? Ich habe die Konstante „Nodes“ gedruckt, die die Kontrollkästchen enthält. Es geht also darum, das Element zu finden und das Attribut „disabled“ anzuwenden, aber es funktioniert überhaupt nicht

Das ist der Befehl

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;
          }
        });
      }
    },

Dies ist der HTML-Code von 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>

Wie Sie in dieser Zeile sehen können

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

Anwenden deaktivierter Attribute Es funktioniert überhaupt nicht

Ich weiß, dass vuetify ein eigenes deaktiviertes Attribut hat, das Sie zu jedem Knoten hinzufügen oder dieses deaktivierte Attribut in Ihrem Formular verwenden können. Aber ich versuche, dies mithilfe von Direktiven anzupassen, da es einige Elemente gibt, die ich nicht deaktivieren muss.

Answer 1

如果只想激活 v-switch 的 UI 效果，不要更改组件状态，只需将 className=v-input--is-disabled 添加到 v-switch 的 Dom 中，如下演示：

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],
    }
  },
})

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

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