# flowlistvue

> flow list in vue

Latest version **1.0.15** (published 2019-10-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install flowlistvue
pnpm add flowlistvue
yarn add flowlistvue
bun add flowlistvue
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.15 |
| Published | 2019-10-23 |
| First published | 2019-10-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 59.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | qljia |
| Maintainers | yilingapa |
| Keywords | flowlist, vue |

## Links

- npm: https://www.npmjs.com/package/flowlistvue
- Repository: https://gitlab.mfwdev.com/qilejia/flowlistvue
- npm.io page: https://npm.io/package/flowlistvue

## Recent versions

- 1.0.15 (latest) — 2019-10-23
- 1.0.14 — 2019-10-23
- 1.0.0 — 2019-10-22

## README

I found I have 20 downloads on NPM;<br>
So I decide to do my best to improve this component;

# Props
| 参数        | 说明                            | 类型        | 默认值 | 必填 |
| ----------- | ------------------------------- | ----------- | ------ | ------ |
| `list`      |   传入的数据    | `Array`    |   []     | N |
| `order`      |   每页是否按序，list长度每次增加时，新增的是否按照原顺序依次添加，为true时依次添加，为false时优化排序(使每列相差最小)后添加    | `boolean`    |   flase    | N |
| `lineNum` | 有多少列                 | `Number`>=2    |   2      | N | 
| `rowGap`  | 每行之间的间距,单位包括(px,rem,vw) | `String` |   10px     | N |
| `justifyContent` | 每列如何排序, spaceBetween两端对齐;<br/>spaceAround剩余空间均分;<br/>Number列之间间距固定,单位px，整体在容器中居中 ;              | `Number`或 spaceBetween或spaceAround   |    spaceBetween     | N |  

# 使用
```html
import flowlist from 'flowlistvue';
Vue.use(flowlist);

<flow-list :list="list" :order="false" :lineNum="4" :justifyContent="justifyContent">
   <template v-for="(item,index)  in list">
       /**data为插槽props，就是list中这一项的item*/
       /**自定义每项的内容*/
   </template>
</flow-list>
<script>
 //当是同一个引用，新增时
 this.list.push(...res.list);
 //等等vue中的数组变异方法
 
 //或不是同一个引用，会全部重新渲染，不会沿用上次的渲染结果
 this.list = [...]
</script>
```

# 是否乱序 
按序时，例如四列,第一页[1,2,3,4,5]<br/>
         排列为<br/>
         * 1,2,3,4,<br/>
         * 5,<br/>
         * 第二页[6,7,8,9,10,11]<br/>
         此时排列为<br/>
         * 1, 2, 3, 4,<br/>
         * 5, 6, 7, 8,<br/>
         * 9, 10,11,<br/>

不按序时，每页内容不变，但是会根据每列的长度自动调整顺序，使每列总长度相差最小
<br/>

# 注意

* a,   要求块的高度在渲染后不会再动态改变
  >比如有个img，那么这个img开始时就要定高(在接口要求返回图片的高度)， 
  组件不处理“除文字外其他内容加载导致之后块大小变化”的逻辑

* b,   不会修改块的样式，也不会影响块内数据的绑定

  >只是给每个$slots.default加上了定位容器，每个内容块本身不受影响

* c,   乱序时的性能

  >每次新增的块可以乱序，乱序可以使每列的总长度相当接近，比较美观

* d,   ⚠️每个块必须规定一个唯一key属性

* e,   list重新赋值(不是同一个引用)会重新渲染

  >如果块内的内容增加或减少导致了高度增加或塌陷，可以使用this.list = [...this.list]重新绘制，<br>
但是会导致“该位置之后的”块重新排列，造成不好的体验，所以尽量不要在排列好之后改变块的高度

* f,  只处理了每列宽度相同的情况

---
_Source: https://npm.io/package/flowlistvue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._