更新记录

1.0.0(2023-12-18)

首次更新,拖拽排序


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

Slots

插槽名称 说明
default 自定义item项内容,需要将custom属性设为true,字节小程序不支持

Props

属性名 类型 说明 默认值 平台差异说明
itemList Array 拖拽列表数据 [ ] -
width Number, String 拖拽列表宽度,为0时使用屏幕宽度,单位rpx 0 -
columns Number, String 每行显示个数(列数) 1 -
itemHeight Number, String item项高度,square为false时必传(square为true时失效),单位rpx 0 -
square Boolean item项是否以正方形显示,为true时itemHeight失效 false -
styles Object item项内容样式,custom为false时有效,具体属性内容见下方说明 { } -
scrollTop Number 初始化时,页面滚动高度,单位px 0 -
isDrag Boolean 是否可拖拽 true -
custom Boolean 是否自定义item项内容 false -

styles 属性说明(非自定义item项内容时有效),如果不传值则为默认值

属性名 类型 说明 默认值 平台差异说明
type Number item项类型,可选值:1-图片元素,2-标题分组元素 1 -
padding Number item项padding值,单位rpx 0 -
background String item项背景色 #fff -
size Number 字体大小,单位rpx,type=2时有效 30 -
color String 字体颜色,type=2时有效 #181818 -
isDel Boolean 是否显示删除图标(此处图标为Uview2.0中icon,如果需要修改可以直接在源码中修改) false -
delColor String 删除图标颜色,isDel为true时有效 #FF2B2B -
slideColor String slide图标颜色,type=2时有效 #B2B2B2 -
事件名 说明 回调参数
@change 拖动变化时触发 { itemList:改变后的list列表 }
@end 拖动结束时触发 { itemList:改变后的list列表 }
@click item项点击时触发 { index:点击项索引值, item:索引对应item项数据 }
@delete 点击item项删除图标时触发 { index:点击项索引值 }
//使用
import fszDrag from "@/components/fsz-drag/fsz-drag.vue"
export default {
    components:{
        fszDrag
    }
}

<fsz-drag :width="680" custom :itemList="itemList" :columns="4" :itemHeight="200">
        <template v-slot="{ model,width,height, index }">
            <view :style="{width:width+'px',height:height+'px'}">
                <image :src="model.src" ></image>
                <text>{{model.text}}</text>
            </view>
        </template>
</fsz-drag>

data() {
    return {
        itemList: [{
            id: 1,
            text: '招财猫',
            src: 'https://img/65180d1d1cda7c174492d80d.jpg'
        }, {
            id: 2,
            text: '海边',
            src: 'https://img/65180d1ac19c17d9efbe99d7.jpg'
        }, {
            id: 3,
            text: '环卫工人',
            src: 'https://img/65180d0505886c65123e33e3.jpg'
        }, {
            id: 4,
            text: '海边夕阳',
            src: 'https://img/65180d1724d1cb4fb43101e0.jpg'
        }, {
            id: 5,
            text: '落叶阴影',
            src: 'https://img/65180d08bb31981e1b62fa13.jpg'
        }, {
            id: 6,
            text: '大树',
            src: 'https://img/65180d1d992fbaa8dcff4c92.jpg'
        }, {
            id: 7,
            text: '棕榈树',
            src: 'https://img/65180d1a063447ddc783aaef.jpg'
        }]
    }
},
//注意,此处图片url为展示,需替换

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问