クリックして Vue 入力ボックスのラベルをキャンセルします

Vue 開発では、入力ボックスは非常に重要なコンポーネントです。多くの場合、より良いユーザー エクスペリエンスを実現するには、入力ボックスをカスタマイズする必要があります。一般的な要件の 1 つは、入力ボックスにラベルを追加することです。タグは、入力ボックスで非常に優れたプロンプトおよび分類機能を果たします。ユーザーはタグから必要な情報を素早く見つけることができ、利用効率が向上します。しかし、入力ボックスにタグを追加するときに、追加したタグをどのようにキャンセルするかという問題に遭遇することがよくあります。今日はこの問題について議論します。

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 要素を更新します。

概要

Vue では、入力ボックスは非常によく使用されるコンポーネントです。ユーザーエクスペリエンスを向上させるために、多くの場合、入力ボックスにラベルを追加し、ラベルの「キャンセル」ボタンを追加する必要があります。この機能を実装する場合は、カーソル位置の処理など、いくつかの詳細に注意する必要があります。注意深く考えることによってのみ、入力ボックスをより完璧なものにすることができます。

以上がクリックして Vue 入力ボックスのラベルをキャンセルしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。