- 博客(5)
- 收藏
- 关注
原创 Vue3中使用element plus中的el-popover弹出框,实现弹出框的位置跟随鼠标点击的位置进行显示
打开element plus官网我们发现,一般的popver用法就是让这个组件绑定一个button按钮,然后点击,悬浮或者别的方式让其展示。这两天接到个新需求,要求当用户点击一个元素时,让popover弹窗的位置跟随鼠标点击的位置进行显示。我们点击元素框,popver出现,当我们点击右上角“”x“”时关闭,再次点击元素内别的地方,popver再次出现在点击的位置,至此,该功能改造完成!此时我们不难想到,要求实现鼠标跟随,就得获取鼠标点击的位置,当获取到鼠标点击的位置的时候,我们把(
2024-09-10 15:30:27
582
原创 Vue3中的pinia的使用和pinia数据的持久化存储
文件,我们点击“点击增加”按钮时,pinia存储的money值则会增加,username信息也在页面上显示。由于在counter.js里面给“money”字段增加了持久化存储,再次刷新页面,money存储的数据还是没发生变化,说明pinia数据持久化成功!前言:V3中的pinia其实就是vuex的升级版,用法跟vuex差不多,都是作为属性存储和传值的工具,但它们都有个问题,就是当页面刷新过后,更新的值都会丢失。这里就做个记录,也给大家分享下pinia的基本用法跟如何持久化存储数据。
2024-09-04 15:06:47
402
原创 element ui中message消息提示弹出个数太多,以及dialog对话框遮罩遮住message消息提示的问题
前言:在开发中,我们经常会用到这个message消息提示组件,提示用户操作成功,用户操作失败等,但是随着业务场景的增加,我们对消息提示的这个组件功能也会随之调整,鄙人在开发中就遇到下列问题:1.1.1我们创建一个reMessage.js文件,在文件里我们可以这样写1.1.1 在vue2中使用在main.js文件中,我们引入reMessage.js文件,如下图注意:标记4一定要写在标记3:Vue.use(elementui)之后在配置好上述步骤后,我们可以在该项目任意.vue文件里面使用下面的方法。
2024-09-04 10:52:48
359
原创 Vue3.0实现路由懒加载和设置路由守卫
2.路由守卫,一般用到最多的就是登录权限校验,判断用户是否登录,一般使用的最多的还是全局前置守卫(beforeEach),我这举的例子就是简单的判断登录状态,若有其他的需求可根据官方文档自行更换配置。这样,我们在项目中,路由懒加载的配置和路由守卫就完成了!这在开发过程中也是必不可少的。文件中,我们引入并且使用。
2024-09-02 14:22:13
439
原创 Vue实现封装axios,配置get,post,put等多种请求方式,并且实现全局接口调用
前言:鄙人前端开发三年,做了不少项目了,我发现我参与的大部分项目没有对请求接口参数这块进行配置,每次请求接口都得引入文件,挨个配置参数等,感觉太繁琐了,后面我就自己配置了下,在这做个记录,也给大伙分享一下。这样配置好后,我们再也不用每次调接口的时候,都得import一下,而且每个接口都写一坨配置信息啦!现在,我们在该项目的任何.vue文件里,都可以使用“(该文件配置请求方式post,get,put等),”文件夹,再在该文件夹下创建三个js文件,分别为。(该文件写我们的接口),
2024-09-02 11:20:32
1133
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人