开发过程中遇到的新方案

textarea

最常见的就是这种形式，不多赘述。代码如下

但要展示带html元素的内容，可能就不是那么方便了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<textarea
  id="sendMsgBox"
  class="sendMsgBox"
  ref="sendMsgBox"
  row="3"
  maxlength="1000"
  v-model="sendContent"
  :readonly="cantOperate"
  :placeholder="getPlaceholder"
  @blur="handleBlurFun"
  @focus="handleFocusFun"
  @keydown="handleKeyDown($event)"
  :style="{ 'height': textareHeight }"
></textarea>

pre标签

contenteditable属性会将该段落变为可编辑状态，如同直接用vue的v-html展示。代码如下

1
2
3
<pre contenteditable="true">
  可以直接在这里输入.....
</pre>

祝君无Bug~