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 :class="lazy" data-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;}

四、组件参数

五、组件方法

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怎么使用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。