Input 输入框

MoInput 用于文本输入、多行文本和标签输入。普通文本使用 v-model，标签输入同时使用 v-model 和 v-model:tags：v-model 保存当前正在输入的文本，v-model:tags 保存已生成的标签数组。

基础用法

Light

当前值：Mojo UI

Dark

当前值：Mojo UI

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

const name = ref("");
</script>

<template>
  <MoInput v-model="name" placeholder="请输入名称" clearable />
</template>

尺寸

Light

Dark

<MoInput size="small" placeholder="Small" />
<MoInput placeholder="Default" />
<MoInput size="large" placeholder="Large" />

前缀与后缀

Light

⌕⌘K

Dark

⌕⌘K

<MoInput v-model="keyword" placeholder="搜索">
  <template #prefix>⌕</template>
  <template #suffix>⌘K</template>
</MoInput>

Textarea 与字数统计

Light

这是一段多行文本内容，用于展示 textarea 和字数统计。31 / 120

Dark

这是一段多行文本内容，用于展示 textarea 和字数统计。31 / 120

<MoInput
  v-model="intro"
  type="textarea"
  :rows="4"
  :maxlength="120"
  show-word-limit
  resize="vertical"
  placeholder="请输入说明"
/>

禁用与只读

Light

Dark

<MoInput disabled model-value="禁用状态" />
<MoInput v-model="value" readonly />

标签输入

输入文字后按 Enter 生成标签。默认不允许重复标签；需要允许重复时传 allow-duplicate-tags。

Light

VueVitePress

标签：Vue、VitePress

Dark

VueVitePress

标签：Vue、VitePress

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

const keyword = ref("");
const tags = ref(["Vue"]);
</script>

<template>
  <MoInput
    v-model="keyword"
    v-model:tags="tags"
    taggable
    placeholder="输入后按 Enter"
  />
</template>

事件

Light

等待输入

Dark

等待输入

<MoInput
  v-model="value"
  clearable
  @input="handleInput"
  @change="handleChange"
  @clear="handleClear"
/>

API

属性	说明	类型	默认值
v-model	输入值	string | number	""
v-model:tags	标签列表，开启 taggable 时使用	string[]	[]
type	输入类型	text | textarea	text
size	尺寸	small | default | large	default
theme	主题	light | dark	light
placeholder	占位文本	string	-
maxlength	最大长度	number | string	-
showWordLimit	是否显示字数统计，需要同时设置 maxlength	boolean	false
rows	文本域行数	number | string	3
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
clearable	是否显示清空按钮，仅普通文本输入有效	boolean	false
taggable	是否启用标签输入，仅 type="text" 有效	boolean	false
allowDuplicateTags	是否允许重复标签	boolean	false
resize	文本域缩放方式	none | both | horizontal | vertical	vertical

Events

事件	说明	参数
input	输入时触发	value: string
change	原生 change 事件触发时触发	value: string
clear	点击清空按钮时触发	-
tagAdd	标签输入按 Enter 成功新增标签时触发	value: string
tagRemove	点击标签关闭按钮时触发	value: string, index: number

Slots

插槽	说明
prefix	前缀内容，普通输入和标签输入可用
suffix	后缀内容，普通输入和标签输入可用