github.com
Suny丶
获得徽章 0
- 重磅推荐 Next.js 14 开源了一个精美和适配多设备的WEB电商全栈项目（全新技术组合）
全栈开源地址：
github.com
APP 开源地址：github.com
欢迎 Star 和提 Issues 、PR 。
前言
c-shopping是一个精美的web电商系统，支持响应式交互，界面优雅，功能丰富，小巧迅速，包含一个电商平台MVP完整功能，具备良好的审美风格与编码设计。
希望来的人，有所收获。故事不结束，青春不散场。
项目在线演示地址：
docker 部署地址：shop.huanghanlian.com
vercel 部署地址：c-shopping-three.vercel.app
项目传送门:github.com
React Native 移动app应用:
项目传送门:github.com
项目介绍
背景：
一直以来前端UI框架被固定形式占据（受限于传统的UI框架），导致视觉疲劳，在开发一些高度自定义的项目时，往往力不从心；
多设备适配的web优秀项目很少，学习和维护成本较高；
当项目复杂后，在组件需要调用多个 api 时会变得复杂起来，比如需要管理多个 loading 和 error 状态，这会导致产生非常多的 state 声明，还有请求取消、请求竞态等可能存在的问题也容易被忽略；
随着项目复杂，样式的开发与维护变得庞大且臃肿；
意图：
改进背景中提到的问题。
目的：
打造一个完整的，适合web端的良好生态。
使用技术
NextJs、TailwindCss、Headless UI、MongoDB、Redux - Toolkit - RTK Query、JWT、Docker展开
25 - el-transfer穿梭框增加disabled属性， 使用$attrs和$listeners简易二次封装
给el-form添加disabled属性时，会禁用里面所有组件，对el-transfer组件也有效果，我们就和使用el-form和el-transfer一起封装成一个新的穿梭框组件，间接到达我们目的
思路：
1. 新自定义穿梭框组件中，使用el-form包裹el-transfer组件，给el-transfer添加$attrs和$listeners，保留组件原来的功能
2.自定义接受父组件传递disabled属性，给el-form的disabled属性使用展开评论3
![[看]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_97.39cdc9f.png)
![[可怜]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_5.ece2a96.png)