Hola, estoy usando vuetify y creé esa directiva para poder deshabilitar todos los elementos secundarios del padre que tiene el atributo "disableAll". Funciona perfectamente con algunos elementos (como el texto de entrada normal), pero cuando es un tipo de casilla de verificación ( como un interruptor) no se deshabilitan ... ¿podría ser vuetify la razón de eso? Imprimí la constante de "Nodos" y dentro de eso está la casilla de verificación. Entonces está encontrando los elementos y aplica la propiedad deshabilitada pero simplemente no funciona
esta es la directiva
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; } }); } },este es el html de un 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>y como se puede ver en esta linea
<input aria-checked="true" id="input-414" role="switch" type="checkbox" aria-disabled="false" value="true" disabled tabindex="-1">La propiedad deshabilitada se está aplicando, simplemente no funciona
Sé que vuetify tiene su propia propiedad deshabilitada que puede agregar a cada nodo, o esta propiedad deshabilitada que se usa en los formularios. Pero estaba tratando de personalizar esto usando directivas porque hay algunos elementos que no necesito tener deshabilitados.
Si solo desea activar el efecto de interfaz de usuario para v-switch , no cambie el estado del componente, simplemente puede agregar className= v-input--is-disabled en su Dom de v-switch como se muestra a continuación:
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>