欢迎光临
我们一直在努力

vue - 修改ElementUi 源码

首次尝试

再一次项目开发中,搬砖饿了吗的组件过程中有些步骤感觉很繁琐,比如input框的 一些基本属性配置(clearable placeholder 等)完全可以在源码里修改

在node_modules下找到elementui下的packages找到input组件,进去修改
之后保存重启项目 >> 你会发现没有效果

vue - 修改ElementUi 源码

我们在node_modules下找到elementui的文件夹然后打开 可以发现一个lib文件夹 >> 这个文件夹打包编译后的,我们的项目也是引入的lib
所以修改 packages 里的组件是不生效的

正确修改

vue - 修改ElementUi 源码vue - 修改ElementUi 源码

我们进入它的官网,然后在更新日志中进去他的git
克隆一份代码到你的本地 然后开始修改
我这里示例的部分为修改dialog组件背后的阴影点击不关闭
(组件默认是点击关闭的)

vue - 修改ElementUi 源码我们npm i 初始化项目依赖 然后从packages 里找到 dialog组件
然后进入src下的component.vue

vue - 修改ElementUi 源码我们在组件内找到props下的closeonclickmodal这个参数验证项
将其默认值改为false保存即可

重新打包

保存之后在最外层 执行命令 npm run dist
会生成一个lib文件夹 将这个lib去替换掉 你项目中
node_modules下的elementui下的lib文件夹即可

保存重启之后再次使用dialog可以发现点击外部遮罩不会自动关闭了

修改完毕

至此修改源码完毕,实际开发中可根据需求先把源码改一遍
可起到减少搬砖量以及少编写少cv的作用

  • 海报
海报图正在生成中...
赞(0) 打赏
声明:
1、本博客不从事任何主机及服务器租赁业务,不参与任何交易,也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动,信息均摘自网络或来自服务商主动提供;所以对本博客提及的内容不作直接、间接、法定、约定的保证,博客内容也不具备任何参考价值及引导作用,访问者需自行甄别。
2、访问本博客请务必遵守有关互联网的相关法律、规定与规则;不能利用本博客所提及的内容从事任何违法、违规操作;否则造成的一切后果由访问者自行承担。
3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。
4、一旦您访问本博客,即表示您已经知晓并接受了以上声明通告。
文章名称:《vue - 修改ElementUi 源码》
文章链接:https://www.456zj.com/20743.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址