基础实现

主要的效果： 在多行文本中输入一段文字， 回车后在canvas中显示该文本， 并动画移动文本。

添加多行文本

1. 使用el-input ,type=textarea. 详细参考查阅Element-UI官网文档。

2. 挂载事件

v-on:keydown.shift.enter.native.stop.prevent

keydown 是处理按键按下事件。 shift.enter 是处理组合键。 因为多行文本enter默认是换行，这里从shift.enter 处理。 当然也可以用enter来处理，那么默认的换行逻辑就覆盖了。我们需要额外增加另外一个快捷键并挂载换行逻辑。 native 这是原生事件，需要制定native。 stop 是阻止事件冒泡。例如父元素有keydown 处理事件，但不希望触发父元素的keydown 可以用这个。 prevent 将阻止元素默认的换行行为。

  <el-input v-model="message" type="textarea" :rows="3" class="chat-input" style="margin:10px 0;width:900px;"
                  v-on:keydown.shift.enter.native.stop.prevent="animateWord(message);message=''">
        </el-input>

其他配置

在新版vscode volar 是，在@click事件挂载时默认会显示$events=>xx; 可以通过添加配置移除多余的显示.

在vscode settings.json 添加如下行配置

"volar.inlayHints.eventArgumentInInlineHandlers":false,