实现效果：按照字符数限制用户输入长度，汉字为两个字符，数字和字母为一个字符，超出字符长度限制时，自动去掉多余部分来限制用户输入。
第一种实现方式，自定义指令（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>
如果觉得《input输入框按照字符数限制输入》对你有帮助，请点赞、收藏，并留下你的观点哦！
