Vue 페이지의 다른 곳을 클릭해도 커서가 사라지지 않습니다.

Vue를 사용하여 페이지를 개발할 때 페이지의 다른 곳을 클릭해도 입력 상자의 커서가 사라지지 않는 상황이 자주 발생합니다. 이 문제는 간단해 보이지만 올바른 처리 방법이 없으면 사용자의 상호 작용 경험에 큰 영향을 미칠 수 있습니다. 이 기사에서는 이 문제에 대한 몇 가지 해결 방법을 제공합니다.

문제 분석

Vue 컴포넌트에서 입력 상자의 v-model 속성을 바인딩할 때 사용자가 입력 상자에 입력을 하면 커서가 사용자가 입력한 내용을 따라 입력 상자에서 움직입니다. 그러나 사용자가 페이지의 다른 영역을 클릭하면 커서가 사라지지 않으므로 더 번거로운 작동 경험이 발생합니다.

이 문제의 근본 원인은 사용자가 입력 상자가 아닌 영역을 클릭할 때 발생하는 이벤트를 처리하지 않았기 때문입니다. 일반적으로 다른 영역을 클릭할 때 텍스트 상자가 초점을 잃고 커서가 제거되도록 입력 상자의 흐림 이벤트를 수동으로 트리거해야 합니다.

해결책

옵션 1: v-on:blur를 사용하여 Vue 구성 요소에서 흐림 이벤트를 바인딩합니다.

Vue 구성 요소에서 v-on 지시문을 사용하면 DOM 이벤트를 쉽게 바인딩할 수 있습니다. 사용자가 다른 영역을 클릭하면 입력 상자에 흐림 이벤트를 바인딩할 수 있으며, 이벤트가 트리거되고 입력 상자가 초점을 잃어 커서가 제거됩니다.

샘플 코드:

<template>
  <div>
    <input v-model="inputValue" v-on:blur="inputBlur">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ""
    };
  },
  methods: {
    inputBlur() {
      this.$refs.input.blur();
    }
  }
};
</script>

위 샘플 코드에서는 입력 상자에 흐림 이벤트를 바인딩하고 이벤트 핸들러에서 입력 상자의 흐림 메서드를 호출했습니다.

옵션 2: Vue 지침을 사용하여 요소 동작 사용자 지정

Vue 지침(지시문)을 사용하면 HTML 요소의 동작을 사용자 지정하는 데 도움이 됩니다. 이를 바탕으로 Vue 구성 요소에서 v-blur 명령을 사용자 정의할 수 있습니다. 사용자가 입력 상자 이외의 영역을 클릭하면 명령이 실행되고 입력 상자가 초점을 잃어 커서가 제거됩니다.

샘플 코드:

<template>
  <div>
    <input v-model="inputValue" v-blur>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ""
    };
  },
  directives: {
    blur: {
      bind: function(el, binding, vnode) {
        function documentHandler(e) {
          if (el.contains(e.target)) {
            return false;
          }
          el.blur();
        }
        el.__vueBlur__ = documentHandler;
        document.addEventListener("click", documentHandler);
      },
      unbind: function(el, binding) {
        document.removeEventListener("click", el.__vueBlur__);
        delete el.__vueBlur__;
      }
    }
  }
};
</script>

위의 샘플 코드에서는 흐림 지시문을 정의하고 이에 documentHandler() 함수를 바인딩합니다. 함수에서는 문서의 클릭 이벤트를 수신합니다. 사용자가 입력 상자가 아닌 영역을 클릭하면 이벤트가 트리거되고 입력 상자의 흐림 메서드가 호출됩니다.

요약

옵션 1을 사용하든 옵션 2를 사용하든 해당 이벤트나 명령을 입력 상자에 바인딩하고 이벤트 핸들러 함수에서 입력 상자의 흐림 메서드를 호출하여 초점을 잃고 오류를 제거해야 합니다. 커서. 이를 통해 사용자 상호 작용의 편의성이 향상되고 사용자 운영 경험이 향상됩니다.

위 내용은 Vue 페이지의 다른 곳을 클릭해도 커서가 사라지지 않습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!