Ant Design Vue에서 Textarea 구성 요소에 '단어 개수' 기능을 추가하는 방법

Ant Design Vue의 기본 Textarea 컴포넌트에는 단어 개수 기능이 없지만 가끔 필요할 때가 있습니다. Textarea 컴포넌트에 "단어 개수" 기능을 만드는 방법을 소개하겠습니다.

실용적인 "단어 세기" 기능 추천: Ant Design Vue 기본 Textarea 구성 요소에는 단어 세기 기능이 없지만 이 기능은 매우 일반적입니다. 그래서 간단한 보조 캡슐화를 만들었습니다. 사실 이 기능은 원래 구성요소를 변경하지 않고 오른쪽 하단에 계수 텍스트를 추가하고 위치 지정을 사용하여 처리하면 매우 간단합니다. Ant Design Vue 默认的 Textarea 组件是没有字数统计功能的，但这个功能又是很常见的，所以就做了一个简单的二次封装。其实这个功能很简单，就是在不改变原组件的情况下，右下角加上一个计数文本，用定位处理一下就行。

默认的 textarea

官网地址：https://antdv.com/components/input-cn/

基本使用如下所示：

<a-textarea v-model="desc" placeholder="请输入描述" :auto-size="false" />

改造后的 textarea

$attrs和v-model实现原理可查看上一篇文章封装原理解析（https://juejin.cn/post/7003280618473668639#heading-3）

<template>
  <div>
    // 文本框
    <a-textarea
     
      v-bind="$attrs"
      v-model="$attrs.value"
      @change="onChange"
    />
    // 字数统计
    <span v-if="showWordLimit"
      >{{ textLength }}/<template v-if="$attrs.maxLength"
        >{{ $attrs.maxLength }}</template
      ></span
    >
  </div>
</template>

<script>
  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);
      },
    },
  };
</script>

<style scoped>
  .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;
    }
  }
</style>

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

기본 텍스트 영역

공식 홈페이지 주소: https://antdv.com/comComponents/input-cn/

기본 사용법은 다음과 같습니다.

<m-textarea
  v-model="desc"
  :showWordLimit="true"
  :maxLength="20"
  :autoSize="false"
  placeholder="请输入描述"
/>

변형된 텍스트 영역

$attrs 및 v-model 구현 원칙은 이전 기사 캡슐화 원칙 분석(https : //juejin.cn/post/7003280618473668639#heading-3)

rrreee🎜일반 텍스트 영역처럼 사용법도 매우 간단합니다. 단어 수를 활성화하려면 showWordLimit 및 maxLength를 구성해야 합니다. 🎜rrreee🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 Ant Design Vue에서 Textarea 구성 요소에 '단어 개수' 기능을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!