选择与日期

下拉选择、单选、多选与日期选择。

下拉选择

选择城市

<script setup>
import { ref } from 'vue'
import { NSelect } from 'naive-ui'

const city = ref(null)
const cities = [
  { label: '北京', value: 'beijing' },
  { label: '上海', value: 'shanghai' },
  { label: '广州', value: 'guangzhou' },
  { label: '深圳', value: 'shenzhen' }
]
</script>

<template>
  <n-select
    v-model:value="city"
    :options="cities"
    placeholder="选择城市"
    clearable
    filterable
    style="max-width: 320px"
  />
</template>

单选

 

选项 A

 

选项 B

 

选项 C（禁用）

<script setup>
import { ref } from 'vue'
import { NRadio, NRadioGroup, NSpace } from 'naive-ui'

const radioValue = ref('a')
</script>

<template>
  <n-radio-group v-model:value="radioValue">
    <n-space>
      <n-radio value="a">选项 A</n-radio>
      <n-radio value="b">选项 B</n-radio>
      <n-radio value="c" disabled>选项 C（禁用）</n-radio>
    </n-space>
  </n-radio-group>
</template>

多选

 

苹果

 

香蕉

 

橙子

<script setup>
import { ref } from 'vue'
import { NCheckbox, NCheckboxGroup, NSpace } from 'naive-ui'

const checks = ref(['apple'])
</script>

<template>
  <n-checkbox-group v-model:value="checks">
    <n-space>
      <n-checkbox value="apple">苹果</n-checkbox>
      <n-checkbox value="banana">香蕉</n-checkbox>
      <n-checkbox value="orange">橙子</n-checkbox>
    </n-space>
  </n-checkbox-group>
</template>

日期

选择日期

Start Date

End Date

<script setup>
import { ref } from 'vue'
import { NDatePicker, NSpace } from 'naive-ui'

const date = ref(null)
const range = ref(null)
</script>

<template>
  <n-space vertical>
    <n-date-picker v-model:value="date" type="date" placeholder="选择日期" />
    <n-date-picker v-model:value="range" type="daterange" placeholder="选择日期范围" />
  </n-space>
</template>