el-input 输入框宽度自适应宽度

利用一个隐藏的 <span>（称为 mirror）渲染当前输入内容：

该 span 使用与 <el-input> 相同的字体样式；
每次输入时，根据 span.offsetWidth 动态计算内容宽度；
将该宽度赋给 <el-input> 的 style.width；
给输入框增加少许 padding 余量，保证视觉舒适。
<template> <el-form :model="form" label-width="auto" class="auto-form"> <el-form-item label="Activity name">
{{ form.name || placeholder }}
复制代码
```
     
     <el-input
       v-model="form.name"
       :style="{ width: inputWidth + 'px' }"
       :placeholder="placeholder"
       class="auto-el-input"
       @input="updateWidth"
     />
   </div>
 </el-form-item>

 <el-form-item>
   <el-button type="primary" @click="onSubmit">Create</el-button>
   <el-button @click="onCancel">Cancel</el-button>
 </el-form-item>
```
</el-form> </template> <script lang="ts" setup> import { ref, reactive, onMounted, nextTick } from 'vue'
// 表单数据
const form = reactive({
name: ''
})

// 占位文字（用于在空值时计算最小宽度）
const placeholder = '请输入活动名称'

// 输入框宽度（默认最小 100px）
const inputWidth = ref(100)
const mirror = ref<HTMLElement | null>(null)

// 动态更新输入框宽度
const updateWidth = () => {
if (mirror.value) {
// 同步文字
mirror.value.textContent = form.name || placeholder
// 计算宽度 + 内边距
inputWidth.value = mirror.value.offsetWidth + 24
}
}

onMounted(async () => {
await nextTick()
updateWidth()
})

const onSubmit = () => {
console.log('提交数据:', form)
}

const onCancel = () => {
form.name = ''
updateWidth()
}
</script>
<style scoped> .auto-form { max-width: 500px; margin: 40px auto; }
.input-auto-wrapper {
display: inline-block;
position: relative;
}

.mirror {
position: absolute;
visibility: hidden;
white-space: pre;
font: inherit; /* 与 el-input 保持一致 */
padding: 0 12px;
}

.auto-el-input {
transition: width 0.2s ease;
}
</style>

限制最大宽度

复制代码

inputWidth.value = Math.min(mirror.value.offsetWidth + 24, 400)

此方案无需修改 Element Plus 源码，通过一个简单的隐藏 span 即可实现原生级别的动态自适应宽度输入框效果