关于vue.js:关于使用vueslicksort的一些问题总结

明天我的项目上有一个需要，要求简单数组能够拖拽排列地位。

找到一个组件：vue-slicksort，总的来说还是比拟合乎我的初始需要。然而在应用过程中也遇到一些问题。现记录如下。

插件旧址：https://www.npmjs.com/package/vue-slicksort?activeTab=readme

一：应用
官网的应用教程，集体感觉比较复杂，咱们在vue应用的时候，大多不太像官网介绍的那样去写组件。现介绍我的办法如下：
先上效果图：

1-1): cnpm i vue-slicksort --save-dev
1-2): 须要应用到的组件中引入：

一共引入了三个组件：

i) handleDirective:用于实现点击指定icon局部实现拖拽，并非全区拖拽，防止被拖拽的item外部的点击事件被笼罩掉。须要在directives中将其指定到handle事件中，不便在template中被dom绑定应用
ii) SlickList, SlickItem作为slicksort内置组件被引入，须要在components中申明
1-3):vue template中应用

图中化红线局部，从上到下，从左到右顺次阐明：
i) userDragHandle 示意组件须要应用指定手势来实现拖拽，而非整个slickitem区域作为拖拽可触发热点
ii) helperClass定义slickitem被拖拽起的那一刻所领有的新的class你能够用它对拖拽的slickitem进行款式渲染
iii) slicklist的值，即你所须要渲染的简单数组
iiii) input事件能将扭转程序后的数组回传到elementChange事件中，你能够本人对它进行相应解决
iiiii) slickitem 的index属性，很重要，而且必须为它本人的index值，千万不要手贱去批改它/不要问我为什么晓得T~T
iiiiii) 拖拽触发dom 此处的v-hand对应js中引入的directive办法

特地阐明：1：被拖拽的slickitem其实曾经脱离你原有页面dom层级构造，它会独自呈现在html的body标签的最初面，所以在写被拖拽起来的item款式是须要留神，它不继承你之前写在你dom继承体里的款式。2：如果拖拽起来的item隐没了，可能是你的dom元素层级把拖拽起的item笼罩掉了，用z-index试试

感觉做了良久，写下来半个小时都不到哈哈