el-input获取焦点时宽度会被内容撑开怎么办

在 Vue.js 中，如果你使用 Element UI 的 `el-input` 组件并且发现输入框获得焦点时宽度被内容撑开，这通常是由于默认行为导致的，`el-input` 会根据其内部文本的长度自动调整宽度。为了解决这个问题，你可以采取以下几种方法：

1. **设置初始宽度**：
在 `<el-input>` 标签中添加 `style` 属性并设置固定的最小宽度，如 `style="min-width: 200px;"`。

<el-input style="min-width: 200px;" v-model="inputValue"></el-input>

2. **使用 `resize` 事件**：
如果输入框的内容可能变化很大，你可以在 `@focus` 事件触发时手动限制输入框的宽度。

<template>
  <div>
    <el-input ref="input" :value="inputValue" @focus="setFixedWidth" />
  </div>
</template>

<script>
export default {
  methods: {
    setFixedWidth() {
      const input = this.$refs.input;
      input.style.width = '200px'; // 或者你想设定的固定宽度
    },
  },
};
</script>

3. **使用自定义指令或组件**：
如果你想要更灵活地控制，可以创建一个自定义指令或组件，重写 `input` 元素的样式。

// 自定义指令
Vue.directive('no-auto-resize', {
  inserted(el) {
    el.addEventListener('input', function (e) {
      if (this.value.length > 10) { // 可根据需求调整阈值
        el.style.width = 'auto';
      } else {
        el.style.width = '200px';
      }
    });
  },
});

// 使用自定义指令
<el-input v-no-auto-resize v-model="inputValue" ></el-input>

以上方法可以帮助你避免 `el-input` 宽度被内容过度撑开的问题。选择哪种取决于你的具体需求和项目的复杂程度。