实现效果：按照字符数限制用户输入长度，汉字为两个字符，数字和字母为一个字符，超出字符长度限制时，自动去掉多余部分来限制用户输入。

第一种实现方式，自定义指令（update存在不及时调用的情况，放弃）

• vue文件

<template><div><textarea v-limitTextLen="titleMaxLength" v-model="textareaValue"/></div>
</template>
<script>
export default {name: 'Home',data() {return {textareaValue: '',titleMaxLength: 10}}
}
</script>

• js文件
  定义全局自定义指令
  src目录下新建directive文件夹，directive文件夹下新建index.js和limitTextLen.js

index.js内容如下：

import vLimitTextLen from "./limitTextLen";
export default (Vue) => {Vue.directive('limitTextLen', vLimitTextLen)
}

limitTextLen.js内容如下：

function getStringLengthForChinese(val) {let str = val.toString(val)let result = 0for (let i=0;i<str.length;i++) {let temp = str.charCodeAt(i)if ((temp > 0x0001 && temp <= 0x007e) || (temp >= 0xff60 && temp <= 0xff9f)) {result += 1} else {result += 2}}return result
}
export default {update: (el,binding) => {// 超出长度限制if (getStringLengthForChinese(el.value) > binding.value) {let arr = el.value.split('')// 输入字符转成数组，依次推出最后一位元素for (let i=arr.length-1;i>0;i--) {arr = arr.slice(0,i)el.value = arr.join('')// 每推出一个，再次进行长度判断if (getStringLengthForChinese(el.value) <= binding.value) {break}}}}
}

main.js中添加自定义指令

import Vue from 'vue'
import customDirective from './directive/index'
Vue.use(customDirective)new Vue({router,store,render: h => h(App)
}).$mount('#app')

第二种实现方式，watch监听（正常）

• vue文件

<template><div><textarea v-model="textareaValue"/></div>
</template><script>
export default {name: 'Home',data() {return {textareaValue: '',titleMaxLength: 10}},watch: {textareaValue: function() {function getStringLengthForChinese(val) {let str = val.toString(val)let result = 0for (let i=0;i<str.length;i++) {let temp = str.charCodeAt(i)if ((temp > 0x0001 && temp <= 0x007e) || (temp >= 0xff60 && temp <= 0xff9f)) {result += 1} else {result += 2}}return result}let str = this.textareaValueif (getStringLengthForChinese(str) > this.titleMaxLength) {let arr = str.split('')// 输入字符转成数组，依次推出最后一位元素for (let i=arr.length-1;i>0;i--) {arr = arr.slice(0,i)str = arr.join('')// 每推出一个，再次进行长度判断if (getStringLengthForChinese(str) <= this.titleMaxLength) {this.textareaValue = strbreak}}}}}
}
</script>