MoreHook

Appearance

Return to top
On this page

useDynamicList

用于管理列表状态

Demo

source

value:a uuid:0+2qow5jd1

value:b uuid:1+2qow5jd1

value:c uuid:2+2qow5jd1

Usage

html
<template>
  <div style="display: flex; align-items: flex-start">
    <div style="width: 400px; margin-right: 30px">
      <p
        v-for="(active, index) in list"
        :key="getKey(index)"
        style="padding: 10px; border: 1px solid #cccccc"
      >
        value:{{ active }} uuid:{{ getKey(index) }}
      </p>
    </div>
    <div style="width: 20vw">
      <button @click="() => insert(0, Math.random())">
        insert头部插入
      </button>
      <button @click="() => resetList(['a', 'b', 'c'])"> 重置 </button>
      <button @click="() => replace(1, Math.random())">第二个替换</button>
      <button @click="() => remove(1)">删除第二个</button>
      <button @click="() => move(0, 2)">一三互换位置</button>
      <button @click="() => push(Math.random())">尾部插入</button>
      <button @click="() => pop()">尾部删除</button>
      <button @click="() => unshift(Math.random())">头部插入</button>
      <button @click="() => shift()">头部删除</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useDynamicList } from '@morehook/core'

const defalutValue = ref(['a', 'b', 'c'])
const {
  list,
  insert,
  resetList,
  replace,
  remove,
  move,
  getKey,
  push,
  pop,
  unshift,
  shift
} = useDynamicList<string | number>(defalutValue)
</script>

Type Declarations

typescript
/**
 * 用于管理列表状态
 * @param initialValue 初始列表
 * @returns
 */
export declare function useDynamicList<T = any>(
  initialValue: Ref<T[]>
): {
  list: Ref<T[]>
  resetList: (resetList: Ref<T[]> | T[]) => void
  insert: (index: number, ...obj: any[] | any[][]) => void
  replace: (index: number, obj: T) => void
  remove: (index: number) => void
  move: (oldIndex: number, newIndex: number) => void
  push: (obj: T) => void
  pop: () => void
  unshift: (obj: T) => void
  shift: () => void
  getKey: (index: number) => string
  getIndex: (key: string) => number
}

Source

Source • Demo • Docs