NovaInput 输入框

NovaInput 提供语义化的文本输入体验，保持与原生 <input> 相同的属性与行为，并可结合 NovaEnvironment 注入主题。通过 import { NovaInput } from 'nova-next' 直接使用；如需安装与样式指引，请访问 快速开始。

示例

基础用法

预览

当前输入：受控输入

源码

<script setup lang="ts">
import { ref } from 'vue'
import '@jiangshengdev/nova-next/styles/themes.css'
import '@jiangshengdev/nova-next/styles/input.css'
import { NovaInput } from '@jiangshengdev/nova-next'

const controlledValue = ref('受控输入')
</script>

<template>
  <div class="demo-column">
    <div class="demo-row">
      <NovaInput placeholder="请输入内容" />
      <NovaInput value="默认值" />
      <NovaInput v-model="controlledValue" placeholder="受控输入" />
    </div>
    <p class="demo-tip">当前输入：{{ controlledValue }}</p>
  </div>
</template>

<style scoped>
.demo-column {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 8px;
}

.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.demo-tip {
  margin: 0;
  font-size: 13px;
}
</style>

状态切换

预览

正常状态

禁用状态

只读状态

源码

<script setup lang="ts">
import '@jiangshengdev/nova-next/styles/themes.css'
import '@jiangshengdev/nova-next/styles/input.css'
import { NovaInput } from '@jiangshengdev/nova-next'
</script>

<template>
  <div class="demo-column">
    <div>
      <p class="demo-title">正常状态</p>
      <div class="demo-row">
        <NovaInput placeholder="普通输入框" />
        <NovaInput value="可编辑内容" />
      </div>
    </div>

    <div>
      <p class="demo-title">禁用状态</p>
      <div class="demo-row">
        <NovaInput disabled placeholder="禁用输入框" />
        <NovaInput disabled value="禁用内容" />
      </div>
    </div>

    <div>
      <p class="demo-title">只读状态</p>
      <div class="demo-row">
        <NovaInput readonly placeholder="只读输入框" />
        <NovaInput readonly value="只读内容" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.demo-column {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 16px;
}

.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.demo-title {
  margin: 0 0 8px;
  font-size: 14px;
}
</style>

交互能力

预览

字符计数

字符数：0

动态切换状态

表单操作

源码

<script setup lang="ts">
import { computed, ref } from 'vue'
import '@jiangshengdev/nova-next/styles/themes.css'
import '@jiangshengdev/nova-next/styles/input.css'
import '@jiangshengdev/nova-next/styles/button.css'
import { NovaButton, NovaInput } from '@jiangshengdev/nova-next'

const message = ref('')
const isRequired = ref(false)
const characterCount = computed(() => message.value.length)

const toggleRequired = () => {
  isRequired.value = !isRequired.value
}

const clearInput = () => {
  message.value = ''
}

const submit = () => {
  window.alert(`提交的内容: ${message.value || '（空）'}`)
}
</script>

<template>
  <div class="demo-column">
    <div>
      <p class="demo-title">字符计数</p>
      <div class="demo-row demo-align-center">
        <NovaInput v-model="message" placeholder="输入内容查看计数" />
        <span class="demo-tip">字符数：{{ characterCount }}</span>
      </div>
    </div>

    <div>
      <p class="demo-title">动态切换状态</p>
      <div class="demo-row">
        <NovaInput :required="isRequired" :placeholder="isRequired ? '必填字段' : '非必填字段'" />
        <NovaButton @click="toggleRequired">
          {{ isRequired ? '取消必填' : '设为必填' }}
        </NovaButton>
      </div>
    </div>

    <div>
      <p class="demo-title">表单操作</p>
      <div class="demo-row">
        <NovaInput v-model="message" placeholder="输入一些内容" />
        <NovaButton @click="clearInput">清空</NovaButton>
        <NovaButton primary @click="submit">提交</NovaButton>
      </div>
    </div>
  </div>
</template>

<style scoped>
.demo-column {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 16px;
}

.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.demo-align-center {
  align-items: center;
}

.demo-title {
  margin: 0 0 8px;
  font-size: 14px;
}

.demo-tip {
  font-size: 13px;
}
</style>

属性

名称	说明	类型	默认值
modelValue	受控输入值，可使用 v-model 或手动监听更新同步。	string	null
disabled	禁用输入框并同步样式与 aria-disabled。	boolean	false
readonly	只读模式，不触发更新与 update:modelValue。	boolean	false
wrapperClass	自定义最外层容器类名，可用于控制布局与间距。	unknown	null
wrapperStyle	自定义容器内联样式。	StyleValue	null
class	作用于原生 <input> 的类名，便于定制文本样式。	unknown	null
theme	覆盖环境主题，内部同时写入 data-nova-theme。	string	null

其他属性（如 type、placeholder、required 等）与原生 <input> 保持一致，可直接透传。

插槽

NovaInput 不提供插槽，内容完全由输入值渲染。

事件

名称	说明
update:modelValue	与 modelValue 配套的同步事件，返回最新字符串。
原生事件	支持 input、focus、blur 等全部原生输入事件，直接在组件上监听即可。