Input输入框

通过鼠标或键盘输入字符

WARNING

WARNING

Input 为受控组件，它 总会显示 Vue 绑定值。

在正常情况下，input 的输入事件应该被正常响应。 它的处理程序应该更新组件的绑定值 (或使用 v-model)。 否则，输入框的值将不会改变。

不支持 v-model 修饰符。

基础用法

基础按钮，使用 type属性来定义不同类型的按钮。

基础用法

Input组件的基础用法

<template lang="">
  <div>
    <el-input>
      <template #prefix>
      </template>
    </el-input>
    <el-input showClear></el-input>
  </div>
</template>
<script setup lang="ts">
import ElInput from '@/components/Input/Input.vue'
import ElIcon from '@/components/Icon/Icon.vue'
</script>
<style lang="">
  
</style>

Disabled

基础用法

Input组件的基础用法

<template lang="">
  <div>
    <el-input disabled></el-input>
  </div>
</template>
<script setup lang="ts">
import ElInput from '@/components/Input/Input.vue'
</script>
<style lang="">
  
</style>

Size

基础用法

Input组件的基础用法

<template lang="">
  <div>
    <el-input size="large"></el-input>
    <el-input size="small"></el-input>
    <el-input></el-input>
  </div>
</template>
<script setup lang="ts">
import ElInput from '@/components/Input/Input.vue'
</script>
<style lang="">
  
</style>

密码框切换

基础用法

Input组件的基础用法

<template lang="">
  <div>
    <el-input showPassword></el-input>
  </div>
</template>
<script setup lang="ts">
import ElInput from '@/components/Input/Input.vue'
import ElIcon from '@/components/Icon/Icon.vue'
</script>
<style lang="">
  
</style>

Icon

基础用法

Input组件的基础用法

<template lang="">
  <div>
    <el-input>
      <template #suffix>
        <el-icon icon="calendar"></el-icon>
      </template>
    </el-input>
    <el-input>
      <template #prefix>
        <el-icon icon="magnifying-glass"></el-icon>
      </template>
    </el-input>
  </div>
</template>
<script setup lang="ts">
import ElInput from '@/components/Input/Input.vue'
import ElIcon from '@/components/Icon/Icon.vue'

</script>

Prefix

基础用法

Input组件的基础用法

Http://

.com

<template lang="">
  <div>
    <el-input>
      <template #prepend>
        Http://
      </template>
    </el-input>
    <el-input>
      <template #append>.com</template>
    </el-input>
  </div>
</template>
<script setup lang="ts">
import ElInput from '@/components/Input/Input.vue'
defineOptions({
  name: 'InputView'
})
</script>
<style lang="">
  
</style>