一 : vue-slicksort 一款功能强大的可拖拽的vue.js组件。拥有丝滑般拖拽动画效果,支持水平/垂直/网格拖拽排序。还可以自动滚动、锁定坐标系,并支持触摸。使用如下:
使用npm:
$ npm install vue-slicksort --save
使用yarn:
$ yarn add vue-slicksort
二 :项目中的使用 参考1
<template>
<div class="box-sort">
<p>刷新次数: {{ count }}</p>
<div class="slick-list_wrapper">
<slick-list
v-model="goods_list"
lock-axis="y"
helper-class="slick-item"
:use-drag-handle="true"
append-to=".slick-list_wrapper"
>
<template v-for="(item, index) in goods_list">
<slick-item :key="index" class="slick-item" :index="index">
<i v-handle class="btn">拖到</i>
<div class="item">
{{ item.name }}
</div>
</slick-item>
</template>
</slick-list>
<div class="add-one" @click="addHandle()">添加</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { PullRefresh } from "vant";
1 引入
import { SlickList, SlickItem, HandleDirective } from "vue-slicksort";
@Component({
name: "VantLearn",
2 组件
components: {
SlickList,
SlickItem
},
3 定义的方法
directives: {
handle: HandleDirective
}
})
export default class VantLearn extends Vue {
count = 0;
goods_list: any[] = [
{
name: "小李",
age: 22,
sex: "女的"
},
{
name: "小王",
age: 20,
sex: "女的"
},
{
name: "小张",
age: 23,
sex: "女的"
},
{
name: "小刘",
age: 33,
sex: "男的"
}
];
// 自定义添加数据方法
addHandle(): void {
this.goods_list.push({
name: this.count + 18 + "岁妹子",
age: "18" + this.count++,
sex: "妹子"
});
}
// 可调接口 请求数据选择
async created(): Promise<any> {
const data = await getCollectList({ size: 5, page: 1, is_buy: 0 });
this.goods_list = data.rows;
console.log(121212, data);
}
}
</script>
<style lang="scss" scoped>
.box-sort {
width: 100%;
height: 100%;
}
.slick-list_wrapper {
width: 100%;
text-align: center;
font-size: 24px;
// .slick-list {
// // position: relative;
// // z-index: 2;
// // height: 100%;
// width: 100%;
// border-radius: 12px;
// background-color: #ffffff;
// overflow: hidden;
.slick-item {
display: flex;
// flex-wrap: wrap;
// justify-content: space-between;
width: 100%;
border: rgb(48, 16, 4) 1px solid;
margin: 2px 0;
font-size: 30px;
.btn {
width: 100px;
height: 50px;
font-size: 20px;
border: solid 1px chocolate;
color: red;
}
.item {
height: 100px;
width: 100%;
// flex: 0 0 60px;
font-size: 24px;
}
}
// }
.add-one {
width: 100%;
text-align: center;
font-size: 30px;
color: darkgoldenrod;
}
}
</style>
三 1 参数配置
名称 | 类型 | 默认值 | 说明 |
value | Array | - | 列表内容 |
axis | String | y | 列表数据可以按横向拖动,纵向拖动还是网格拖动。 用x,y,xy表示 |
lockAxis | String | - | 用于排序时在坐标系中锁定元素的移动 |
helperCkass | String | - | helper的自定义样式 |
tansitionDuration | 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 的计算维度。 |
2. 事件
名称 | 参数 | 说明 |
---|---|---|
sortStart | event,node, index,collection | 当拖拽开始触发 |
sortMove | event | 当拖拽时鼠标移动时触发 |
sortEnd | event, newIndex,oldIndex, collection | 当拖拽结束时触发 |
input | newList | 当拖拽结束后产生新的列表结束后触发。 |