• 指令限制字符的长度
  • Artiely
  • #vue
  • 2020-06-23
  • 342
  • 2 min read
  • loading...

指令限制字符的长度

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

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

WARNING

除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

参考:https://cn.vuejs.org/v2/guide/custom-directive.html