ant design vue 默认的 textarea 组件是没有字数统计功能的,但有时有需要,下面给大家介绍一下怎么让textarea组件有“字数统计”功能,希望对大家有所帮助!

推荐一个实用的“字数统计”功能:Ant Design Vue 默认的 Textarea 组件是没有字数统计功能的,但这个功能又是很常见的,所以就做了一个简单的二次封装。其实这个功能很简单,就是在不改变原组件的情况下,右下角加上一个计数文本,用定位处理一下就行。
默认的 textarea
官网地址:https://antdv.com/components/input-cn/
基本使用如下所示:
立即学习“前端免费学习笔记(深入)”;

专业的企业网站管理系统,专为中小企业公司开发设计,能让企业轻松管理网站,强大的后台功能,可随意增减栏目,有多种企业常用的栏目模块功能。多级分类,管理文章,图片,文字编辑,留言管理,人才,软件下载等。可让企业会上网就会管理网站,轻松学会使用。 系统功能模块有:单页(如企业简介,联系内容等单页图文)、文章(新闻)列表、产品(图片、订单、规格说明等)、图片、下载、人才招聘、视频、机构组识、全国销售网点图
改造后的 textarea
$attrs和v-model实现原理可查看上一篇文章封装原理解析(https://juejin.cn/post/7003280618473668639#heading-3)
// 文本框// 字数统计 {{ textLength }}/{{ $attrs.maxLength }}
使用也很简单,和正常的 textarea 一样就行。如果要开启字数统计,showWordLimit 和 maxLength都要配置才行。

更多编程相关知识,请访问:编程视频!!









