这两天有位前女性共事问了我一个 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 属性。
留神点:
- 因为组件生命周期的作用,当 input 的值扭转时(v-model 绑定的 data 变动),触发 boforeUpdate 钩子,虚构 dom 会从新渲染,这时 dom 上的 name 属性会失落,所以须要加上,beforeUpdate 的拦挡,当数据扭转时,再度将 name 属性设置。
- beforeCreate 和 boforeUpdate 须要在 Vue.use(ElementUI) 之前进行拦挡,否则 ElementUI Install 之后无奈再触发两个生命周期函数。
- 之所以拦挡生命周期再去赋值是为了动静设置 name 的值,她是想把 v -model 绑定的变量值名称(比方 v -model=”login_name”)赋给 name=”login_name”,我只是写的 demo 而已。
动静赋值代码如下: 打码处为 ElementUI.