Tantalum UI

Appearance

Return to top
On this page

Order 调整排序布局

宫格类排序组件，类似于微信朋友圈上传图片，支持删除功能。

vue
<template>
  <!-- <ta-group title="基础用法">
    <div class="exp-order-box">
      <ta-order v-model:items="items">
        <template #default="{ id }">
          <div class="exp-order-item" :class="[maps.get(id)]"></div>
        </template>
      </ta-order>
    </div>
  </ta-group> -->
  <ta-group title="设置列数">
    <div class="exp-order-box">
      <ta-order v-model:items="items2" :columnNumber="4">
        <template #default="{ id }">
          <div class="exp-order-item" :class="[maps.get(id as number)]"></div>
        </template>
      </ta-order>
    </div>
  </ta-group>
  <ta-group title="允许删除">
    <div class="exp-order-box">
      <ta-order v-model:items="items3" :deletable="true">
        <template #default="{ id }">
          <div class="exp-order-item" :class="[maps.get(id as number)]">
            {{ maps.get(id as number) }}
          </div>
        </template>
      </ta-order>
    </div>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

const items = [
  { id: 1, type: 'primary' },
  { id: 2, type: 'success' },
  { id: 3, type: 'warning' },
  { id: 4, type: 'danger' }
]

const maps = new Map(
  items.map(item => {
    return [item.id, item.type]
  })
)

export default defineComponent({
  name: 'ExpOrder',
  setup() {
    return {
      items: ref(
        items.map(item => {
          return { id: item.id }
        })
      ),
      items2: ref(
        items.map(item => {
          return { id: item.id }
        })
      ),
      items3: ref(
        items.map(item => {
          return { id: item.id }
        })
      ),
      maps
    }
  }
})
</script>

Import

js
import { TaOrder } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

ts
import type { OrderOnDelete } from 'tantalum-ui-mobile'

Props

属性类型默认值必填说明
v-model:itemsItem[]是列表数组
column-numbernumber3否渲染列数
aspect-rationumber1否渲染宽高比
deletablebooleanfalse否支持删除

注： 由于该组件是宫格类排序，所以需要预设列数和每项固定宽高。

items 的结构

ts
interface Item {
  id: string | number
  draggable?: boolean
}

注：要求一定要有 id 作为唯一键。

Events

事件描述回调函数参数TypeScript 函数
delete单项被删除时触发payload: { item: { id: string | number }, index: number }OrderOnDelete

Slots

列表项（#default）

vue
<ta-order>
 <template #default="{ id, index }">
  {{ index }} : {{ id }}
 </template>
</ta-order>