Question

我正在开发具有不同许可证类型的应用，并且根据许可证，我们需要禁用/启用输入。

一种方法是为每个输入放置一个条件:disabled，但这是很多工作并且容易出错，因为我们可能会忘记将其放在某些输入上。

我考虑过使用v-disable-all之类的指令来搜索容器下的所有输入，并为它们添加禁用的功能。

如果有更好的解决方案，或者是否已经有这样的解决方案，我在徘徊吗？

Answer 1

您可以执行以下操作：

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>

Answer 2

我来晚了一点，但是HTML元素上有一个名为“ disabled”的属性，该属性...禁用树中的每个输入。

((JavascriptExecutor) driver).executeScript("window.scrollTo(0, document.body.scrollHeight)");

<fieldset :disabled="!canEdit"> ... </fieldset>可以是计算属性或任何您想要的属性。

Answer 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;
      }
    });
  }
});

Answer 4

现在，您只需要将字段包装在<v-form :disabled="variable"></v-form>

中

Vue：需要禁用页面上的所有输入

4 个答案: