Ant Design Vue中如何让Textarea组件有“字数统计”功能

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 }}      >    >    export default {    props: {      // 是否展示字数统计      showWordLimit: {        type: Boolean,        default: false,      },    },    // v-model处理    model: {      prop: "value",      event: "change",    },    computed: {      // 长度控制      textLength() {        return (this.$attrs.value || "").length;      },    },    methods: {      onChange(e) {        // v-model 回调函数        this.$emit("change", e.target.value);      },    },  };  .textarea-wrapper {    position: relative;    display: block;    .m-textarea {      padding: 8px 12px;      height: 100%;    }    .m-count {      color: #808080;      background: #fff;      position: absolute;      font-size: 12px;      bottom: 8px;      right: 12px;    }  }

登录后复制

使用也很简单，和正常的 textarea 一样就行。如果要开启字数统计，showWordLimit 和 maxLength都要配置才行。

登录后复制

更多编程相关知识，请访问：编程视频！！

以上就是Ant Design Vue中如何让Textarea组件有“字数统计”功能的详细内容，更多请关注【创想鸟】其它相关文章！