Vue实现textarea固定输入行数与添加下划线样式的思路详解

首先我们要明确需求：实现一个文本框，在输入文字达到固定的行数后（比如说4行），禁止继续输入，同时在每一行末尾添加下划线样式。

思路概述

我们可以通过Vue指令的方式来实现这一需求。具体而言，我们需要通过以下步骤来实现：

监听文本框输入事件，当输入框的文字超过指定行数时禁止继续输入；
在每一行末尾添加下划线样式；

实现步骤

1. 监听输入事件

我们在Vue的directives中注册一个名为limit-row的指令，用于监听文本框的输入事件。具体而言，我们可以通过el.addEventListener方法来监听输入框的input事件，当事件被触发时，我们会获取到输入框中的文字，并计算出文字所占的行数。当文字超过指定行数时，我们会阻止事件的默认行为，即禁止继续输入。

Vue.directive("limit-row", {
  bind: function(el, binding) {
    el.addEventListener("input", function(e) {
      var lineHeight = parseInt(getComputedStyle(el).lineHeight);
      var rows = Math.floor(el.scrollHeight / lineHeight);
      if (rows >= binding.value) {
        e.preventDefault();
      }
    });
  }
});

在指令中，我们传入的binding.value就代表了输入框的最大行数。

2. 添加下划线样式

我们可以通过CSS的方式来添加下划线样式。具体而言，我们使用::after伪元素来在每一行末尾添加一个下划线。

textarea {
  font-size: 16px;
  line-height: 24px;
  padding: 10px;
  border: none;
}

textarea::after {
  content: "_";
  display: inline-block;
  width: 1px;
  height: 24px;
  margin-right: -1px;
  vertical-align: top;
}

我们为textarea元素定义了一些基本样式，并在::after中定义了下划线样式。需要注意的是，我们使用了inline-block来使下划线能够正确的显示在每一行的末尾。

示例

下面我们通过两个示例来展示上述思路的实现效果。

示例1

下面的代码展示了如何实现一个最多只能输入4行，每一行都有下划线的文本框。

<template>
  <div>
    <h2>示例1：textarea固定行数与下划线样式</h2>
    <textarea v-limit-row="4"></textarea>
  </div>
</template>

<script>
export default {
  name: "Demo",
};
</script>

<style scoped>
textarea {
  font-size: 16px;
  line-height: 24px;
  padding: 10px;
  border: none;
}

textarea::after {
  content: "_";
  display: inline-block;
  width: 1px;
  height: 24px;
  margin-right: -1px;
  vertical-align: top;
}
</style>

示例2

下面的代码展示了如何通过Vue组件的方式来实现一个最多只能输入3行，每一行都有下划线的文本框。

<template>
  <div>
    <h2>示例2：Vue组件实现的textarea</h2>
    <limit-input :row="3"></limit-input>
  </div>
</template>

<script>
export default {
  name: "Demo",
  components: {
    "limit-input": {
      template: `
        <textarea v-limit-row="row"></textarea>
      `,
      props: {
        row: {
          type: Number,
          default: 1,
        },
      },
    },
  },
};
</script>

<style scoped>
textarea {
  font-size: 16px;
  line-height: 24px;
  padding: 10px;
  border: none;
}

textarea::after {
  content: "_";
  display: inline-block;
  width: 1px;
  height: 24px;
  margin-right: -1px;
  vertical-align: top;
}
</style>