Блог

Привет, я использую vuetify, и я создал эту директиву, чтобы я мог отключить все дочерние элементы родителя, у которого есть атрибут «Отключить», он идеально работает с некоторыми элементами (например, обычный текст ввода), но когда это тип флажка ( например, переключатель), они не отключаются… может ли vuetify быть причиной этого ? Я напечатал константу «Узлы» , и внутри нее есть флажок. Таким образом, он находит элементы и применяет свойство disabled, но просто не работает

Это директива

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

это html — код переключателя

 lt;div class="col"gt;  lt;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"gt;  lt;div class="v-input__control"gt;  lt;div class="v-input__slot"gt;  lt;div class="v-input--selection-controls__input"gt;  lt;input aria-checked="true" id="input-414" role="switch" type="checkbox" aria-disabled="false" value="true" disabled tabindex="-1"gt;  lt;div class="v-input--selection-controls__ripple primary--text"gt;lt;/divgt;  lt;div class="v-input--switch__track theme--light primary--text"gt;lt;/divgt;  lt;div class="v-input--switch__thumb theme--light primary--text"gt;  lt;!----gt;  lt;/divgt;  lt;/divgt;  lt;label for="input-414" class="v-label theme--light" style="left: 0px; right: auto; position: relative;"gt;Habilitar cartaslt;/labelgt;  lt;/divgt;  lt;div class="v-messages theme--light primary--text"gt;  lt;div class="v-messages__wrapper"gt;lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/divgt;  

и, как вы можете видеть в этой строке

 lt;input aria-checked="true" id="input-414" role="switch" type="checkbox" aria-disabled="false" value="true" disabled tabindex="-1"gt;  

Свойство disabled применяется , оно просто не работает

Я знаю, что у vuetify есть собственное отключенное свойство, которое вы можете добавить к каждому узлу, или это отключенное свойство, используемое в формах. Но я пытался настроить это с помощью директив, потому что есть некоторые элементы, которые мне не нужно отключать.

Если вы хотите активировать эффект пользовательского интерфейса только для v-switch , не меняйте состояние компонента, просто вы можете добавить className= v-input--is-disabled в его Dom v-switch , как показано ниже.:

 Vue.directive('disable-all', {  inserted: function (el) {  el.querySelectorAll('div.v-input.v-input--switch').forEach(item =gt; {  item amp;amp; item.classList.add('v-input--is-disabled')  })  } })  new Vue({  el: '#app',  vuetify: new Vuetify(),  data () {  return {  switches: [true, false],  }  }, }) 

 lt;script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"gt; lt;/scriptgt; lt;script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"gt;lt;/scriptgt; lt;script src="https://cdn.jsdelivr.net/npm/vuetify@2.6.1/dist/vuetify.min.js"gt;lt;/scriptgt; lt;link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" type="text/css"gt; lt;link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet" type="text/css"gt; lt;link href="https://fonts.googleapis.com/css?family=Material Icons" rel="stylesheet" type="text/css"gt; lt;link href="https://cdn.jsdelivr.net/npm/vuetify@2.6.1/dist/vuetify.min.css" rel="stylesheet" type="text/css"gt;  lt;div id="app"gt;  lt;v-app id="inspire"gt;  lt;v-container  class="px-0"  fluid  v-disable-all  gt;  lt;v-switch  v-model="switches[0]"  :label="`Switch 1: ${switches[0].toString()}`"  gt;lt;/v-switchgt;  lt;v-switch  v-model="switches[1]"  :label="`Switch 1: ${switches[1].toString()}`"  gt;lt;/v-switchgt;  lt;/v-containergt;  lt;/v-appgt; lt;/divgt;