Vue 3에서 contenteditable 속성을 사용하는 방법

저는 백수이기 때문에 Vue 3/TypeScript에서 사이드 프로젝트를 진행하고 있어서 프론트엔드 개발에 대한 최신 정보를 유지하고 있습니다.

마지막으로 풀스택 경험이 15년인데도 전혀 몰랐던 HTML 속성contenteditable과 마주쳤습니다(오늘날 HTML/CSS에는 알아야 할 것이 너무 많습니다).

For those who don't know about it neither, it's an attribute that makes the target tag editable by a simple click: everything is handled natively by the browser itself!

내 응용 프로그램에는 편집 가능하게 만들어야 하는 제목이 있었고 제목을 클릭했을 때 입력으로 대체하여 동작을 구현했습니다. 그런 다음 v-model 속성을 입력하고 Enter 버튼을 누를 때 입력을 숨겼습니다(그런 다음 제목을 다시 제자리에 표시함). 나는 이것을 코딩할 때 이미 약간 번거롭다고 생각했습니다... 그래서 이 contenteditable UFO를 만났을 때 정말 흥미로웠습니다.

코드를 빠르게 업데이트하고 작동 방식을 테스트했습니다.

<script setup lang="ts">
  import { ref } from 'vue'

  const title = ref('My title')
  const titleElement = ref(null)

  function validate(event : Event) {
    (event.target as HTMLInputElement).blur()
    title.value = titleElement.value.innerText.trim()
  }

  defineExpose({ titleElement })
</script>

<template>
  <div ref="titleElement" contenteditable spellcheck="false" @keydown.enter="validate">
    {{ title }}
  </div>
</template>

음... 그게 우리에게 필요한 전부인 것 같습니다 😅🦄

에디션을 직접 처리해야 하는 복잡성 없이 이제 확실히 더 좋아졌습니다!

재미있게 즐기고 싶다면 playable snippet이 있습니다!

질문이 있으시면 주저하지 말고 댓글 섹션에 질문하십시오 😉


사진 제공: Thought Catalog on Unsplash