Vue拖拽排序组件Vue-Slicksort解读

目录

• 一、效果图
• 二、安装组件
• 三、使用组件
• 四、组件参数
• 五、组件方法
• HandleDirective
• 总结

一、效果图

二、安装组件

npm i vue-slicksort -S

三、使用组件

    
    
        
            

                
            
        
    
    

        

            

                
                
                
            
        
    
    
    

        
            
        
        
添加图片
        
    

    import { SlickList, SlickItem } from "vue-slicksort";
    export default {
        components:{
            SlickItem,
            SlickList
        },
        data() {
            return {
                maintenanceData: {
                    img_list: [], //图片
                },
            }
        },
        created() {
            
        },
        methods: {
            getChangeLists(vals) {
                // 拖拽完成后返回新的排序数组
                console.log(vals);
            },
        },
    }

.maintenance_top {
    display: flex;
    z-index: 10000;
}
.maintenance_top {
    width: 140px;
    height: 78px;
    border: 1px dashed #ccc;
    border-radius: 6px;
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 15px;
}
.maintenance_top > img{
    max-width: 138px;
    max-height: 138px;
    border-radius: 6px;
}
.maintenance_icon{
    width: 140px;
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 15px;
}
.maintenance_img{
    display: flex;
}
.maintenance_img>div>div{
    z-index: 10000;
}
.maintenance_img > .add-img{
    display: block;
    width: 140px;
    height: 78px;
    border-radius: 6px;
} 
.img_bg{
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: -20px;
    left: 0;
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: space-evenly;
}

四、组件参数

名称	类型	默认值	说明
value	Array	-	列表的内容
axis	String	y	列表元素可以被横向拖拽，纵向拖拽还是网格拖拽。用x,y,xy来表示
lockAxis	Array	-	用于排序时在坐标系中锁定元素的移动
helperClass	String	-	helper的自定义样式类
transitionDuration	Number	300	元素移动动画的持续时间
pressDelay	Number	0	如果需要当元素被按下一段时间再允许拖拽，可以设置这个属性
pressThreshold	Number	5	移动允许被忽略的阈值，单位是像素
distance	Number	0	如果需要在拖拽出一定距离之后才被识别为正在拖拽的元素，可以设置这个属性
useDragHandle	Boolean	false	如果使用HandleDirective，设置为true
useWindowAsScrollContainer	Boolean	false	是否设置window为可滚动的容器
hideSortableGhost	Boolean	true	是否自动隐藏ghost元素
lockToContainerEdges	Boolean	false	是否对正在拖拽的元素锁定容器边缘
lockOffset	String	50%	对正在拖拽的元素锁定容器边缘的偏移量
shouldCancelStart	Function	-	在拖拽开始前这个方法将被调用
getHelperDimensions	Function	-	可选方法({node, index, collection}),用于返回SortableHelper的计算尺寸

五、组件方法

名称	参数	说明
sortStart	event, node, index, collection	当拖拽开始时触发
sortMove	event	当拖拽时鼠标移动时触发
sortEnd	event, newIndex, oldIndex, collection	当拖拽结束时触发
input	newList	当拖拽结束后产生新的列表时触发

HandleDirective

v-handle 指令在可拖动元素内部使用。（即用了这个指令，可以让拖动只在元素的某个位置生效）

Container 必须由 :useDragHandle 属性，且设置为 true 时才能正常工作。

这里有关于此的一个简单元素的例子：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。