9

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

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

我想过使用这样的指令v-disable-all来搜索容器下的所有输入并为它们添加禁用。

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

4

4 回答 4

10

我最终创建了这个指令：

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;
      }
    });
  }
});
于 2019-04-30T07:07:54.640 回答
6

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

<fieldset :disabled="!canEdit">
  ...
</fieldset>

canEdit可以是计算属性或您想要的任何东西。

于 2020-06-20T17:05:33.080 回答
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>

于 2019-04-29T14:10:31.387 回答
1

现在你只需要把你的字段包装在里面<v-form :disabled="variable"></v-form>

于 2020-08-10T01:57:20.493 回答