这两天前女同事问我一个vue技术问题，大概是这样的，他们公司中台技术部封装了一套elementui组件（估计只是改了个名字和样式），直接用他们的项目，然后他们项目估计用了几十上百个input组件，但是有一个新的需求让input组件显示历史记录，也就是说name属性和autocomplete设置为on，他只能一个一个的把所有的input组件改过来，不让中台部门改（加上name和autocomplete），但是她不想这么麻烦，她打算一下子全部改掉，就是全局设置，但是一直没有成功。下面是解决过程。在mainjs入口文件中，拦截Input的beofreCreatemain.js:importElementUIfrom'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属性成功。注意：由于组件生命周期，当input的值发生变化时（v-model绑定的数据发生变化），会触发boforeUpdatehook，虚拟dom会重新渲染。这时dom上的name属性就会丢失，所以需要在上面加上，beforeUpdate的拦截，当数据发生变化时，重新设置name属性。beforeCreate和beforeUpdate需要在Vue.use(ElementUI)之前拦截，否则ElementUIInstall后无法触发这两个生命周期函数。之所以拦截生命周期然后赋值，是为了动态设置name的值。她想把v-model绑定的变量值name（比如v-model="login_name"）赋值给name="login_name"，我只是写demo而已。动态赋值的代码如下：编码处为ElementUI。
