更新记录
1.0.1(2019-07-21) 下载此版本
- 增加开箱即用 dome
- 修复某些情况下删除不正常
1.0.0(2019-07-14) 下载此版本
拖拽排序,目前只支持一行四个显示方式 点击删除
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
× | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
拖动排序 drag-sorts
本插件是参照 mpvue-drag-sort 而开发的 感谢大佬 瞳player 附上原插件的github
可上下左右拖动 支持 H5 app 微信小程序(其他小程序未做测试)
-
属性
list props 渲染数据(数组) 对应需要显示的标题 -
事件
@change 当发生元素顺序发生变化或删除时触发,参数是改变后的数组其中 sortNumber 是该元素的排序 删除的元素并没有从数组中真正去掉(因为会影响动画),只是改变了其 isShow 1显示 0隐藏
-
基本使用
<template>
<view>
<view class="title">拖动排序/点击删除</view>
<drag-sorts :list="list" :props="props" @change="SortChange" ></drag-sorts>
<view class="footer"><image :src="img" mode="aspectFit"></image></view>
</view>
</template>
import dragSorts from '@/components/drag-sorts/index.vue'
export default {
components: {
dragSorts
},
data () {
return {
img:'https://wx2.sinaimg.cn/orj360/005NpmmLly1g4zr1456bkj302r02kwe9.jpg',
// 对应需要显示的标题
props: {
label: 'label'
},
list: [
{
label: '标题1'
},
{
label: '标题2'
},
{
label: '标题3'
},
{
label: '标题4'
},
{
label: '标题5'
},
{
label: '标题6'
},
{
label: '标题7'
},
{
label: '标题8'
},
{
label: '标题9'
},
{
label: '标题10'
},
{
label: '标题11'
},
{
label: '标题12'
},
{
label: '标题13'
},
]
}
},
methods: {
SortChange (e) {
console.log(e)
}
}
}
<style>
.title{
text-align: center;
color: #ccc;
padding: 20upx;
background: #EEEEEE;
margin-bottom: 10px;
height: 18px;
font-size: 14px;
}
.footer{
display: flex;
justify-content: center;
align-items: center;
height: 100px;
width: 100%;
}
.footer image{
height: 100%;
width: 100%;
}
</style>
- 有什么不足和bug大佬们多多指证