Input 输入框

基本用法

输入框的基本用法。

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

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

<template>
  <l-space>
    <l-input placeholder="请输入内容" allow-clear v-model="input" width="300px" />
    <l-input
      placeholder="请输入内容"
      default-value="默认值"
      allow-clear
      v-model="input"
      width="300px"
    />
  </l-space>
</template>

输入框状态

可以通过status设置, 包括success, warning, error三种状态。

也可以直接设置success, warning, error属性。

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

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

<template>
  <l-space wrap>
    <l-input placeholder="请输入内容" v-model="input" width="300px" success />
    <l-input placeholder="请输入内容" v-model="input" width="300px" status="success" />
    <l-input placeholder="请输入内容" v-model="input" width="300px" warning />
    <l-input placeholder="请输入内容" v-model="input" width="300px" status="warning" />
    <l-input placeholder="请输入内容" v-model="input" width="300px" danger />
    <l-input placeholder="请输入内容" v-model="input" width="300px" status="danger" />
    <l-input placeholder="禁用" v-model="input" width="300px" disabled />
  </l-space>
</template>

输入框尺寸

可以通过size属性设置输入框的尺寸，包括small, medium, large三种尺寸。

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

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

<template>
  <l-space wrap>
    <l-input placeholder="请输入内容" size="small" v-model="input" width="300px" />
    <l-input placeholder="请输入内容" size="medium" v-model="input" width="300px" />
    <l-input placeholder="请输入内容" size="large" v-model="input" width="300px" />
  </l-space>
</template>

前缀与后缀

通过指定prefix和suffix插槽, 可以在输入框内添加前缀和后缀。

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

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

<template>
  <l-space>
    <l-input placeholder="请输入内容" allow-clear v-model="input" width="300px">
      <template #prefix><l-icon icon="user" /></template>
    </l-input>
    <l-input placeholder="请输入内容" allow-clear v-model="input" width="300px">
      <template #suffix><l-icon icon="info-circle" /></template>
    </l-input>
  </l-space>
</template>

前置、后置标签

通过指定prepend和append插槽, 可以在输入框前后添加元素。

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

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

<template>
  <l-space>
    <l-input placeholder="请输入内容" allow-clear v-model="input" width="300px">
      <template #prepend>+86</template>
    </l-input>
    <l-input placeholder="请输入内容" allow-clear v-model="input" width="300px">
      <template #append>RMB</template>
    </l-input>
  </l-space>
</template>

密码输入框

可以通过设置type属性为password来实现密码输入框。

通过showPassword属性设置是否显示密码，默认不显示。

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

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

<template>
  <l-space>
    <l-input
      type="password"
      placeholder="请输入内容"
      show-password
      allow-clear
      v-model="input"
      width="300px"
    />
  </l-space>
</template>

文本域

可以通过设置type属性为textarea来实现文本域。

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

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

<template>
  <l-space>
    <l-input placeholder="请输入内容" type="textarea" v-model="input" width="300px" />
  </l-space>
</template>

Input API

Props

属性名	描述	类型	默认值
type	原生 input 类型 text 、 password 、 textarea 等	string	text
modelValue	绑定值	string | number	-
size	输入框尺寸	small | medium | large	medium
status	输入框状态	success | warning | error	-
defalutValue	输入框默认值	string | number	-
placeholder	输入框占位符	string	-
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
success	成功状态	boolean	false
warning	警告状态	boolean	false
error	错误状态	boolean	false
showPassword	是否显示密码	boolean	false
clearable	是否显示清除按钮	boolean	false
width	输入框宽度	string	-
style	输入框样式	CSSProperties	-

Events

事件名	描述	回调参数
input	input 值变化	-
change	仅当 modelValue 值变化, 输入框失去焦点或用户按 Enter 时触发	-
focus	输入框获得焦点	-
blur	输入框失去焦点	-
clear	点击clearable属性生成的清除按钮	-

Slots

插槽名	描述
prefix	输入框前缀内容
suffix	输入框后缀内容
prepend	输入框前置内容
append	输入框后置内容

Exposed

名称	描述
ref	输入框实例
clear	清除输入框内容
focus	聚焦输入框
blur	失焦输入框
select	选中输入框内容