Sort 排序列表

介绍

用于对列表进行排序，可通过拖拽方式进行排序。

基础用法

通过 v-model 双向绑定数组数据，在排序完成时会自动触发数据更新。

<vd-sort v-model="data">
  <vd-sort-item
    v-for="(item, index) in data"
    :key="item.id"
    :index="index"
  >
    {{ item.name }}
  </vd-sort-item>
</vd-sort>

const data = ref([
  { id: 1, name: '测试1' },
  { id: 2, name: '测试2' },
  { id: 3, name: '测试3' },
]);

工具栏配置

通过 toolbar 属性配置工具栏，可选值为 up down drag。

<vd-sort v-model="data" :toolbar="toolbar">
  <vd-sort-item
    v-for="(item, index) in data"
    :key="item.id"
    :index="index"
  >
    {{ item.name }}
  </vd-sort-item>
</vd-sort>

const data = ref([
  { id: 1, name: '测试1' },
  { id: 2, name: '测试2' },
  { id: 3, name: '测试3' },
]);

const toolbar = ['up', 'down', 'drag'];

自定义工具栏

可通过 vd-toolbar 组件自定义工具栏，便于调整节点位置。

<vd-sort v-model="data" :toolbar="[]">
  <vd-sort-item
    v-for="(item, index) in data"
    :key="item.id"
    :index="index"
  >
    <view>{{ item.name }}</view>
    <vd-sort-toolbar :data="toolbar" />
  </vd-sort-item>
</vd-sort>

const data = ref([
  { id: 1, name: '测试1' },
  { id: 2, name: '测试2' },
  { id: 3, name: '测试3' },
]);

const toolbar = ['up', 'down', 'drag'];

通过方法移动

通过组件提供的 move 方法可以手动触发列表项的移动。

<vd-sort ref="sortRef" v-model="data" :toolbar="toolbar">
  <vd-sort-item
    v-for="(item, index) in data"
    :key="item.id"
    :index="index"
  >
    {{ item.name }}
  </vd-sort-item>
</vd-sort>

<vd-button type="primary" :block="true" @click="handleMove">将第6个移到第2个</vd-button>

const sortRef = shallowRef();

const data = ref([
  { id: 1, name: '测试1' },
  { id: 2, name: '测试2' },
  { id: 3, name: '测试3' },
]);

const toolbar = ['up', 'down', 'drag'];

function handleMove() {
  sortRef.value.move(5, 1);
}

API

Props

参数	说明	类型	默认值
model-value	列表数据	any[]	[]
toolbar	工具栏，可选值为 up down drag	SortToolbar[]	['drag']

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

Sort Slots

名称	说明
default	排序项目

SortItem Slots

名称	说明
up	向上移动按钮图标
down	向下移动按钮图标
drag	拖动按钮图标

Expose

方法名	说明	参数	返回值
move	移动列表项	(from: number, to: number) => void	-
up	向上移动列表项	(index: number) => void	-
down	向下移动列表项	(index: number) => void	-