Select

A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.

Usage

prepend

hello!😎

append

prepend

select multiple something.

hello!😎

append

<template>
  <div class="flex flex-col gap-10">
    <div class=" w-full">
      <PlSelect
        v-model="value"
        :options="options"
        info-tip="hello!😎"
        prefix-icon="browser-chrome"
        suffix-icon="bag-check-fill"
        placeholder="select one something."
        clearable
      >
        <template #prepend>
          prepend
        </template>
        <template #append>
          append
        </template>
      </PlSelect>
    </div>
    <div class=" w-full">
      <PlSelect
        v-model="value"
        :options="options"
        info-tip="hello!😎"
        prefix-icon="browser-chrome"
        suffix-icon="bag-check-fill"
        placeholder="select multiple something."
        clearable
        multiple
      >
        <template #prepend>
          prepend
        </template>
        <template #append>
          append
        </template>
      </PlSelect>
    </div>
  </div>
</template>

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

const value = ref('')

const options = ref<any[]>([])
for (let i = 0; i < 6; i++)
  options.value.push({ name: `option-${i}` })
</script>

<template>
  <div class="flex flex-col gap-10">
    <div class=" w-full">
      <PlSelect
        v-model="value"
        :options="options"
        info-tip="hello!😎"
        prefix-icon="browser-chrome"
        suffix-icon="bag-check-fill"
        placeholder="select one something."
        clearable
      >
        <template #prepend>
          prepend
        </template>
        <template #append>
          append
        </template>
      </PlSelect>
    </div>
    <div class=" w-full">
      <PlSelect
        v-model="value"
        :options="options"
        info-tip="hello!😎"
        prefix-icon="browser-chrome"
        suffix-icon="bag-check-fill"
        placeholder="select multiple something."
        clearable
        multiple
      >
        <template #prepend>
          prepend
        </template>
        <template #append>
          append
        </template>
      </PlSelect>
    </div>
  </div>
</template>

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

const value = ref('')

const options = ref<any[]>([])
for (let i = 0; i < 6; i++)
  options.value.push({ name: `option-${i}` })
</script>

Alert Props

Name	Type	Default	Description
modelValue	`object`	`{}`	Bind the value of select.
mode	`bordered` \| `underline` \| `light`	`bordered`	Set select mode.
size	`mini` \| `small` \| `medium` \| `large`	`medium`	Set select size.
options	`<{name: string value?: any}>[]`	`[]`	Set select options.
infoTip	`string`	`''`	Set select infoTip.
prefixIcon	Bootstrap Icons	`''`	Set select prefixIcon.
suffixIcon	Bootstrap Icons	`''`	Set select suffixIcon.
placeholder	`string`	`''`	Set select placeholder.
disabled	`boolean`	`false`	Set whether to disable.
clearable	`boolean`	`false`	Can settings be reset.
multiple	`boolean`	`false`	Set whether to select multiple mode.

Button Slots

Name	Parameters	Description
prepend	`()`	Front Select Box Content.
append	`()`	Post Select Box Content.

Select ​

Usage ​

Alert Props ​

Button Slots ​

Select

Usage

Alert Props

Button Slots