Vue 페이지의 다른 곳을 클릭해도 커서가 사라지지 않습니다.-프런트엔드 Q&A-php.cn

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

王林

풀어 주다： 2023-05-05 22:06:07

원래의

1241명이 탐색했습니다.

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() 함수를 바인딩합니다. 함수에서는 문서의 클릭 이벤트를 수신합니다. 사용자가 입력 상자가 아닌 영역을 클릭하면 이벤트가 트리거되고 입력 상자의 흐림 메서드가 호출됩니다.