更新记录

1.0.0（2023-08-03） 下载此版本

1. 支持可配置icon
2. 支持拖动排序
3. 支持长按编辑
4. 支持显示隐藏箭头

平台兼容性

uni-app

使用方式

vue3 setup 方式引入

import xlist from '../../components/xyccstudio-list-edit/xyccstudio-list-edit.vue'

使用如下：

<template>
    <view class="content">
        <xlist :arr="items" 
            @select="handleItemSelect"
            @edit="handleItemEdit"
            @delete="handleItemDelete"
            @sorted="handleItemSorted"></xlist>
    </view>
</template>

<script setup>
import {ref} from 'vue'
import xlist from '../../components/xyccstudio-list-edit/xyccstudio-list-edit.vue'

const items = ref([{
    title: 'aaa',
    icon: '/static/b.png'
}, {
    title: 'bbb',
}, {
    title: 'ccc',
    icon: '/static/b.png'
}, {
    title: 'eee',
}, {
    title: 'ddd',
}])

// 选中事件
function handleItemSelect(item, index) {
    console.log('item selected ', item, index)
}

// 编辑事件
function handleItemEdit(item, index) {
    console.log('item edit ', item, index)
}

// 删除事件
function handleItemDelete(item, index) {
    console.log('item delete ', item, index)
}

// 排序事件
function handleItemSorted(items) {
    console.log('item sorted ', items)
}

</script>