vue全局拦截elementui组件生命周期动态给name属性赋值

这两天有位前女性同事问了我一个vue技术问题，大概是这样的，他们公司中台技术部门封装了一套elementui组件（估计就是改了下名字和样式），他们的项目直接拿来用，然后他们项目里估计用了大几十上百个input组件，但是有个新需求是想让input组件显示历史记录，也就是说加上name属性和autocomplete为on，在不让中台部门改的情况下，他只能把所有的input组件一个一个改掉（加上name和autocomplete），但她不想这么麻烦，她打算一次性改掉也就是全局设置，但一直没有成功。以下是解决过程。

---

在mainjs入口文件里，拦截Input的beofreCreate
main.js:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
ElementUI.Input.props.autocomplete="on"
ElementUI.Input.beforeCreate = function() {
  this.$attrs.name = "xuper"
  console.log("aaaaa");
};
ElementUI.Input.beforeUpdate = function() {
  this.$attrs.name = "xuper"
  console.log("cccc");
};

Vue.use(ElementUI);

如图所示，当页面有input组件时，控制台打印出了“aaaaa”，切dom上成功设置了name属性。
注意点：

1. 由于组件生命周期的作用，当input的值改变时（v-model绑定的data变化），触发boforeUpdate钩子，虚拟dom会重新渲染，这时dom上的name属性会丢失，所以需要加上，beforeUpdate的拦截，当数据改变时，再度将name属性设置。
2. beforeCreate和boforeUpdate需要在Vue.use(ElementUI)之前进行拦截，否则ElementUI Install之后无法再触发两个生命周期函数。
3. 之所以拦截生命周期再去赋值是为了动态设置name的值，她是想把v-model绑定的变量值名称（比如v-model="login_name"）赋给name="login_name"，我只是写的demo而已。

---

动态赋值代码如下:打码处为ElementUI.