Vue拖拽组件开发实例

为什么选择Vue? 主要原因:对于前端开发来说,兼容性是我们必须要考虑的问题之一。我们的项目不需要兼容低版本浏览器。项目本身也是一个数据驱动型的。加之,Vue本身具有以下主要特性: 使用虚拟DOM; 轻量级框架; 高效的数据绑定; 灵活的组件系统; 完整的开发生态链。 这就是我们为什么选择Vue框架的一些原因。 为什么要封装成一个Vue组件? 主要目的是可提高代码的复用性和可维护性。 复用性:组件化后,一些样式和逻辑均通过配置参数的方式去差异化体现,所以参数的可配置性提高了组件的复用率和灵活性。 可维护性:组件化后,组件内部的逻辑只对组件负责,外部的逻辑只通过配置参数适配,所以提高了代码的逻辑清晰度,可以快速定位代码出现问题的地方。 组件化搭建页面图示: 上图可看出,在Vue中,所谓组件化搭建页面,简单来说,页面实际上是由一个个功能独立的组件搭建而成。这些组件之间可以组合、嵌套,最终形成了我们的页面。 组件构成 下面是一个完成的组件构成:

开发Vue移动拖拽组件为例 拖拽原理 手指在移动的过程中,实时改变元素的位置即top和left值,使元素随着手指的移动而移动。 拖拽实现 开始拖动时:获取到接触点相对于整个视图区的坐标clientX,clientY;获取元素距离视图上侧和左侧的距离 initTop,initLeft;计算接触点距离元素上侧和左侧的距离 elTop = clientY – initTop, elLeft = clientX – initLeft; 拖动过程中:通过 currTop = clientY – elTop, currLeft = clientX – elLeft 实时获取元素距离视图上侧和左侧的距离值,并赋值给元素,使元素跟着手指的移动而动起来; 拖动结束,定位元素。 Vue中的实现 使用Vue,最大的不同之处是我们几乎不去操作DOM,要充分利用Vue的数据驱动来实现拖拽功能。本例中,我们只需在垂直方向上拖动元素,所以只需考虑垂直方向的移动即可。 上图中,通过data中的dragList渲染拖拽区域列表,代码如下:

假设我们将元素从位置1拖至位置3,本质上是数组的顺序发生了改变。这就有必要提一下Vue的最大特性:数据驱动。 所谓的数据驱动就是当数据发生变化时,通过修改数据状态,使用户界面发生相应的改变,开发者不需要手动的去修改DOM。 Vue的数据驱动是通过MVVM这种框架来实现的,MVVM框架主要包含3个部分:Model、View、Viewmodel。 – Model:数据部分; […]

© 2018 JDC. All Rights Reserved.