ETU组件库

Appearance

Return to top
On this page

Input 输入框

通过鼠标或键盘输入字符

基础用法 

<template>
  <etu-input v-model="input" placeholder="Please input" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
const input = ref("");
</script>

<template>
  <etu-input v-model="input" placeholder="Please input" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
const input = ref("");
</script>

禁用状态

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

<template>
  <etu-input v-model="input" disabled placeholder="Please input" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
const input = ref("");
</script>

<template>
  <etu-input v-model="input" disabled placeholder="Please input" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
const input = ref("");
</script>

一键清空

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

<template>
  <etu-input v-model="input" placeholder="Please input" :clearable="true" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
const input = ref("");
</script>

<template>
  <etu-input v-model="input" placeholder="Please input" :clearable="true" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
const input = ref("");
</script>

密码框

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

<template>
  <etu-input
    v-model="input"
    type="password"
    placeholder="Please input password"
    show-password
  />
</template>

<script lang="ts" setup>
import { ref } from "vue";
const input = ref("");
</script>

<template>
  <etu-input
    v-model="input"
    type="password"
    placeholder="Please input password"
    show-password
  />
</template>

<script lang="ts" setup>
import { ref } from "vue";
const input = ref("");
</script>

带图标的输入框

带有图标标记输入类型

要在输入框中添加图标，你可以简单地使用 prefix-icon 和 suffix-icon 属性

<template>
  <etu-input
    type="text"
    placeholder="请输入内容..."
    v-model="input"
    prefixIcon="pad"
  />
  <etu-input placeholder="请输入内容..." suffixIcon="cry"></etu-input>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const input = ref("");
</script>

<template>
  <etu-input
    type="text"
    placeholder="请输入内容..."
    v-model="input"
    prefixIcon="pad"
  />
  <etu-input placeholder="请输入内容..." suffixIcon="cry"></etu-input>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const input = ref("");
</script>

复合型输入框

可以在输入框中前置或后置一个元素，通常是标签或按钮。

https://
.com 
<template>
  <etu-input v-model="input" placeholder="Please input">
    <template #prepend>https://</template>
    <template #append> .com </template>
  </etu-input>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const input = ref("");
</script>

<template>
  <etu-input v-model="input" placeholder="Please input">
    <template #prepend>https://</template>
    <template #append> .com </template>
  </etu-input>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const input = ref("");
</script>

尺寸

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

<template>
  <etu-input v-model="input" placeholder="Please input" size="small" />
  <etu-input v-model="input" placeholder="Please input" size="medium" />
  <etu-input v-model="input" placeholder="Please input" size="large" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
const input = ref("");
</script>

<template>
  <etu-input v-model="input" placeholder="Please input" size="small" />
  <etu-input v-model="input" placeholder="Please input" size="medium" />
  <etu-input v-model="input" placeholder="Please input" size="large" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
const input = ref("");
</script>

文本域

用于输入多行文本信息可缩放的输入框。 添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。

<template>
  <etu-input v-model="textarea" type="textarea" placeholder="Please input" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
const textarea = ref("");
</script>

<template>
  <etu-input v-model="textarea" type="textarea" placeholder="Please input" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
const textarea = ref("");
</script>

API

属性名说明类型默认值
type类型stringtext
v-model绑定值string / number——
placeholder输入框占位文本string——
clearable清除按钮booleanfalse
show-password是否显示切换密码图标booleanfalse
disabled是否禁用booleanfalse
size输入框尺寸enummedium
prefix-icon自定义前缀图标string / Component——
suffix-icon自定义后缀图标string / Component——