useDynamicList vue 动态列表

动态列表和普通列表的主要区别在于，动态列表内部维护一条自增列表。该列表映射了元素的添加顺序。提供基础列表函数及其他操作工具。 例如： marge等

Uesage

代码语言：javascript复制

<style>

*{
  margin: 0;
  padding: 0;
}

li{
  list-style: none;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

ul{
  margin: auto;
  width: 400px;
}

li{
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fff;
}

li   li{
  margin-top: 10px;
}

button{
  margin: 8px 12px;
  padding: 6px 12px;
  background: #efefef;
  border-radius: 4px;
  border: 0;
  box-shadow: 0;
}

button.full{
  display: block;
  box-sizing: border-box;
  width: 100%;
  
}

.card{
  margin: 20px auto;
  padding: 10px 20px;
  width: 400px;
  border-radius: 6px;
  box-shadow: 0 -4px 16px 4px rgba(100, 100, 100, .1);
}


.area{
  
  height: 200px;
  background: #eee;

}

.move{
  display: inline-block;
  margin: 10px;
  width: 50px;
  height: 50px;
  border-radius: 4px;
  border: 1px dashed orange;
}

</style>
<template>
  <div id="app">

      <div class="card">
        <ul>
          <li v-for='(item, index) of list ' :key='getKey(index)' >
            <p> value: {{ item }} </p>
            <p> key: {{ getKey(index) }} </p>
            <p> index: {{ index }} </p>
          </li>
        </ul>
      </div>

      <div class="card">

        <button @click='insert(0, 10)'> insert </button>
        <button @click='merge(1, [1, 2])'> merge </button>
        <button @click='replace(0, 100)'> replace </button>
        <button @click='remove(0)'> remove </button>
        <button @click='push(9)'> push </button>
        <button @click='pop'> pop </button>
        <button @click='unshift(90)'> unshift </button>
        <button @click='shift'> shift </button>
        <button @click='resetList(sortForm(list))'> sortForm </button>
        <button @click='() => resetList()'> clear </button>
        

      </div>
    
  </div>
</template>

<script>
import { ref } from 'vue'
import { useDynamic } from 'vx-hook'

export default {
  name: 'App',
  components:{
    
  },
  setup(){
    const [ list, utils ] = useDynamic([1, 2, 3, 4])
   
    return {

      list,
      ...utils
     
    }
  }
}
</script>

Params

• initList 初始列表 any[]

Result

• list 当前列表
• utils 工具集
  • insert 插入 (index: number, data: any) => void
  • merge 合并 (index: number, arr: any[]) => void
  • replace 替换 ( index: number, data: any ) => void
  • remove 移除 (index: number) => void
  • getKey 获取自增标识 (index: number) => void
  • getIndex 获取自增下标 (data: number) => void
  • move 移动 (oldIndex: number, newIndex: number) => void
  • push 追加 (data: any) => void
  • pop 删除尾项 () => void
  • unshift 入栈 (data: any) => void
  • shift 出栈 () => void
  • sortForm 根据添加顺序排序 (arr: any[]) => void
  • resetList 重置 (arr: any[]) => void

vx-hook

data insert push replace void

0 人点赞