一. 业务背景

😀 ： 最近有个smartsorting的业务需求功能模块，大致就是用户（PM）输入订单号信息然后可以查询一些站点经纬度，站点服务范围面积等信息，然后以可视化的形式呈现在Google Map上。其中输入框需要实现当输入的订单号有误时，要呈红色的形态去提醒输入者，及时更改内容，也算是一种提升用户体验的操作：

Untitled

🤣 ：用textarea没办法支持这种局部有字体更改颜色的情况，使用富文本编辑器又过重，所以选择原生的 contenteditable 属性来实现。

何为 contenteditable:

通过该属性，在HTML中，任何元素都可以被编辑。通过使用一些JavaScript事件处理程序，您可以将您的网页转换为完整且快速的富文本编辑器。即：让一个 div 标签成为可编辑状态，加入contenteditable="true" 属性即可。

关键代码如下：

		<div contenteditable="true"></div>

二. 开发过程

  1. **默认的placeholder是利用伪类去实现的。**判断有无输入的文本来决定 show-placeholder class类是否出现，然后再利用自定义属性data-placeholder来处理该类的伪类，实现placeholder的展示。

关键代码如下：

	<div
    class="editor-container"
    :data-placeholder="spxTnTextareaPlaceholder"
    :class="{ 'show-placeholder': showPlaceholder }"
  >
    <div
      contenteditable="true"
    >
    </div>
  </div>

	props: {
    value: {
      type: Array,
    },
  },
  computed: {
    showPlaceholder() {
      return this.value.length === 0;
    },
  },

.editor-container {
  position: relative;
  display: flex;
  flex-direction: column;
}
.show-placeholder {
  &::before {
    position: absolute;
    content: attr(data-placeholder);
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #B7B7B7;
    pointer-events: none;
    padding: 13px;
  }
}
  1. 设置了 contenteditable 为 "true"。