温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue拖拽排序组件Vue-Slicksort怎么使用

发布时间:2023-03-10 15:42:03 来源:亿速云 阅读:176 作者:iii 栏目:开发技术

这篇“Vue拖拽排序组件Vue-Slicksort怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue拖拽排序组件Vue-Slicksort怎么使用”文章吧。

    一、效果图

    Vue拖拽排序组件Vue-Slicksort怎么使用

    二、安装组件

    npm i vue-slicksort -S

    三、使用组件

    <div class="maintenance_img mt50 mb50 pl20 pr20" >
        <!-- 拖拽 -->
        <SlickList
            :lockToContainerEdges="true"
            lockAxis="x"
            axis="x"
            v-model="maintenanceData.img_list"
            @input="getChangeLists"
            
            >
            <SlickItem  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 >
            <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);
                },
            },
        }
    .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>

    以上就是关于“Vue拖拽排序组件Vue-Slicksort怎么使用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI