Input 输入框

通过鼠标或键盘输入字符

基础用法

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

const value = ref('')
</script>
<template>
  <ZgInput v-model="value" placeholder="基础文本框，请输入" />
  <span>{{ value }}</span>
</template>

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

const value = ref('')
</script>
<template>
  <ZgInput v-model="value" placeholder="基础文本框，请输入" />
  <span>{{ value }}</span>
</template>

禁用状态

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

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

const value = ref('')
</script>
<template>
  <ZgInput v-model="value" placeholder="基础文本框，请输入" disabled />
  <span>{{ value }}</span>
</template>

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

const value = ref('')
</script>
<template>
  <ZgInput v-model="value" placeholder="基础文本框，请输入" disabled />
  <span>{{ value }}</span>
</template>

一键清空

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

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

const value = ref('')
</script>
<template>
  <ZgInput v-model="value" placeholder="基础文本框，请输入" clearable />
  <span>{{ value }}</span>
</template>

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

const value = ref('')
</script>
<template>
  <ZgInput v-model="value" placeholder="基础文本框，请输入" clearable />
  <span>{{ value }}</span>
</template>

密码框

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

const value = ref('')
</script>
<template>
  <ZgInput v-model="value" placeholder="密码文本框，可以切换" showPassword />
</template>

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

const value = ref('')
</script>
<template>
  <ZgInput v-model="value" placeholder="密码文本框，可以切换" showPassword />
</template>

带图标的输入框

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

const value = ref('')
</script>
<template>
  <ZgInput v-model="value" placeholder="基础文本框，请输入">
    <template #prefix>
      <SearchOutlined />
    </template>
    <template #suffix>
      <UserOutlined />
    </template>
  </ZgInput>
</template>

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

const value = ref('')
</script>
<template>
  <ZgInput v-model="value" placeholder="基础文本框，请输入">
    <template #prefix>
      <SearchOutlined />
    </template>
    <template #suffix>
      <UserOutlined />
    </template>
  </ZgInput>
</template>

文本域

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

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

const value = ref('')
</script>
<template>
  <ZgInput v-model="value" placeholder="基础文本框，请输入" type="textarea" />
</template>

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

const value = ref('')
</script>
<template>
  <ZgInput v-model="value" placeholder="基础文本框，请输入" type="textarea" />
</template>

复合型输入框

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

可通过 slot 来指定在 Input 中分发的前置或者后置的内容。

Https://

.com

<script lang="ts" setup>
import { ref } from 'vue'
const test = ref('')
</script>
<template>
  <ZgInput v-model="test" placeholder="prepend append">
    <template #prepend>Https://</template>
    <template #append>.com</template>
  </ZgInput>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const test = ref('')
</script>
<template>
  <ZgInput v-model="test" placeholder="prepend append">
    <template #prepend>Https://</template>
    <template #append>.com</template>
  </ZgInput>
</template>

尺寸

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

<script lang="ts" setup>
import { ref } from 'vue'
const test = ref('')
</script>
<template>
  <div class="size-holder">
    <ZgInput v-model="test" placeholder="大的 Input" size="large"> </ZgInput>
    <ZgInput v-model="test" placeholder="普通的 Input"> </ZgInput>
    <ZgInput v-model="test" placeholder="小的 Input" size="small"> </ZgInput>
  </div>
</template>
<style scoped>
.size-holder {
  display: flex;
  align-items: center;
}
</style>

<script lang="ts" setup>
import { ref } from 'vue'
const test = ref('')
</script>
<template>
  <div class="size-holder">
    <ZgInput v-model="test" placeholder="大的 Input" size="large"> </ZgInput>
    <ZgInput v-model="test" placeholder="普通的 Input"> </ZgInput>
    <ZgInput v-model="test" placeholder="小的 Input" size="small"> </ZgInput>
  </div>
</template>
<style scoped>
.size-holder {
  display: flex;
  align-items: center;
}
</style>

Input Attributes

Name	Description	Type	Default
type	类型	string 等原生 input 类型	text
model-value / v-model	绑定值	`string / number`	—
disabled	是否禁用	`boolean`	false
clearable	是否显示清除按钮，只有当 type 不是 textarea时生效	`boolean`	false
showPassword	是否显示切换密码图标	`boolean`	false
placeholder	输入框占位文本	`string`	—
readonly	原生 readonly 属性，是否只读	`boolean`	false
autofocus	原生属性，自动获取焦点	`boolean`	false
autocomplete	原生 autocomplete 属性	`string`	off
form	原生 form 属性	`string`	—
size	尺寸	`'large'\| 'small'`	—

Input Events

事件名	说明	类型
blur	当选择器的输入框失去焦点时触发	`(value: FocusEvent) => void`
focus	当选择器的输入框获得焦点时触发	`(value: FocusEvent) => void`
clear	在点击由 clearable 属性生成的清空按钮时触发	`() => void`
change	仅当 modelValue 改变时，当输入框失去焦点或用户按Enter时触发	`(value: string ) => void`
input	在 Input 值改变时触发	`(value: string ) => void`

Input Slots

插槽名	Description
prefix	输入框头部内容，只对非 type="textarea" 有效
suffix	输入框尾部内容，只对非 type="textarea" 有效
prepend	输入框前置内容，只对非 type="textarea" 有效
append	输入框后置内容，只对非 type="textarea" 有效

Exposes

名称	说明	类型
ref	HTML元素 input 或 textarea	`HTMLInputElement \| HTMLTextAreaElement`

Input 输入框 ​

基础用法 ​

禁用状态 ​

一键清空 ​

密码框 ​

带图标的输入框 ​

文本域 ​

复合型输入框 ​

尺寸 ​

Input Attributes ​

Input Events ​

Input Slots ​

Exposes ​