soc_web/src/components/common/textarea.vue

<template>
  <div class="k-textarea">
    <el-input
      type="textarea"
      :rows="row"
      v-model="pv"
      :maxlength="length"
      :disabled="disabled"
      :placeholder="placeholder"
    ></el-input>
    <div class="k-textarea__length">{{ pv ? pv.length : 0 }} / {{ length }}</div>
  </div>
</template>
<script>
import sync from "../utils/computed.sync";

export default {
  data() {
    return {};
  },
  computed: {
    pv: sync("value")
  },
  watch: {},
  props: {
    value: {},
    disabled: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Number,
      default: 5,
    },
    length: {},
    placeholder: {}
  },
  methods: {},
  mounted() {
  }
};
</script>
<style lang="scss">
.k-textarea {
  position: relative;

  &__length {
    position: absolute;
    bottom: -25px;
    right: 12px;
    font-size: 12px;
  }
}
</style>