Это все directive js помещаем export const setColor bind el binding vn

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
// Это все в directive.js помещаем
export const setColor = {
bind(el, binding, vnode) {
el.style.color = binding.value;
}
};
export const setBgColor = {
bind(el, binding, vnode) {
el.style.backgroundColor = binding.value;
}
};
export const uppercase = {
bind: function(el, binding, vnode) {
return el.toUpperCase();
},
update(newValue, oldValue) {
console.log(1, newValue.value);
console.log(2, oldValue);
// do something based on the updated value
// this will also be called for the initial value
}
};
export const valid = {
bind(el, binding) {
el.addEventListener("keydown", e => {
// delete, backpsace, tab, escape, enter,
let special = [46, 8, 9, 27, 13];
if (binding.modifiers["decimal"]) {
// decimal(numpad), period
special.push(110, 190);
}
// special from above
if (
special.indexOf(e.keyCode) !== -1 ||
// Ctrl+A
(e.keyCode === 65 && e.ctrlKey === true) ||
// Ctrl+C
(e.keyCode === 67 && e.ctrlKey === true) ||
// Ctrl+X
(e.keyCode === 88 && e.ctrlKey === true) ||
// home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39) ||
(e.keyCode === 222 && e.ctrlKey === false)
) {
return; // allow
}
if (
binding.modifiers["alpha"] &&
// a-z/A-Z
(e.keyCode >= 65 && e.keyCode <= 90)
) {
return; // allow
}
if (
binding.modifiers["number"] &&
// number keys without shift
((!e.shiftKey && (e.keyCode >= 48 && e.keyCode <= 57)) ||
// numpad number keys
(e.keyCode >= 96 && e.keyCode <= 105))
) {
return; // allow
}
// otherwise stop the keystroke
e.preventDefault(); // prevent
}); // end addEventListener
} // end bind
}; // end directive
// это в main.js
import { setColor, setBgColor, valid, uppercase } from "./directives/directive";
Vue.directive("setcolor", setColor); // input v-setcolor="'#ccc'"
Vue.directive("bgcolor", setBgColor); // input v-bgcolor="'#ccc'"
Vue.directive("uppercase", uppercase); // input v-uppercase="'#ccc'"
/*
! Vue.directive("valid", valid);
Declaration:
* number and decimal = input(v-valid.number.decimal type='number')
* alphanumeric (no decimal) = input(v-valid.alpha.number type='text')
* alpha only = input(v-valid.alpha type='text')
*/
Vue.directive("valid", valid);