×

Vue应用:了解下拖拽排序组件Vue-Slicksort

作者:Terry2023.03.11来源:Web前端之家浏览:2158评论:0
关键词:vuejsVue-Slicksort

Vue应用:了解下拖拽排序组件Vue-Slicksort。废话不多说,直接上干货。

安装

npm i vue-slicksort -S

使用组件

<div class="maintenance_img mt50 mb50 pl20 pr20" style="font-size: 16px;font-weight: 600;position: relative;">
    <!-- 拖拽 -->
    <SlickList
        :lockToContainerEdges="true"
        lockAxis="x"
        axis="x"
        v-model="maintenanceData.img_list"
        @input="getChangeLists"
        style="display: flex"
        >
        <SlickItem style="z-index: 10000" v-for="(item, index) in maintenanceData.img_list" :index="index" :key="index">
            <div class="maintenance_top">
                <img :src="item" @mouseover="changeMask(index)" @mouseout="changeMask(index)" alt="">
            </div>
        </SlickItem>
    </SlickList>
    <div style="display: flex;position: absolute;bottom: -15px;">
        <div class="maintenance_icon" v-for="(item, index) in maintenanceData.img_list" :key="index">
            <div class="img_bg" :ref="'mask' + index" @mouseover="changeMask(index)" @mouseout="changeMask(index)">
                <Icon @click.stop="isImgShow = true;bigImg = item" class="pointer" size="20" color="#000000" type="md-search" />
                <Icon @click.stop="downloadImg(item)" class="pointer" size="20" color="#000000" type="md-download" />
                <Icon @click.stop="movingItems(4, index)" class="pointer" size="20" color="#000000" type="md-trash" />
            </div>
        </div>
    </div>
    <!-- 600*330 -->
    <div class="add-img" v-if="maintenanceData.img_list.length<5">
        <span>
            <Icon type="md-add" size="30"></Icon>
        </span>
        <p>添加图片</p>
        <input @change="uploadImegs($event, 1)" type="file" accept="image/*" />
    </div>
</div>
import { SlickList, SlickItem } from "vue-slicksort";
export default {
    components:{
        SlickItem,
        SlickList
    },
    data() {
        return {
            maintenanceData: {
                img_list: [], //图片
            },
        }
    },
    created() {
         
    },
    methods: {
        getChangeLists(vals) {
            // 拖拽完成后返回新的排序数组
            console.log(vals);
        },
    },
}

CSS

.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;
}


组件参数

名称类型默认值说明
valueArray-列表的内容
axisStringy列表元素可以被横向拖拽,纵向拖拽还是网格拖拽。用x,y,xy来表示
lockAxisArray-用于排序时在坐标系中锁定元素的移动
helperClassString-helper的自定义样式类
transitionDurationNumber300元素移动动画的持续时间
pressDelayNumber0如果需要当元素被按下一段时间再允许拖拽,可以设置这个属性
pressThresholdNumber5移动允许被忽略的阈值,单位是像素
distanceNumber0如果需要在拖拽出一定距离之后才被识别为正在拖拽的元素,可以设置这个属性
useDragHandleBooleanfalse如果使用HandleDirective,设置为true
useWindowAsScrollContainerBooleanfalse是否设置window为可滚动的容器
hideSortableGhostBooleantrue是否自动隐藏ghost元素
lockToContainerEdgesBooleanfalse是否对正在拖拽的元素锁定容器边缘
lockOffsetString50%对正在拖拽的元素锁定容器边缘的偏移量
shouldCancelStartFunction-在拖拽开始前这个方法将被调用
getHelperDimensionsFunction-可选方法({node, index, collection}),用于返回SortableHelper的计算尺寸

组件方法

名称参数说明
sortStartevent, node, index, collection当拖拽开始时触发
sortMoveevent当拖拽时鼠标移动时触发
sortEndevent, newIndex, oldIndex, collection当拖拽结束时触发
inputnewList当拖拽结束后产生新的列表时触发

HandleDirective

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

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

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

<template>
    <li class="list-item">
        <!-- 拖动只在 span 元素上生效 -->
        <span v-handle class="handle"></span>
        {{item.value}}
    </li>
</template>
 
<script>
    import { ElementMixin, HandleDirective } from 'vue-slicksort';
 
    export default {
        mixins: [ElementMixin],
        directives: { handle: HandleDirective },
    };
</script>

大家试试吧。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuejs20230311.html

网友评论文明上网理性发言 已有0人参与

发表评论: