代码
demo\src\App.vue
<script setup>
import { ref } from 'vue'
const name = ref('')
const password = ref('')
const content = ref('邓瑞编程')
const url = ref('dengruicode.com')
const url2 = ref('dengruicode')
const email = ref('123456')
//const selected = ref('')
const selected = ref('2') //选中的下拉框
</script>
<template>
<div style="width: 300px;">
<!-- clearable 可一键清空 -->
<h3>输入框</h3>
<el-input v-model="name" clearable placeholder="请输入用户名" />
<!-- show-password 可切换显示隐藏密码 -->
<h3>密码框</h3>
<el-input v-model="password" show-password placeholder="请输入密码" />
<h3>文本域</h3>
<el-input type="textarea" v-model="content" rows="2" />
<h3>输入内容长度限制 - 输入框</h3>
<el-input v-model="name" maxlength="10" show-word-limit />
<h3>输入内容长度限制 - 文本域</h3>
<el-input type="textarea" v-model="content" maxlength="20" rows="3" show-word-limit />
<h3>尺寸</h3>
大 <el-input size="large" />
默认 <el-input />
小 <el-input size="small" />
<h3>前置</h3>
<el-input v-model="url">
<template #prepend>https://</template>
</el-input>
<h3>后置</h3>
<el-input v-model="email">
<template #append>@qq.com</template>
</el-input>
<h3>前置后置</h3>
<el-input v-model="url2">
<template #prepend>https://</template>
<template #append>.com</template>
</el-input>
<h3>前置后置扩展 - 搜索</h3>
<el-input placeholder="请输入课程名称">
<template #prepend>
<el-select v-model="selected" placeholder="请选择" style="width: 100px;">
<el-option label="前端" value="1" />
<el-option label="后端" value="2" />
<el-option label="服务端" value="3" />
</el-select>
</template>
<template #append>
<el-button>
<el-icon><Search /></el-icon>
</el-button>
</template>
</el-input>
</div>
</template>
<style scoped>
</style>