新增至節點的停用選項不適用於 vuetify

Question

嗨，我正在使用vuetify，我創建了該指令，這樣我就可以禁用具有“disableAll”屬性的父級的所有子元素，它與某些元素（如普通輸入文字）完美配合，但是當它是一種類型時複選框（如開關）它​​們不會被禁用...... vuetify 可能是原因嗎？ 我列印了“Nodes”常數，其中有一個複選框。所以它正在尋找元素並應用禁用的屬性，但根本不起作用

這是指令

#

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

這是 Switch 的 html

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

正如您在這一行中看到的

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

正在套用禁用的屬性 它根本不起作用

我知道 vuetify 有自己的停用屬性，您可以將其新增到每個節點，或在表單中使用此停用屬性。但我試圖自訂此使用指令，因為有一些元素我不需要停用。

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

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