技术难题初登场 家人们，最近在开发一个超复杂的后台管理系统项目，里面有各种数据展示、表单提交、权限控制等功能，在这个过程中，我频繁地使用到了element-plus组件库中的el-dialog组件 。它就像一个小弹窗，可以用来显示各种提示信息、编辑表单之类的。比如说在用户点击 “编辑” 按钮时，就弹出一个el-dialog，里面放着编辑表单，让用户修改数据。 但随着功能的不断完善，我发现原生的el-dialog组件在某些场景下真的不够灵活。比如说，我想在不同的组件中根据不同的业务逻辑动态地控制对话框的显示和隐藏，还要传递不同的数据给对话框，原生组件用起来就很麻烦，每次都要写很多重复的代码，这可太影响开发效率了。所以，我就决定对el-dialog进行二次封装，实现动态调用，让它更好地满足我的项目需求。接下来，就把我的经验分享给大家，一起看看怎么解决这个问题。 实现效果 代码实现 import { ElButton, ElDialog } from "element-plus"; import { createApp, h } from "vue";…

在vue2中我们已经使用过provide和inject来实现祖孙组件之间的数据传递，但是在vue3中由于我们使用setup，此时我们应该如何去使用provide和inject函数呢？ 在vue中帮我们提供了provide和inject的函数，我们可以直接在setup函数中使用即可。 一、provide和inject的基本使用 如上图所示，此时我们将一个普通对象进行传递，然后在Home组件中通过inject函数来接收。 我们也可以通过ref和reactive进行传递。 上面代码我们可以看出在Home.vue文件中可以更改App.vue通过provide传递过去的数据，但是在一些情况下，我们是不允许的，此时我们可以采用readonly来进行设置。

location / { try_files $uri $uri/ /index.html; }

下面配置大概的思路是这样的 从本机 /tmp/cache 目录还原缓存 执行更新依赖和编译命令 把最新的依赖复制到b本机 /tmp/cache 目录供下次使用 .drone.yml 文件 kind: pipeline name: default type: docker steps: – name: restore-cache #把缓存目录复制到根目录下的node_modules image: drillster/drone-volume-cache volumes: – name: cache path: /cache settings: restore: true # 这个配置还原缓存的意思 mount: # 此处配置需要复制的路径 – ./node_modules – name: 编译 image: node:12-alpine commands: – yarn – yarn build – name: rebuild-cache # 保存最新缓存到本地 image: drillster/drone-volume-cache volumes: – name: cache path…