<el-input
        ref="editorRef"
        v-model="valueHtml"
        type="textarea"
        :rows="4"
        placeholder="請輸入內容"
        @keydown="handleKeyDown"
      >
      </el-input>

import { ref, nextTick } from 'vue'
const currentEvent = ref()
const valueHtml = ref('')
const editorRef = ref()

const handleKeyDown = ($event: Event) => {
  const event = $event as KeyboardEvent
  currentEvent.value = event.target as HTMLInputElement
  // 定義組合鍵 Map
  const shortCutKeys: (keyof KeyboardEvent)[] = ['metaKey', 'altKey', 'ctrlKey', 'shiftKey']
  const isEnterKey = event.key === 'Enter'
  const isShortcutKeys = shortCutKeys.some((item) => event[item])
  if (isEnterKey && isShortcutKeys) {
    // 獲取光標位置
    const cursorPosition = currentEvent.value.selectionStart

    // 拆分成兩段文本
    const textBeforeCursor = valueHtml.value.slice(0, cursorPosition)
    const textAfterCursor = valueHtml.value.slice(cursorPosition)

    // 合并為帶有換行符的新文本
    const newText = textBeforeCursor + '\n' + textAfterCursor

    // 更新輸入框的值
    valueHtml.value = newText
    // 文本編輯器的高度發(fā)生變化后
    nextTick(() => {
      // 高度變化 自動滾動到底部
      const editor = editorRef.value.textarea
      editorRef.value.textarea.scrollTop = editor.scrollHeight
      // 設置光標位置為: start 和 end 相同，光標會移動到換行符后面的新行首
      currentEvent.value.setSelectionRange(cursorPosition + 1, cursorPosition + 1)
    })
  } else if (event.key === 'Enter') {
    // 阻止掉 Enter 的默認換行行為
    event.preventDefault()
    // do yourself things for example  send
  }
}

else if (event.key === 'Enter') {
    // 阻止掉 Enter 的默認換行行為
    event.preventDefault()
}

const editor = editorRef.value.textarea
editorRef.value.textarea.scrollTop = editor.scrollHeight