vue监控textarea中单词数（不是字符数）不能超过30个单词且单词数过20个wordcount后数字变红

Question

Word count:

{{counter}}

Cut Copy Paste

export default { data() { return { counter: 0, loading: false, textarea: '', text: '', textMaxLength: 29, isDisable: false, }; }, methods:{ onDisabledTextarea(){ // 5min后禁用文本域 setTimeout(() => { this.isDisable = true; }, 1000 * 300); }, copyToClipboard(elemRef) { let target; let succeed = false; if(this.$refs[elemRef]){ target = this.$refs[elemRef]; // 选择内容 let currentFocus = document.activeElement; target.focus(); target.setSelectionRange(0, target.value.length); // 复制内容 try { succeed = document.execCommand("copy"); } catch (e) { succeed = false; } // 恢复焦点 if (currentFocus && typeof currentFocus.focus === "function") { currentFocus.focus(); } } return succeed; }, /* descInput(){ var txtVal = this.text.length; this.counter = txtVal; },*/ onKeyup(){ let val = this.text.split(" "); var count=0 for(var i=1;i<this.text.length;i++){ if(text.charAt(i)==' ') { this.count++ } } } }, watch:{ }, computed: { }, directives: { sliceString: { update(el, binding) { if (el.value.length >= binding.value) { el.value = el.value.slice(0, binding.value) } } } }, }

主要是onKeyup这个函数的编写和调用
求大神帮忙看一下

Answer 1

之前有遇到过类似的需求，暂时没有发现在input里面调整样式的方法，但是可以提供我这边的解决方案
使用的名为quill的富文本编辑器
https://www.kancloud.cn/liuwave/quill/1409369
可以监听输入（on）事件后使用改变文字样式setContents或insertText具体见官方文档