vue
文章平均质量分 67
王的剑鞘&wkq
这个作者很懒,什么都没留下…
展开
-
vue-cli3及以上版本创建多页面应用。
为什么要多页面? 以实际场景为例,到了某个节日,需要根据需求做一个活动页,并且活动页技术体系和原本单页面一样(如vue),并且多端共用此页面(不能集成在原本的单页应用里了,太庞大)。那么我们要么是单独开一个项目,要么就是想办法将项目改造成多页面。介于前者太浪费资源且没必要(因为很多共用部分,甚至组件共用),所以我们选择将vue-cli改造成多页面应用。 先摆一些小坑: 1.无法通过路径访问多页面的某一页面,例如: http://172.16.10.181:8080/subPage.htm...原创 2021-07-22 16:38:30 · 947 阅读 · 2 评论 -
记录一下,PC端实现拖拽操作需要注意的点。
一. mousemove并非逐帧监听,而是大概10-20毫秒触发一次。 这个问题会导致: 1.如果我们将鼠标移动事件绑在被拖动的滑块上,用户快速拖动会导致鼠标脱离滑块。所以将移动事件绑在body之类上会更友好。 2.如果我们做了一些边缘限制,例如拖拽至边缘50px处便不可继续拖动。由于10-20毫秒鼠标可能移动1到30+ px的样子,所以只是普通做了个判断会导致我们超出一些这个限制,或者达不到这个限制就停止。 二. 鼠标脱离滑块后的操作 如果做了一些边缘限制,那么需要对鼠标脱离滑块后的一些操作进行原创 2020-08-26 15:14:09 · 515 阅读 · 0 评论 -
开发高阶vue组件时,打通父子兄通信,轻松调用任意父子兄的实例。
vue项目开发中,父子、子父、兄弟等等组件之间的通信总是很讨厌的,除了父子可以使用ref很简单的搞定,其余的都显得不是那么方便,这点放到开发高阶组件中体现的更明显。 例如,我们目标是开发一个类似锚点跳转效果的组件,结构期望大致如下: <anchor-scroll> <trigger-view trigger-key="xxx"> </trigger-view> <anchor-view anchor-key="xxx"> ...原创 2020-09-02 10:15:31 · 174 阅读 · 0 评论 -
写一个简单基于vue的拖拽插件并发布到npm。
目的: 1.任何元素,只需要插入v-drag即可拖动, 2.可根据自定义属性控制结束拖动后是否吸附最近的墙面(屏幕边界) 3.可根据自定义属性来判断pc与移动端,分别执行mouse事件和touch事件 首先声明一个对象,并拥有install方法,然后将其暴露出去。不多解释,官方文档已经很明确了。 const VDrag = {} VDrag.install = function (Vue) { } export default VDrag Vue参数是被use调用时传入Vue实例,我们的目标是原创 2020-08-21 16:58:35 · 460 阅读 · 0 评论