Vue知识点-ElementPlus-05 输入框

官网：Input 输入框 | Element Plus

✅el-input 输入框 要点提炼

注意：是 Element Plus，不是旧版 Element UI，插槽、属性有区别

1. 基础双向绑定

• v-model 绑定 ref 变量，实现双向数据绑定
• ✅ 输入框必须绑定 v-model，不用单独写 name（你注释里那句"不绑定name抛不上来"是误区，v-model 才是核心，原生name只是表单原生属性，和组件事件传值无关）
• clearable：开启清空按钮，输入内容后右侧出现 × 一键清空

2. 字符长度限制

• maxlength="数字"：限制最大输入字符数
• show-word-limit：右下角显示 已输入/总上限 字符计数，搭配 maxlength 使用

3. 密码输入框

• show-password：开启密码显隐切换，自动变成密码框，自带眼睛图标切换明文/密文

4. 文本域 textarea

• type="textarea" 转为多行文本框
• :rows="n"：控制默认展示行数（不是最大行数，只是可视高度）
• 同样支持 clearable、maxlength、show-word-limit

5. 尺寸 size

三个可选值：large / 默认（中等，不写size） / small

size="small"
size="large"

6. 前后插槽（重点！容易踩坑）

• #prepend：输入框外侧前缀（左边，输入框容器前面，不是输入框内部）
• #append：输入框外侧后缀 （右边，输入框容器后面） ❗ 易错：el-input 外层插槽是 prepend / append； prefix / suffix 是输入框内部图标插槽（在输入框里面），不要搞混！

✅ 插槽里面可以放任意组件：el-select、el-button、文字、图标等

7. 插槽组合示例

prepend 放下拉选择框，append 放搜索按钮，实现组合输入搜索栏

频踩坑清单

1. 不要把 prepend 和 prefix 搞混：
   • prepend：输入框外面左边
   • prefix：输入框里面左边图标
2. 多个输入框不要共用同一个 v-model 变量，值会同步覆盖
3. show-word-limit 必须配合 maxlength 才会正常显示计数
4. show-password 只对普通输入框生效，textarea 不支持
5. 插槽是具名插槽，Vue3 写法 #prepend，等价于 v-slot:prepend

<template>
  <div class="myclass">

    <h3>输入框</h3>
    <!--
    如果不绑定name，子组件不能把数据抛上来
    clearable可清除 ，输入后追加一个×
    -->
    <el-input v-model="name" placeholder="请输入" clearable/>

    <h3>输入框：长度限制</h3>
    <!-- maxlength 长度限制 -->
    <!-- show-word-limit 显示还能输入的字符数量 -->
    <el-input v-model="password" placeholder="请输入" clearable
              maxlength="20" show-word-limit/>


    <h3>密码框,show-password自动变密码框</h3>
    <!-- show-password自动变成密码框 -->
    <el-input v-model="name2" placeholder="请输入密码"
              show-password/>


    <h3>文本框</h3>
    <!-- rows默认展示几行-->
    <el-input type="textarea" v-model="content"
              :rows="2"
              clearable maxlength="20" show-word-limit></el-input>

    <h3>大小</h3>
    <el-input v-model="name" size="small" placeholder="请输入" clearable/>
    <br>
    <el-input v-model="name" placeholder="请输入" clearable/>
    <br>
    <el-input v-model="name" size="large" placeholder="请输入" clearable/>


    <h3>前后缀</h3>
    <el-input v-model="url" placeholder="请输入" clearable>
      <!-- 具名插槽，前缀插槽是prepend，不是prefix! -->
      <template #prepend>
        https://
      </template>

      <!-- 具名插槽，后缀 -->
      <template #append>
        .com
      </template>
    </el-input>

    <h3>前缀用下拉框</h3>
    <el-input v-model="url" placeholder="请输入课程名称" clearable>
      <!-- 具名插槽，前缀插槽是prepend，不是prefix!  -->
      <template #prepend>
        <el-select v-model="selected" placeholder="请选择" style="width: 100px;">
          <el-option label="java" value="1"></el-option>
          <el-option label="python" value="2"></el-option>
          <el-option label="go" value="3"></el-option>
        </el-select>
      </template>

      <template #append>
        <el-button>
          <el-icon>
            <Search/>
          </el-icon>
          <span>搜索</span>
        </el-button>
      </template>

    </el-input>
  </div>


</template>

<script lang="ts" setup>

import {ref} from "vue";

let name = ref('')
let name2 = ref('')
let password = ref('')
let content = ref('')
let url = ref('')
let selected = ref('')

</script>

<style scoped>
.myclass {
  width: 400px;
}
</style>