element-plus教程：Input 输入框

一、基础用法

1. 引入Input组件

首先，确保你已经在项目中安装了Element Plus，并在main.js或main.ts中引入了Element Plus及其样式。

2. 使用<el-input>组件

<el-input>组件用于创建一个输入框。你可以通过v-model指令来双向绑定输入框的值。

<template>
  <el-input v-model="input" placeholder="请输入内容"></el-input>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const input = ref('');

    return {
      input
    };
  }
};
</script>

二、常用属性

Element Plus的Input输入框提供了多个属性，以满足不同的需求。以下是一些常用的属性：

属性	类型	说明
v-model	String/Number	双向绑定输入框的值
placeholder	String	输入框为空时显示的占位符文本
disabled	Boolean	是否禁用输入框
clearable	Boolean	是否显示清空按钮，点击可清空输入框内容
show-password	Boolean	是否显示切换显示隐藏密码的按钮，仅在type="password"时有效
type	String	输入框的类型，如text、password、email等，默认为text
maxlength	Number	输入的最大字符数
minlength	Number	输入的最小字符数
autosize	Boolean/Object	是否根据内容自动调整高度，对象形式可指定最小行数和最大行数
prefix-icon	String	输入框头部图标的类名，也可以使用slot来放置图标
suffix-icon	String	输入框尾部图标的类名，也可以使用slot来放置图标
size	String	输入框的尺寸，可选值为medium/small/mini，默认为medium

三、常用事件

Input输入框还提供了多个事件，以便在特定情况下执行自定义逻辑。以下是一些常用的事件：

事件名称	说明	回调参数
input	当输入框内容变化时触发的事件	输入框的值
change	当输入框失去焦点且内容变化时触发的事件	输入框的值
clear	点击清空按钮时触发的事件	-
focus	当输入框获得焦点时触发的事件	输入框的值
blur	当输入框失去焦点时触发的事件	输入框的值

四、高级用法

1. 文本域

如果你需要输入多行文本，可以使用type="textarea"属性将Input输入框转换为文本域。同时，你可以通过rows属性设置文本域的初始行数，或者通过autosize属性使文本域根据内容自动调整高度。

<template>
  <el-input type="textarea" v-model="textarea" :rows="2" placeholder="请输入内容"></el-input>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const textarea = ref('');

    return {
      textarea
    };
  }
};
</script>

2. 密码框

使用type="password"属性可以创建一个密码框，同时结合show-password属性可以添加一个按钮，点击按钮可以切换显示或隐藏密码。

<template>
  <el-input type="password" v-model="password" show-password placeholder="请输入密码"></el-input>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const password = ref('');

    return {
      password
    };
  }
};
</script>

3. 复合型输入框

你可以通过slot来在输入框的前置或后置位置插入自定义内容，如标签、按钮或选择器等，以创建复合型输入框。

<template>
  <el-input v-model="input" placeholder="请输入内容">
    <template #prepend>Http://</template>
    <template #append>.com</template>
  </el-input>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const input = ref('');

    return {
      input
    };
  }
};
</script>

五、样式定制

你可以通过CSS来自定义Input输入框的样式，如更改背景色、边框、字体等。Element Plus提供了多种方式来覆盖默认样式，如使用::v-deep伪元素选择器或直接修改组件的class名。

六、注意事项

• 在使用v-model指令绑定输入框的值时，请确保绑定的变量是可变的（如使用ref或reactive创建）。
• 当输入框的类型为password且启用了show-password属性时，请确保输入框的值是安全的，避免在前端明文存储敏感信息。
• 在使用复合型输入框时，请确保插入的自定义内容不会遮挡输入框的文本或影响用户输入。

通过以上教程，你应该能够掌握Element Plus中Input输入框的基本用法和高级特性。在实际应用中，你可以根据具体需求进行灵活配置和扩展。