Mal angenommen man möchte alle Felder auf einer Seite deaktivieren. Man könnte input für input durchgehen und mit :disabled=”isEditable” das Feld deaktivieren.
Oder man schreibt eine Custom Directive, die diese Logik abbildet: https://vuejs.org/v2/guide/custom-directive.html
Möchte man das global haben:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Vue.directive("disableall", { bind: function (el, binding) { if ((!binding.hasOwnProperty('value')) || binding.value) { 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; } }); } } }); |
Oder per Instanz:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
directives: { disableall: { // directive definition bind: function (el, binding) { if ((!binding.hasOwnProperty('value')) || binding.value) { 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; } }); } } } } |
Eingebunden wird das nun mit.
|
1 2 3 |
<div v-disableall="!isEditable"> ... </div> |
oder
|
1 2 3 |
<div v-disableall="true"> ... </div> |
oder ohne Bedingung
|
1 2 3 |
<div v-disableall> ... </div> |
Login