Sortable 排序

简单的排序组件，不适合复杂的排序，支持横项和垂直拖拽排序，拖拽时需要确保页面无法滚动。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
list	Array	[]		All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

事件

事件名	说明
change	拖拽结束时触发，参数resList

插槽名	说明
default	默认插槽，props值item

注意

微信小程序下使用带props的插槽时，需要显试写出<template #default="slotProps">，否则会报错。

示例

<template>
  <c-sortable :list="payItemList" @change="onChange">
    <template #default="{item}">
      <view class="c-bg-white c-p-15 c-pt-10 c-pb-10 c-mb-2">
        <c-text :text="item.name" />
      </view>
    </template>
  </c-sortable>
</template>
<script setup>
import { ref } from 'vue'

const payItemList = ref([
  {name:'支付宝'},
  {name:'微信'},
  {name:'云闪付'},
])
function onChange(resList){
  console.log(resList)
}
</script>