指令限制字符的长度 ¶
show code
// 计算当前输入的字节 export function strlen(str) { var len = 0 for (var i = 0; i < str.length; i++) { var c = str.charCodeAt(i) // 单字节加1 if ((c >= 0x0001 && c <= 0x007e) || (c <= 0xff9f && c >= 0xff60)) { len++ } else { len += 2 } } return len } // 计算还可输入的字节 export function maxlen(str, len = 60) { for (var i = 0; i < str.length; i++) { var c = str.charCodeAt(i) // 单字节加1 if ((c >= 0x0001 && c <= 0x007e) || (c <= 0xff9f && c >= 0xff60)) { // ... } else { len -= 1 } } return len } function event(name, arg) { var evt = document.createEvent('Event') evt.initEvent(name, true, true) if (name === 'dispatch' && arg) { let { textLength, leftLength } = arg evt.textLength = textLength evt.leftLength = leftLength } return evt } export default { update: function(el, binding) { // 对input元素有效 if (el.tagName.toLocaleUpperCase() !== 'INPUT') { var els = el.getElementsByTagName('input') if (els.length !== 1) { throw new Error( 'v-charslimit directive requires 1 input, found ' + els.length ) } else { el = els[0] } } // 监听输入事件 el.oninput = e => { if (!e.isTrusted) return // 当前的值 let value = el.value // 当前输入的字符长度 let textLength = strlen(value) // 获取配置 const { maxLength = 10 } = binding.value // 剩余字符长度 let leftLength = parseInt((maxLength - textLength) / 2) if (textLength > maxLength) { // 因为不知道用户输入的每个字是多少字符 // 每次从末尾删除1个字符 el.value = el.value.substring(0, el.value.length - 1) el.dispatchEvent(event('input')) } el.dispatchEvent( // textLength 当前字符长度 // leftLength 还剩字符长度 event('dispatch', { textLength: strlen(el.value), leftLength }) ) } }, }
复制成功
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
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
use
<template> <a-input v-charslimit="{ maxLength: 30, }" v-model="val" ref="input" @dispatch="handle" ></a-input> 已输入{{ textLength }} 剩余{{ leftLength }} </template> <script> export default { data() { return { val: '', textLength: '', leftLength: 0, } }, handle(e) { this.textLength = e.textLength this.leftLength = e.leftLength }, } </script>
复制成功
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
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
WARNING
除了 el
之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset
来进行。