Vue 입력 상자 레이블 취소하려면 클릭하세요.

Vue 개발에서 입력 상자는 매우 중요한 구성 요소입니다. 대부분의 경우 더 나은 사용자 경험을 달성하기 위해 입력 상자를 사용자 정의해야 합니다. 일반적인 요구 사항 중 하나는 입력 상자에 레이블을 추가하는 것입니다. 태그는 입력 상자에서 매우 훌륭한 프롬프트 및 분류 기능을 수행합니다. 사용자는 태그를 기반으로 필요한 정보를 빠르게 찾을 수 있어 사용 효율성이 향상됩니다. 그러나 입력 상자에 태그를 추가할 때 추가된 태그를 취소하는 방법에 대한 문제가 종종 발생합니다. 오늘 우리는 이 문제를 논의할 것입니다.

1. 태그 추가 기능 구현 방법

Vue에서는 v-model 명령어를 통해 사용자가 입력한 콘텐츠를 얻을 수 있습니다. 즉, v-model의 값을 얻어서 사용자가 입력한 텍스트를 얻을 수 있습니다. 따라서 간단한 입력 상자에서 v-model을 바인딩하여 입력 기능을 완성할 수 있습니다. 이제 입력 상자에 레이블을 추가해야 한다고 가정해 보겠습니다. 레이블을 독립 구성 요소로 추가하고 입력 상자와 레이블 구성 요소를 결합할 수 있습니다. 다음은 간단한 구현을 위한 샘플 코드입니다.

<template>
  <div>
    <label>名称：</label>
    <input type="text" v-model="name">
    <tags :value="tags" @change="handleTagsChange" />
  </div>
</template>

<script>
import Tags from './Tags.vue'

export default {
  components: { Tags },
  data () {
    return {
      name: '',
      tags: []
    }
  },
  methods: {
    handleTagsChange (tags) {
      this.tags = tags
    }
  }
}
</script>

이 코드에서는 "Tags"라는 구성 요소를 정의합니다. 이 컴포넌트는 모든 라벨을 관리하는 라벨 컴포넌트입니다. 또한 v-model 지시어로 입력 상자를 정의하고 레이블 구성 요소를 입력 상자와 결합했습니다. 사용자가 텍스트를 입력한 후 라벨 컴포넌트의 변경 이벤트를 수신하고 라벨을 관리할 수 있습니다. 이런 방식으로 입력 상자에 레이블을 추가할 수 있습니다.

2. 라벨에 "취소" 버튼을 추가하는 방법

라벨을 추가하는 과정에서 사용자가 실수로 조작하거나 잘못된 라벨을 추가하는 상황이 발생할 수 있습니다. 이 경우 사용자는 태그를 취소해야 할 가능성이 높습니다. 따라서 라벨 오른쪽에 "취소" 버튼을 추가하는 것이 좋은 선택입니다. 그렇다면 이 기능을 어떻게 구현해야 할까요?

레이블 구성 요소에 삭제 이벤트를 추가할 수 있습니다. 사용자가 "취소" 버튼을 클릭하면 이 이벤트가 트리거되고 현재 레이블이 구성 요소에서 삭제됩니다. 다음은 간단한 샘플 코드입니다.

<template>
  <span class="tag with-cancel" v-for="(tag, index) in tags">
    {{ tag }}
    <button class="delete" @click="deleteTag(index)">X</button>
  </span>
</template>

<script>
export default {
  props: ['value'],
  data () {
    return {
      tags: this.value.slice()
    }
  },
  methods: {
    deleteTag (index) {
      this.tags.splice(index, 1)
      this.$emit('change', this.tags)
    }
  }
}
</script>

이 코드에서는 삭제 이벤트를 기다리는 레이블 구성 요소에 스타일을 추가하고 각 레이블에 "취소" 버튼도 추가합니다. 버튼을 클릭하면 deleteTag 메소드를 호출하여 현재 태그를 삭제하고 $emit 메소드를 통해 변경 이벤트를 트리거합니다.

3. 태그 취소 시 문제 해결 방법

태그의 "취소" 기능을 구현한 후 태그 삭제로 인해 발생하는 몇 가지 문제를 해결하는 방법을 고려해야 합니다. 예를 들어, 사용자가 라벨을 삭제하면 입력란 내용 전체가 삭제될 수 있습니다. 이때 커서를 올바른 위치로 재배치해야 합니다.

이 문제를 해결하려면 라벨 삭제 시 삭제 전, 삭제 후 입력창의 커서 위치를 알아내고, 라벨 삭제 후에는 커서를 올바른 위치로 이동시켜야 합니다. 다음은 간단한 샘플 코드입니다.

deleteTag (index) {
  const input = this.$refs.input
  const startPos = input.selectionStart
  const endPos = input.selectionEnd
  this.tags.splice(index, 1)
  this.$nextTick(() => {
    const delta = startPos - endPos
    input.selectionStart = startPos - delta
    input.selectionEnd = endPos - delta
    this.$emit('change', this.tags)
  })
}

이 코드에서는 입력 상자의 SelectionStart 및 SelectionEnd 속성을 가져와 삭제하기 전에 커서의 위치를 ​​가져옵니다. 그런 다음 레이블을 삭제한 후 커서를 올바른 위치로 이동합니다. 여기서 주목해야 할 점은 메소드에서 DOM 요소를 직접 조작할 수 없다는 것입니다. 그렇지 않으면 일부 오류가 발생합니다. 따라서 컴포넌트의 다음 업데이트가 완료된 후 $nextTick 메소드를 사용하여 DOM 요소를 업데이트합니다.

Summary

Vue에서 입력 상자는 매우 일반적으로 사용되는 구성 요소입니다. 사용자 경험을 향상시키기 위해 입력 상자에 레이블을 추가하고 "취소" 버튼 레이블을 추가해야 하는 경우가 많습니다. 이 기능을 구현할 때 커서 위치 처리와 같은 몇 가지 세부 사항에 주의할 필요가 있습니다. 신중하게 고려해야만 입력 상자를 더욱 완벽하게 만들 수 있습니다.

위 내용은 Vue 입력 상자 레이블 취소하려면 클릭하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!