Select 选择器 #

<script setup lang="ts">
import { computed, ref } from 'vue'

const value = ref('')
const options = ref([
  { label: '一击毙命' , value: 'AWP' },
  { label: '一发入魂' , value: 'Deagle' },
  { label: '贵又难玩' , value: 'M249' },
  { label: '阿卡四七', value: 'AK-47' },
])

const getLabel = computed(() => {
  return options.value.find(option => option.value === value.value)?.label
})
</script>

<template>
  <vi-flex gap="28px" align="center">
    <vi-select 
      class="vi-select-demo"
      v-model="value" 
      :options="options" 
    />
    <span v-show="value">"{{ getLabel }}" => "{{ value }}"</span>
  </vi-flex>
</template>

<style lang="scss">
.vi-select-demo {
  width: 200px;
}
</style>

<script setup lang="ts">
import { computed, ref } from 'vue'

const value = ref('AWP')
const options = ref([
  { label: '一击毙命' , value: 'AWP' },
  { label: '一发入魂' , value: 'Deagle'} ,
  { label: '贵又难玩' , value: 'M249' },
  { label: '阿卡四七', value: 'AK-47' },
])

const getLabel = computed(() => {
  return options.value.find(option => option.value === value.value)?.label
})
</script>

<template>
  <vi-flex gap="28px" align="center">
    <vi-select 
      class="vi-select-demo"
      v-model="value" 
      :options="options" 
      disabled
    />
    <span v-show="value">"{{ getLabel }}" => "{{ value }}"</span>
  </vi-flex>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const value = ref('Deagle')
const options = ref([
  { label: '一击毙命' , value: 'AWP' },
  { label: '一发入魂' , value: 'Deagle' },
  { label: '贵又难玩' , value: 'M249' },
  { label: '阿卡四七', value: 'AK-47' },
])

const getLabel = computed(() => {
  return options.value.find(option => option.value === value.value)?.label
})
</script>

<template>
  <vi-flex gap="28px" align="center">
    <vi-select 
      class="vi-select-demo"
      v-model="value" 
      :options="options" 
      clearable
    />
    <span v-show="value">"{{ getLabel }}" => "{{ value }}"</span>
  </vi-flex>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(['AWP', 'M249'])
const value2 = ref(['AWP'])
const maxCount = ref(2)
const options1 = ref([
  { label: '一击毙命' , value: 'AWP' },
  { label: '一发入魂' , value: 'Deagle' },
  { label: '贵又难玩' , value: 'M249' },
  { label: '阿卡四七', value: 'AK-47' },
])
const options2 = ref(JSON.parse(JSON.stringify(options1.value)))
</script>

<template>
  <vi-row gap="28px">
    <vi-col>
      <span>基础多选</span>
      <vi-select 
        v-model="value1" 
        :options="options1" 
        multiple
      />
    </vi-col>
    <vi-col>
      <span>设置最多选中数: {{ maxCount }}</span>
      <vi-select 
        v-model="value2" 
        :options="options2" 
        multiple
        :max="maxCount"
      />
    </vi-col>
  </vi-row>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const value = ref('')
const options = ref([
  { id: 11, label: '一击毙命' , value: 'AWP' },
  { id: 22, label: '一发入魂' , value: 'Deagle' },
  { id: 33, label: '贵又难玩' , value: 'M249' },
  { id: 44, label: '阿卡四七', value: 'AK-47' },
])

const getId = computed(() => {
  return options.value.find(option => option.value === value.value)?.id
})
</script>

<template>
  <span>此示例使用了 id 作为 key, 它目前是: {{ getId }}</span>
  <vi-select 
    v-model="value" 
    :options="options" 
    options-key="id"
  />
</template>