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>

上記のサンプル コードでは、blur ディレクティブを定義し、それに関数 documentHandler() をバインドします。この関数では、ドキュメントのクリック イベントをリッスンしており、ユーザーが入力ボックス以外の領域をクリックすると、イベントがトリガーされ、入力ボックスの Blur メソッドが呼び出されます。

概要

オプション 1 を使用するかオプション 2 を使用するかに関係なく、対応するイベントまたは命令を入力ボックスにバインドし、イベント処理関数で入力ボックスの Blur メソッドを呼び出す必要があります。フォーカスを失い、カーソルが消去されます。これにより、ユーザーの操作性が向上し、ユーザーの操作エクスペリエンスが向上します。

以上がvue ページの他の場所をクリックしてもカーソルが消えませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。