Vue:需要禁用页面上的所有输入
Vue: need to disable all inputs on page
我正在开发一个具有不同许可证类型的应用程序,根据许可证我们需要 disable/enable 输入。
一种方法是为每个输入设置条件 :disabled
,但这需要大量工作并且容易出错,因为我们可能会忘记将其放在某些输入上。
我想到了使用像 v-disable-all
这样的指令来搜索容器下的所有输入并为它们添加禁用。
我在徘徊是否有更好的解决方案或者是否已经有这样的解决方案?
你可以这样做:
let elems = document.getElementById('parentDiv').getElementsByTagName('input');
这将为您提供一个父项中的所有输入,然后您可以运行一个简单的 for 循环来遍历它们并将每个输入设置为禁用。
像这样:
for(let i = 0; i < elems.length; i++) {
elems[i].disabled = true;
}
希望这有助于您走上正确的道路。
let elems = document.getElementById('someid').getElementsByTagName('input');
console.log(elems);
for(let i = 0; i < elems.length; i++) {
elems[i].disabled = true;
}
<html>
<body>
<div id="someid">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
</body>
</html>
我最终创建了这个指令:
import Vue from "vue";
Vue.directive("disable-all", {
// When all the children of the parent component have been updated
componentUpdated: function(el, binding) {
if (!binding.value) return;
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;
}
});
}
});
我来晚了一点,但是 HTML 元素上有一个名为“disabled”的属性,它...禁用树中的每个输入。
<fieldset :disabled="!canEdit">
...
</fieldset>
canEdit
可以是计算的 属性 或任何你想要的。
现在您只需要将字段包裹在 <v-form :disabled="variable"></v-form>
中
我正在开发一个具有不同许可证类型的应用程序,根据许可证我们需要 disable/enable 输入。
一种方法是为每个输入设置条件 :disabled
,但这需要大量工作并且容易出错,因为我们可能会忘记将其放在某些输入上。
我想到了使用像 v-disable-all
这样的指令来搜索容器下的所有输入并为它们添加禁用。
我在徘徊是否有更好的解决方案或者是否已经有这样的解决方案?
你可以这样做:
let elems = document.getElementById('parentDiv').getElementsByTagName('input');
这将为您提供一个父项中的所有输入,然后您可以运行一个简单的 for 循环来遍历它们并将每个输入设置为禁用。
像这样:
for(let i = 0; i < elems.length; i++) {
elems[i].disabled = true;
}
希望这有助于您走上正确的道路。
let elems = document.getElementById('someid').getElementsByTagName('input');
console.log(elems);
for(let i = 0; i < elems.length; i++) {
elems[i].disabled = true;
}
<html>
<body>
<div id="someid">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
</body>
</html>
我最终创建了这个指令:
import Vue from "vue";
Vue.directive("disable-all", {
// When all the children of the parent component have been updated
componentUpdated: function(el, binding) {
if (!binding.value) return;
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;
}
});
}
});
我来晚了一点,但是 HTML 元素上有一个名为“disabled”的属性,它...禁用树中的每个输入。
<fieldset :disabled="!canEdit">
...
</fieldset>
canEdit
可以是计算的 属性 或任何你想要的。
现在您只需要将字段包裹在 <v-form :disabled="variable"></v-form>