输入控件

文本输入、数字输入、滑块与评分。

文本输入

单行输入

密码输入

多行输入

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

const text = ref('')
const password = ref('')
</script>

<template>
  <n-space vertical>
    <n-input v-model:value="text" placeholder="单行输入" clearable />
    <n-input
      v-model:value="password"
      type="password"
      placeholder="密码输入"
      show-password-on="click"
    />
    <n-input v-model:value="text" type="textarea" placeholder="多行输入" :rows="3" />
  </n-space>
</template>

数字与滑块

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

const number = ref(42)
const slider = ref(30)
</script>

<template>
  <n-space vertical :size="20">
    <n-input-number v-model:value="number" :min="0" :max="100" />
    <n-slider v-model:value="slider" :step="5" />
  </n-space>
</template>

评分与开关

开

关

开

关

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

const rate = ref(3)
const switchValue = ref(true)
</script>

<template>
  <n-space align="center" :size="24">
    <n-rate v-model:value="rate" allow-half />
    <n-switch v-model:value="switchValue">
      <template #checked>开</template>
      <template #unchecked>关</template>
    </n-switch>
  </n-space>
</template>