input根据placeholder扩展 , 具体情境在vue2中 , el-form中尝试网上例子还没成功

Vue2 el-form中el-input组件placeholder宽度自动增加根据实现方法是什么？

2 个回答

得票最新

smallStone

566325

发布于
4 月 10 日湖北

更新于
4 月 10 日

✓ 已被采纳

我这里站在 @fuGUI 的肩膀上做一波修改.即可实现.主要还是继承和替换.
新建一个self_input.js文件.

/* self_input.js */
import { Input } from 'element-ui'
onst self_Input = Input
const InputPatched = {
    extends: self_Input,
    mounted() {
          if (this.type == 'text') {
            const input = this.getInput() // 此方法是el-input提供的内置方法
            const span = document.createElement('span');
            const style = window.getComputedStyle(input);
            span.style.visibility = 'hidden';
            span.style.position = 'absolute';
            span.style.fontSize = style.fontSize;
            span.style.fontFamily = style.fontFamily;
            span.style.fontWeight = style.fontWeight;
            span.style.whiteSpace = 'nowrap';
            span.textContent = input.placeholder;

            document.body.appendChild(span);
            const width = span.offsetWidth + 30; // 增加 padding 宽度
            document.body.removeChild(span);
            input.style.minWidth = `${width}px`; // 这个地方设置最小宽度
        }
    },
}
export default {
  install(Vue) {
    Vue.component(self_Input.name, InputPatched)
  }
}

然后在main.js中引入：

/* main.js */
import PATCH_ElINput from './self_input.js'
Vue.use(ElementUI) // 一定要在这个后面引入,才能覆盖原始el-input
Vue.use(PATCH_ElINput)

如此这般,即可不用修改任何项目内,代码就可以实现按placeholder实现最小宽度.

fuGUI

1.6k2622

发布于
4 月 10 日湖北

是这种效果么？

具体demo代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>全局 el-input placeholder 自动宽度</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Element UI & Vue -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    .el-input input::placeholder {
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div id="app" style="padding: 40px;">
    <h2>input自动适配 placeholder 宽度</h2>
    <el-form label-width="100px">
      <el-form-item label="用户名">
        <el-input placeholder="请输入用户名" v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input placeholder="请输入你的电子邮箱地址" v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="城市">
        <el-input placeholder="城市" v-model="form.city"></el-input>
      </el-form-item>
    </el-form>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          form: {
            username: '',
            email: '',
            city: ''
          }
        };
      },
      mounted() {
        this.applyPlaceholderWidths(); // 初始化设置
        this.observeInputChanges();   // 监听动态变化
      },
      methods: {
        applyPlaceholderWidths() {
          const inputs = document.querySelectorAll('.el-input input[placeholder]');
          inputs.forEach(input => {
            if (input.dataset._placeholderWidthSet) return;

            const span = document.createElement('span');
            const style = window.getComputedStyle(input);
            span.style.visibility = 'hidden';
            span.style.position = 'absolute';
            span.style.fontSize = style.fontSize;
            span.style.fontFamily = style.fontFamily;
            span.style.fontWeight = style.fontWeight;
            span.style.whiteSpace = 'nowrap';
            span.textContent = input.placeholder;

            document.body.appendChild(span);
            const width = span.offsetWidth + 30; // 增加 padding 宽度
            document.body.removeChild(span);

            input.style.minWidth = `${width}px`; // 这个地方设置最小宽度
            input.dataset._placeholderWidthSet = 'true';
          });
        },
        observeInputChanges() {
          const observer = new MutationObserver(() => {
            this.applyPlaceholderWidths();
          });
          observer.observe(document.body, {
            childList: true,
            subtree: true
          });
        }
      }
    });
  </script>
</body>
</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

Vue2 el-form中el-input组件placeholder宽度自动增加根据实现方法是什么？

你尚未登录，登录后可以

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

vue2.6 router.js 路由文件的这样写法是按需加载吗？

前端开发时，浏览器加载图片资源怎么在请求头里添加token?

element组件没有样式？

Vue2 和 Vue CLI 中如何仅忽略某一种 v-for 警告？

webpack打包器更换rsbuild?