Vue.js中textarea换行符在邮件渲染丢失的前端处理咨询

首先纠正模板里的一个错误：你用了<input type="textarea">，这不符合HTML规范，input标签没有textarea类型，应该替换为<textarea>标签，正确写法如下：

<template>
  <div>
    <form @submit.prevent="create">
      <label for="comment-title"></label>
      <textarea
        id="comment-title"
        label="Message"
        placeholder="Enter your message"
        v-model="comment"
      ></textarea>
      <button type="submit">create</button>
    </form>
  </div>
</template>

接下来针对换行不生效的问题，根据后端邮件的渲染方式，有两种前端处理方案：

方案1：适配HTML格式邮件 #

如果后端发送的是HTML格式邮件，普通的换行符\n不会被邮件客户端识别，需要将其替换为HTML换行标签<br>。修改提交方法中的内容处理逻辑：

methods: {
  create() {
    const msg = {
      createdAt: new Date(),
      // 将所有换行符替换为<br>
      comment: this.comment.replace(/\n/g, '<br>')
    };
    this.$store.dispatch("createMsg", msg)
    this.comment = ''
  }
}

方案2：适配纯文本格式邮件 #

如果后端发送的是纯文本邮件，部分邮件客户端对换行符的识别依赖\r\n（Windows标准换行），可以将文本中的\n替换为\r\n：

methods: {
  create() {
    const msg = {
      createdAt: new Date(),
      // 替换为Windows风格换行符
      comment: this.comment.replace(/\n/g, '\r\n')
    };
    this.$store.dispatch("createMsg", msg)
    this.comment = ''
  }
}

如果后端本身可以直接识别\n作为纯文本换行，那只需要修正<textarea>标签即可，无需额外替换处理。

内容的提问来源于stack exchange，提问作者peace3106