修改element-ui 加补丁方法,以修改el-input示例

示例:修改el-input为空时自动标红,对于不在form内的必填输入起到提醒作用
注:本效果通过以下样式即可实现,本文重在打补丁方法。

  ::v-deep  .el-input__inner {
    color: red !important;
    border-color: red !important;
  }

效果

在这里插入图片描述

  <div>
    <el-input emptywarn style="width: 100px" v-model="input1" ></el-input>
    <el-input emptywarn style="width: 100px" v-model="input2" ></el-input>
  </div>

步骤

思路:修改node modules中elment-ui中源码,利用patch-package生成补丁,在npm install之后利用补丁合并修改。

  1. 修改elment-ui中源码,项目run dev运行模式下,样式引用elment-ui/package/themchalk/src
    ,run build 模式样式文件在elment-ui/lib/themchalk 如果只修改样式,可以直接改对应文件
    。 非仅修改样式改动的文件较多,推荐下载源码修改,生成dist文件,替换有改动的文件。
    1.1 下载elment-ui,git clone git@github.com:ElemeFE/element.git
    1.2 按需修改,本例修改如下
    packages/input/src/input.vue
props 添加  emptywarn: Boolean,
method 添加
      inputEmptywarn() {
        return this.emptywarn && (this.value === null || String(this.value) === '');
      },
动态class添加如下图      

在这里插入图片描述
packages/theme-chalk/src/input.scss
在这里插入图片描述
1.3 生成目标文件
elementui 建议node v11 开发,否则容易gyp err, node-sass 版本问题等。
推荐安装 nvm管理node版本,否则替换node11后原来的项目node出问题
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
安装完成后
nvm install 11 (安装node11) (后续可以nvm ls 查看版本 nvm use 切换)
node -v 查验
element根目录 yarn install (npm install 容易出webpack版本依赖等问题)
npm run dev 验证
npm run dist 生成lib目录
根据修改内容的关键词ide全局搜索查看都修改了那些文件,逐一替换项目中nodelmodule中对应文件。
lib和package都要各自对应替换
替换后在自己项目验证功能(此时的修改已经可用,但是npm intall会重置nodelmodule)
1.4 生成补丁,持久化修改
npm intsall patch-package
npx patch-package element-ui 会多出patches文件夹,里面会生成patch文件
package.json文件scripts字段内添加
“postinstall”: “patch-package” (表示npm install后自动应用自己的patch文件合并到node modules)
1.5 验证
npm unintsall element-ui
npm intsall element-ui
npm intsall 修改依旧有效

其他

如果修改在dev有效线上无效,说明element lib下没替换完整

如果引起ide对element标签不索引,原因很多,可将ide设置这俩去掉重新勾选下。不能的话参考
https://www.cnblogs.com/imyjy/p/16922739.html在这里插入图片描述

  • 9
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值