更新记录
1.0.2(2023-05-08) 下载此版本
组件优化
1.0.1(2023-05-08) 下载此版本
组件优化
1.0.0(2023-05-08) 下载此版本
muyu-dragMod发布
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
- | √ | - | - | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
muyu-dragMod
简介
实现自定义组件拖动排序,支持h5和app
使用说明
组件示例
<muyu-dragMod-example :modList="list" @dragmodmits="dragmodmits">
<template #[getList(0)]>
<view class="item">
<!-- 自定义组件插槽-->
</view>
</template>
<template #[getList(1)]>
<view class="item">
<!-- 自定义组件插槽-->
</view>
</template>
<template #[getList(2)]>
<view class="item">
<!-- 自定义组件插槽-->
</view>
</template>
</muyu-dragMod-example>
API
参数
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
modList | Array | - | 自定义组件列表,详情参考js示例。注意:name必须唯一,order必须按照升序,从0开始 |
事件
事件名 | 事件说明 | 返回参数 |
---|---|---|
@dragmodmits | 参数回调方法 | - |
js示例
export default {
data() {
return {
list:[
{name:'00',order:0},
{name:'01',order:1},
{name:'02',order:2},
],
}
},
methods: {
dragmodmits(e){
console.log(e)
},
getList(e){
return this.list[e].name
}
},
}