当客户在使用我们的产品过程中，遇到问题需要向我们反馈时，如果用纯文字的形式描述，我们很难懂客户的意思，要是能配上问题截图，这样我们就能很清楚的知道客户的问题了。 那么，我们就需要为我们的产品实现一个自定义截屏的功能，用户点完"截图"按钮后，框选任意区域，随后在框选的区域内进行圈…

根据元素与视口是否相交，可以进行吸顶、吸底、曝光上报、列表加载更多、图片懒加载等操作。 前面两种需要通过监听scroll事件，为了防止频繁触发，需要做防抖处理。 当元素进入视口时，总是需要延迟一定时间才能执行判断逻辑。 使用IntersectionObserver实现延迟加载非…

Vue2.x【注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称】 Vue3【注册或获取全局组件. 注册还会自动使用给定的 name组件 设置组件的名称】全局组件 指令绑定到的元素。这可以用来直接操作DOM。 oldValue：指令绑定的前一个值，仅在 befor…

对于使用 babel7 的用户，可以在 babel.config.js 中配置。地址:根文件夹/babel.config.js 对main.js的改造。方法之一，有更好的方法。 位置：src/main.js 完成jsx的配置。可以使用jsx了 到此、我们的Home模块算完成了。…

element-ui虽然有el-form组件，但是仍然需要手动写el-form-item。 这里希望进一步抽离配置，在el-form的基础上封装个enhanced-el-form组件。 综上，enhanced-el-form组件的大概就出来了。 现在有一个很简单的表单，需要填写…

通过上图, 应该可以理解一个Vue组件是如何运行起来的. render渲染函数, render渲染函数是用来生成Virtual DOM的. Vue推荐使用模板来构建我们的应用程序, 在底层实现中Vue最终还是会将模板编译成渲染函数. 因此, 若我们想要得到更好的控制, 可以直接…

前两天在交流群里的老哥们在聊起取消请求的操作时有了个想法，就去axios文档里面看了一下，官方是有方法提供的，点这里直达axios取消操作，官方提供两种取消请求的方案，我使用的时第二种方案，开搞。 列表展示页面上有多个筛选项，当用户操作太过频繁的时候，在第一个筛选项的筛选结果还…

类似Tinder和探探的卡片效果的组件，社区中已经非常多了。我这一版除了可以实现和他们一样的效果外。还增加了飞卡的效果，就是类似我的女神邱淑贞这样。 其实我最早实现这个效果，是在2018年的时候，在weex上实现过一版。原帖请看这里：https://zhuanlan.zhihu…

建议结合源码一起阅读，效果更好（这个 DEMO 使用的是 Vue 技术栈）。 1. 编辑器 先来看一下页面的整体结构。 这一节要讲的编辑器其实就是中间的画布。它的作用是：当从左边组件列表拖拽出一个组件放到画布中时，画布要把这个组件渲染出来。 用一个数组 componentDat…