javascript - 添加到节点的禁用选项无法与 vuetify 一起使用

Question

您好，我正在使用 vuetify 并创建了该指令，因此我可以禁用具有“disableAll”属性的父级的所有子元素，它与某些元素(如普通输入文本)完美配合，但当它是一种类型时复选框(就像一个开关)他们不会被禁用......可能是 vuetify 的原因吗？我打印了“节点”const，里面有复选框。所以它正在查找元素并应用禁用属性但根本不起作用

这是指令

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

正在应用 disabled 属性它根本不起作用

我知道 vuetify 有自己的 Disabled 属性，你可以将它添加到每个节点，或者在表单中使用这个 disabled 属性。但我试图使用指令自定义它，因为有些元素我不需要禁用。

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

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.6.1/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"  rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css"  rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Material+Icons"  rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.6.1/dist/vuetify.min.css"  rel="stylesheet" type="text/css">

<div id="app">
  <v-app id="inspire">
    <v-container
      class="px-0"
      fluid
      v-disable-all
    >
      <v-switch
        v-model="switches[0]"
        :label="`Switch 1: ${switches[0].toString()}`"
      ></v-switch>
      <v-switch
        v-model="switches[1]"
        :label="`Switch 1: ${switches[1].toString()}`"
      ></v-switch>
    </v-container>
  </v-app>
</div>