Vue：需要禁用页面上的所有输入
Posted
技术标签:
【中文标题】Vue：需要禁用页面上的所有输入【英文标题】：Vue: need to disable all inputs on page 【发布时间】：2019-09-18 04:16:28 【问题描述】：我正在开发一个具有不同许可类型的应用，并且根据许可我们需要禁用/启用输入。
一种方法是为每个输入设置一个条件:disabled，但这需要大量工作并且容易出错，因为我们可能会忘记将它放在某些输入上。
我想过使用像v-disable-all 这样的指令来搜索容器下的所有输入并为其添加禁用。
我在徘徊是否有更好的解决方案，或者是否已经有这样的解决方案？
【问题讨论】：
【参考方案1】：现在你只需要将你的字段包裹在<v-form :disabled="variable"></v-form>中
【讨论】：
v-form 不是 Vuejs 指令，而是 Vuetify 组件。 @Elmatou 你是对的。我的错！是因为我习惯了 Vuetify（我的问题，你为什么不使用 Vuetify？？） 因为你使用 Buefy ！只是 CSS 框架的问题 我可以确保你不仅仅是 CSS 的问题；) @pabloRN 虽然这不是 OP 的正确答案，但它对我来说是完美的解决方案，因为我也使用 Vuetify。谢谢！【参考方案2】：我来晚了，但是 html 元素上有一个名为“disabled”的属性，它...禁用树中的每个输入。
<fieldset :disabled="!canEdit">
...
</fieldset>
canEdit 可以是计算属性或任何你想要的。
【讨论】：
【参考方案3】：我最终创建了这个指令：
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;
);
);
【讨论】：
我说的就这么多？不知道你为什么不只是打勾，但很高兴你把它整理好了。 “我想到了使用像 v-disable-all 这样的指令来搜索容器下的所有输入并为其添加禁用。”这是我的问题的引述，然后我问是否有另一种更好的方法。你只是告诉我做我想做的事。另外，您是用简单的 JS 编写的，而不是 Vue 指令，所以我为您的努力竖起了大拇指，但您并没有真正回答我的问题。【参考方案4】：你可以这样做：
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>【讨论】：
他可以编写一个指令并将其附加到每个输入或完全如上所示的父级。 “一种方法是为每个输入设置一个条件 :disabled ，但这需要大量工作并且容易出错，因为我们可能会忘记将它放在某些输入上。”这涵盖了父级中的所有输入。 正如我在问题中提到的，我知道这个解决方案，我正在寻找一种方法来避免它 您可以编写一个监视函数，该函数具有许可证数组以及在选择许可证和更改许可证时应该可用的输入。但同样，您必须将每个输入添加到数组中。我想不出其他任何事情。 如果模型上的任何内容发生更改，这是否会停止工作，因为 Vue 会重新生成 UI？ “输入”选择器不考虑 SELECT 标记以上是关于Vue：需要禁用页面上的所有输入的主要内容，如果未能解决你的问题，请参考以下文章
禁用站点上的所有 AJAX / Websocket 数据请求？
php [WordPress] [WP Rocket]禁用Automattic AMP插件创建的AMP页面上的所有WP Rocket功能。