前端
文章平均质量分 72
serfend
记录一下日常工作学习中遇到的坑~
展开
-
【源码讲解】VUE实现微信样式的多个用户快速选择和操作组件
文章目录实现了任意人数用户的grid布局和自定义选取,首先看效果源码解析组件源码和调用方式组件实现调用方式事件传递优化版本参考文档实现了任意人数用户的grid布局和自定义选取,首先看效果基本效果支持对选择的人员进行回调,当有人被选中的时候,弹出编辑按钮,并且emit编辑事件源码解析整体实现:基于vue-element2的基础组件实现,也可以替换为用户实际使用的ui框架人员头像组件通过检查用户传入的id,从api中获取对应的用户信息和头像,并显示到页面中。注意头像组件调用原创 2022-04-25 10:21:11 · 821 阅读 · 0 评论 -
animation和transition冲突问题-animation的fill-mode属性作用
发现当一个对象同时设置了animation和transition的时候,transition属性就失效了,:hover里的属性变化变得没有过渡问题内容.right-hover-panel { position: fixed; right: -18rem; width: 20rem; z-index: 1; transition: all ease 0.5s; &:hover { right: 0rem; }}解决方法将animatio.原创 2022-04-24 21:47:52 · 1276 阅读 · 0 评论 -
Vue-Router给当前url添加参数时报错 Navigation Duplicated Avoided redundant navigation to current location
发现当动态修改当前页面的url中的query时会报错是因为新创建的路由不能使用老路由的对象,而应该重新创建一个对象,以解决问题报错内容新老路由发生重复,停止跳转解决方法// 首先获取当前urlconst q = this.$route && this.$route.query// 通过创建新的路由的方式来添加参数this.$router.push({ query: Object.assign({ filename: '' }, q) })原因查看Vue-R.原创 2022-04-23 22:20:46 · 2149 阅读 · 0 评论 -
两个非子父关系的元素之间事件传递,让网页游戏变得更加简单
碰到一个问题,当两个元素不是父子关系且元素的位置存在重叠的时候,那么上面的元素将会让下面元素的事件变得无法响应。此时可以通过注册函数事件,将A元素的事件传递给B元素事件基础传递方式<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title></title> </head> <body onselectstart="r.原创 2022-04-20 15:22:11 · 1790 阅读 · 0 评论