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

8次阅读

共计 1004 个字符，预计需要花费 3 分钟才能阅读完成。

这两天有位前女性共事问了我一个 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.

正文完