嗨,我正在使用 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 有自己的禁用属性,您可以将其添加到每个节点,或者在表单中使用此禁用属性。但我试图自定义此使用指令,因为有一些元素我不需要禁用。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
如果只想激活
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], } }, })