Vue: необходимо отключить все входы на странице - PullRequest
Новая
       17

Vue: необходимо отключить все входы на странице

1 голос
/ 29 апреля 2019

Я занимаюсь разработкой приложения с различными типами лицензий, и в соответствии с лицензией нам необходимо отключить / включить входные данные.

Один из способов - поставить условное значение :disabled для каждого входа, но это очень трудоемко и подвержено ошибкам, поскольку мы можем забыть поместить его на некоторые входы.

Я подумал об использовании директивы типа v-disable-all, которая ищет все входные данные в контейнере и добавляет к ним отключенные.

Я бродил, если есть лучшее решение или уже есть решение, подобное этому?

Ответы [ 2 ]

1 голос
/ 29 апреля 2019

Вы можете сделать что-то вроде этого:

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>
0 голосов
/ 30 апреля 2019

В итоге я создал эту директиву: 

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