クエーサーの「選択」コンポーネント.それがちょうど与え続ける贈り物の7つの理由!

ERRRG、スクラッチから選択コンポーネントを構築する砂の家を構築するようです.ちょうどあなたがあなたが前進していると思うとき、すべては崩壊して来ます.私はそれが嫌いです.
幸運にもクエーサーのQSelect コンポーネントは、芸術の豪華に細工された作品です!そして、それは素晴らしいです、なぜなら、私が決して再発明したくない1つの車輪があるならば、それはqselectです.
それで、どんなfurthurアドオンなしででも.qselectを1つのqselectにしてalll !!をどうするかを見てみましょう!
……そしてQuasarComponents.Com このものについてもっと学ぶために!

菅0：スクリプトタグ！

続いて?甘い!
あなたが始める必要があるJSは、ここにあります.強打してください.

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'PageIndex',

  data () {
    return {
      slotDog: null,
      dog: null,
      dogsPretty: null,
      dogsObjectOptions: null,
      dogsMultiple: [],
      dogsOtt: [],
      longList: []
    }
  }
})
</script>

そして、ここにGitHub repo with all the examples

チェックイン1：モデルは、データ！

始めるQSelect , いくつかのデータをモデル化し、options :

<q-select
  v-model="dog"
  :options="['Panda', 'Lily', 'Moe']"
/>

あなたのオプションのためにオブジェクトを使用します。

もちろん、オブジェクトのコレクションを使用することもできます.ここでどのような味かもしれないの味です!デフォルトではlabel and value 使用されるQSelect

<q-select
  v-model="dogsObjectOptions"
  :options="[
    {
      label: 'Panda',
      value: 1
    },
    {
      label: 'Lily',
      value: 2
    },
    {
      label: 'Moe',
      value: 3
    }
  ]"
/>

角3：複数選択！

もちろん複数の選択が可能です.ジャストアドmultiple フラグを指定して配列をモデリングします.

<q-select
  v-model="dogsMultiple"
  :options="['Panda', 'Lily', 'Moe']"
  multiple
/>

はい4 :セクシーに！

この豪華な選択をチェックしてください.あなたがその冗談を解読することができるならば、この1(グリフィンドールに10ポイント)を構築した後、私のあごを傷つけました.

<q-select
  v-model="dogsPretty"
  label="Selected Dog"
  label-color="purple-8"
  color="purple"
  bg-color="purple-1"
  popup-content-class="text-grey-8"
  options-selected-class="bg-purple-4 text-white"
  :options="['Panda', 'Lily', 'Moe']"
  style="max-width: 200px;"
  outlined
/>

つ目の例で他のクールなものの束

APIは直感的なので、おそらく、このほとんどの何かを把握することができます.

<q-select
  v-model="dogsOtt"
  for="dog"
  option-label="name"
  option-value="id"
  multiple
  options-dense
  use-chips
  filled
  rounded
  hint="Select a dog"
  color="brown"
  :suffix="dogsOtt.map(dog => dog.sound).join(', ')"
  :loading="false"
  clear-icon
  counter
  :rules="[val => val.length > 1 || 'Please select at least 2 dogs']"
  :options="[
    {
      name: 'Panda',
      id: 1,
      sound: 'rrrruf! Ruf RUF!'
    },
    {
      name: 'Lily',
      id: 2,
      sound: 'Beep!'
    },
    {
      name: 'Moe',
      id: 3,
      sound: 'Aroooooooo'
    }
  ]"
/>

<pre>{{ dogsOtt }}</pre>

懸賞6：Looooongリストのパフォーマンスはどうですか？

今、これはクールです!
あなたのリストが大規模な場合、それはまだ高速実行されます!
なぜ?クエーサーが仮想的に舞台裏でスクロールするので

<q-select
  v-model="longList"
  :options="Array.from(Array(1000000).keys())"
  multiple
/>

△7：スロットでn番目に伸ばす

私と一緒に大暴れに行きたいですか?OK、コーヒーをつかむ、あなたの席に保持し、我々は9の7のようなこの悪いboiを変更します!
この後、「私は、XYZでありえません」言い訳によって来ている幸運!Woohoooo!!

<q-select
  v-model="slotDog"
  label
  filled
  :options="[
    {
      name: 'Panda',
      color: 'grey-4',
    },
    {
      name: 'Lily',
      color: 'yellow-8',
    },
    {
      name: 'Moe',
      color: 'brown',
    }
  ]"
>
  <!-- Add an icon WITHIN the input -->
  <template #prepend>
    <q-icon name="pets" />
  </template>

  <!-- Add an icon AFTER the input  -->
  <template #after>
    <q-icon
      v-if="slotDog"
      color="green"
      name="check_circle"
    />
  </template>

  <!-- We can take total control of the label... -->
  <template #label>
    Favourite Dog
    <q-icon
      size="xs"
      name="favorite"
    />
  </template>

  <!-- We can take total control of how options are rendered... -->
  <template #option="scope">
    <q-item
      clickable
      @click="scope.toggleOption(scope.opt)"
    >
      <q-item-section side>
        <q-checkbox
          :model-value="scope.selected"
          @click="scope.toggleOption(scope.opt)"
        />
      </q-item-section>

      <q-item-section>
        {{ scope.opt.name }}
      </q-item-section>
    </q-item>
  </template>

  <!-- We can change how the selection is displayed! -->
  <template #selected>
    <div
      v-if="slotDog"
      class="flex items-center"
    >
      <q-icon
        class="q-mr-xs"
        size="xs"
        name="circle"
        :color="slotDog.color"
      />{{ slotDog.name }}
    </div>
  </template>

  <!-- Hooking into the top of our options list is easy! -->
  <template #before-options>
    <q-item-label header>
      Favourite Dog <q-icon name="favorite" />
    </q-item-label>
  </template>

  <!-- And hooking into AFTER our options is peasy! -->
  <template #after-options>
    <q-btn
      v-close-popup
      class="full-width"
      label="cancel"
    />
  </template>
</q-select>

電話
こんにちは.
他の端:こんにちは、このルークですか?選択- A - T -のようなボスの作成者.COM ?
ルーク:ummmはい、これは彼です.どうしたらいいの?
他の終わり:私はちょうどあなたが知っているしたい、それは私が今までインターネット上で持っていた最も素晴らしい犬の選択の経験だった.ありがとう!!
ルーク:ああすごい、あなたは大歓迎親切な見知らぬ人です!
そして、それはあなたが選択コンポーネントと友達を作る方法です!

その他のコンポーネントは、その他のコンポーネントについて説明します。コム.

whoooleロットもっと!

フィルタリング

怠惰なロードリスト項目(APIからのように)

検証

メニューの位置決め

HTML化

キーボードナビゲーション

Aでの使用QForm

高度な仮想スクロール技術(カスタムスタイリングを持つ長いリストのパフォーマンスを向上させる)

オブジェクト全体ではなくオブジェクトフィールドのマッピング.
そして、おそらく私が今考えることができないBazillion他のもの.我々は深い行く!

So click here , そして、反対側で私に会ってくださいQuasarComponents.Com より発見する!
あそこにある.“クエーサーの選択コンポーネントは、ちょうど与えてくれる贈り物です!”
次までは覚えておいてください.
あなたが構築することはできません.