Casual UI - Vue

基础使用

0 - 50
50 - 100
100 - 200
200 - 500
500 - 1000
0 - 50
50 - 100
100 - 200
200 - 500
500 - 1000
<script setup>
import { ref } from 'vue'

const selectedValue = ref('')

const options = [
  { label: '0 - 50', value: 0 },
  { label: '50 - 100', value: 1 },
  { label: '100 - 200', value: 2 },
  { label: '200 - 500', value: 3 },
  { label: '500 - 1000', value: 4 },
]
</script>

<template>
  <c-select
    v-model="selectedValue"
    placeholder="请选择"
    :options="options"
  />
  <c-select
    v-model="selectedValue"
    rounded
    placeholder="圆角选择器"
    :options="options"
    class="c-ml-md"
  />
</template>
点击展开/收起代码
点击打开交互式编辑器

尺寸

0 - 50
5 - 100
100 - 200
200 - 500
500 - 1000
0 - 50
5 - 100
100 - 200
200 - 500
500 - 1000
0 - 50
5 - 100
100 - 200
200 - 500
500 - 1000
0 - 50
5 - 100
100 - 200
200 - 500
500 - 1000
0 - 50
5 - 100
100 - 200
200 - 500
500 - 1000
<script setup>
import { ref } from 'vue'

const selectedValue = ref('')

const options = [
  { label: '0 - 50', value: 0 },
  { label: '5 - 100', value: 1 },
  { label: '100 - 200', value: 2 },
  { label: '200 - 500', value: 3 },
  { label: '500 - 1000', value: 4 },
]
</script>

<template>
  <div class="c-row c-items-center c-gutter-md c-wrap">
    <div>
      <c-select
        v-model="selectedValue"
        size="xs"
        placeholder="超小尺寸"
        :options="options"
      />
    </div>
    <div>
      <c-select
        v-model="selectedValue"
        size="sm"
        placeholder="小尺寸"
        :options="options"
      />
    </div>
    <div>
      <c-select
        v-model="selectedValue"
        placeholder="中等尺寸（默认）"
        :options="options"
      />
    </div>
    <div>
      <c-select
        v-model="selectedValue"
        size="lg"
        placeholder="大尺寸"
        :options="options"
      />
    </div>
    <div>
      <c-select
        v-model="selectedValue"
        size="xl"
        placeholder="超大尺寸"
        :options="options"
      />
    </div>
  </div>
</template>
点击展开/收起代码
点击打开交互式编辑器

禁用态

0 - 50
5 - 100
100 - 200
200 - 500
500 - 1000
<script setup>
import { ref } from 'vue'

const val = ref('')
const options = [
  { label: '0 - 50', value: 0 },
  { label: '5 - 100', value: 1 },
  { label: '100 - 200', value: 2 },
  { label: '200 - 500', value: 3 },
  { label: '500 - 1000', value: 4 },
]
</script>

<template>
  <c-select
    v-model="val"
    :options="options"
    placeholder="禁用态"
    disabled
  />
</template>
点击展开/收起代码
点击打开交互式编辑器

可清除

0 - 50
50 - 100
100 - 200
200 - 500
500 - 1000
<script setup>
import { ref } from 'vue'

const selectedValue = ref('')

const options = [
  { label: '0 - 50', value: 0 },
  { label: '50 - 100', value: 1 },
  { label: '100 - 200', value: 2 },
  { label: '200 - 500', value: 3 },
  { label: '500 - 1000', value: 4 },
]
</script>

<template>
  <c-select
    v-model="selectedValue"
    placeholder="请选择"
    :options="options"
    clearable
  />
</template>
点击展开/收起代码
点击打开交互式编辑器

多选

请选择
0 - 50
50 - 100
100 - 200
200 - 500
500 - 1000
<script setup>
import { ref } from 'vue'

const selectedValue = ref([])

const options = [
  { label: '0 - 50', value: 0 },
  { label: '50 - 100', value: 1 },
  { label: '100 - 200', value: 2 },
  { label: '200 - 500', value: 3 },
  { label: '500 - 1000', value: 4 },
]
</script>

<template>
  <c-select
    v-model="selectedValue"
    placeholder="请选择"
    :options="options"
    clearable
    multiple
  />
</template>
点击展开/收起代码
点击打开交互式编辑器

CSelect API

Props
Events
placeholder
string
默认值  ''

预设文本

size
"sm" | "md" | "lg"
默认值  

尺寸

modelValue
CSelectModelValue
*

选中值，用于v-model绑定

options
Array<COption>
默认值  () => []

选项

multiple
boolean
默认值  false

是否支持多选

clearable
boolean
默认值  

内容是否可清除

disabled
boolean
默认值  false

是否禁用

rounded
boolean
默认值  false

是否为圆角