MMCAT UI

Appearance

Input 输入框 ​

通过鼠标或键盘输入内容，是最基础的表单域的包装

基本使用 ​

.lazy

默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据。

vue
<!-- 在 "change" 事件后同步更新而不是 "input" -->
<mc-input v-model.lazy="lazyValue" />
<!-- 在 "change" 事件后同步更新而不是 "input" -->
<mc-input v-model.lazy="lazyValue" />
Show Code
vue
<template>
  <div class="example">
    <mc-input v-model="value" placeholder="Basic usage" />
    <mc-input v-model.lazy="lazyValue" placeholder="Lazy usage" />
  </div>
</template>
<template>
  <div class="example">
    <mc-input v-model="value" placeholder="Basic usage" />
    <mc-input v-model.lazy="lazyValue" placeholder="Lazy usage" />
  </div>
</template>

前缀和后缀 ​

要在输入框中添加图标，你可以使用 prefix 和 suffix 命名的插槽 。另外，也可以直接使用 prefix 和 suffix 属性插入 String。

￥RMB
Show Code
vue
<template>
  <!-- slot -->
  <mc-input v-model="value" placeholder="slots">
    <template #prefix>
      <User></User>
    </template>
    <template #suffix>
      <Edit></Edit>
    </template>
  </mc-input>
  <!-- props -->
  <mc-input v-model="value" prefix="￥" suffix="RMB" placeholder="props" />
</template>
<template>
  <!-- slot -->
  <mc-input v-model="value" placeholder="slots">
    <template #prefix>
      <User></User>
    </template>
    <template #suffix>
      <Edit></Edit>
    </template>
  </mc-input>
  <!-- props -->
  <mc-input v-model="value" prefix="￥" suffix="RMB" placeholder="props" />
</template>

尺寸 ​

使用 size 属性改变输入框大小。 除了默认大小外，还有另外两个选项： large , small。

Show Code
vue
<template>
  <mc-input v-model="value" size="large" placeholder="large" />
  <mc-input v-model="value" placeholder="default" />
  <mc-input v-model="value" size="small" placeholder="small" />
</template>
<template>
  <mc-input v-model="value" size="large" placeholder="large" />
  <mc-input v-model="value" placeholder="default" />
  <mc-input v-model="value" size="small" placeholder="small" />
</template>

一键清空 ​

使用 allow-clear 属性即可得到一个可一键清空的输入框

Show Code
vue
<template>
  <mc-input v-model="value" allow-clear placeholder="input allow clear" />
</template>
<template>
  <mc-input v-model="value" allow-clear placeholder="input allow clear" />
</template>

密码框 ​

使用 password 属性即可得到一个可切换显示隐藏的密码框

Show Code
vue
<template>
  <mc-input v-model="value" password allow-clear placeholder="password" />
</template>
<template>
  <mc-input v-model="value" password allow-clear placeholder="password" />
</template>

禁用状态 ​

通过 disabled 属性指定是否禁用 input 组件

Show Code
vue
<template>
  <mc-input v-model="value" disabled placeholder="disabled" />
</template>
<template>
  <mc-input v-model="value" disabled placeholder="disabled" />
</template>

API ​

Attributes ​

属性名说明类型默认值
size输入框大小'large' | 'default' | 'small'default
model-value / v-model绑定值'string' | 'number'—
allowClear可以点击清除图标删除内容booleanfalse
password是否启用密码框booleanfalse
prefix前缀图标string—
suffix后缀图标string—
disabled是否禁用booleanfalse