Lumpuhkan pilihan yang ditambahkan pada nod tidak berfungsi dengan vuetify

Question

Hai, saya menggunakan vuetify, saya mencipta arahan ini supaya saya boleh melumpuhkan semua elemen anak ibu bapa dengan atribut "disableAll", ia berfungsi dengan sempurna dengan beberapa elemen seperti teks input biasa, tetapi apabila ia adalah Apabila jenis kotak semak ( seperti suis) mereka tidak hilang upaya... bolehkah vuetify menjadi puncanya? Saya mencetak pemalar "Nod", yang mempunyai kotak pilihan. Jadi ia mencari elemen dan menggunakan atribut yang dilumpuhkan, tetapi ia tidak berfungsi sama sekali

Ini arahan

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

Ini ialah html 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>

Seperti yang anda lihat dalam baris ini

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

Menggunakan atribut yang dilumpuhkan Tak berkesan langsung

Saya tahu bahawa vuetify mempunyai atribut yang dilumpuhkan sendiri yang boleh anda tambahkan pada setiap nod atau gunakan atribut yang dilumpuhkan ini dalam borang anda. Tetapi saya cuba menyesuaikan ini menggunakan arahan kerana terdapat beberapa elemen yang saya tidak perlu lumpuhkan.

Answer 1

Jika anda hanya mahu mengaktifkan v-switch 的 UI 效果，不要更改组件状态，只需将 className=v-input--is-disabled 添加到 v-switch di Dom, seperti yang ditunjukkan di bawah:

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">