享元模式

<div style="height:100px;width:300px;">
  <!-- 确认父容器 宽 高 存在, 依赖父容器 `宽`, `高` 计算 -->
  <s-flyweight ...></s-flyweight>
</div>

更新日志

0.0.9

• 问题修复 v-model:space 和 onend 冲突问题处理

0.0.8

• 新增 v-model:space, 计算空间显示 行 与 列

  被通知对象 notice: {row, column}

  <!-- eg.
    当有5个元素, 
    当: :width="100% / 3", column = 3列, row = 2, 
    当: :width="100% / 5", column = 5列, row = 1,
    当: :width="100% / 7", column = 7列, row = 1
    ...
  -->
  <!-- VUE3 -->
  <template>
    <s-flyweight v-model:space="notice"></s-flyweight>
  </template>
  <script setup>
    let notice = ref({ row: 0, column: 0 });
    watch(
      () => notice.value,
      (val) => {
        console.log(val);
      }
    );
  </script>
  
  <!-- VUE2 -->
  <template>
    <s-flyweight :space.sync="notice"></s-flyweight>
  </template>
  <script>
    export default {
      data() {
        return {
          notice: { row: 0, column: 0 },
        };
      },
    };
  </script>

0.0.7

• 新增 :auto, 默认值: false

当 auto 为 true 时, :width 赋值会被视为 最小值, 剩余空间自动填充

<s-flyweight :auto="true" :width="100"></s-flyweight>

0.0.6

• 优化 flys 初始化赋值,不改变时,获取 length 问题

0.0.5

• 扩展 width 赋值

  <!-- 添加`百分比`计算, 计算顺序, 左 => 右 -->
  <s-flyweight width="100% / 2 - 10px"></s-flyweight>
  <s-flyweight width="calc(100% - 100px)"></s-flyweight>
  <s-flyweight width="100% - 100px"></s-flyweight>
  <s-flyweight width="100px - 10px"></s-flyweight>
  <s-flyweight width="100px"></s-flyweight>

• 优化了 slot end 的呈现逻辑

  <!-- onend为滑动到底时, 回调函数 -->
  <s-flyweight :flys="..." @onend="...">
    <template #default="{ data, index }"> 呈现内容 {{data.*}} </template>
    <template #end> ...显示在最下面的相关信息 </template>
  </s-flyweight>

0.0.3

• 新增 :top

  <s-flyweight :top="滚动高度"></s-flyweight>

0.0.2

• 优化了 Vue3 的 兼容 问题

  Vue3 引入方式

  <script>
    import { Flyweight } from "@soei/flyweight";
  </script>
  <!-- 非 <style scoped>  scoped-->
  <style>
    @import "@soei/flyweight/dist/style.css";
  </style>

  或 源码引入

  import Flyweight from "@soei/flyweight/src/Flyweight.vue";

  或

  // main.js
  import "@soei/flyweight/dist/style.css";
  import flyweight from "@soei/flyweight";
  Vue.use(flyweight);
  // use.vue
  <s-flyweight ...></s-flyweight>

安装

npm i @soei/flyweight

引用

// 引入方式 vue2
import Flyweight from "@soei/flyweight/src/Flyweight.vue";
// 引入方式 Vue3
import { Flyweight } from "@soei/flyweight";

使用

<Flyweight
  :index="0"
  :view="{id: Number, picker: 'id'}"
  :flys="list|Array"
  :width="80"
  :height="130"
  :offset="[0, 30]"
  @onend="Function"
>
  <template #default="{data, index}"> ...todo </template>
</Flyweight>

<Flyweight [attrs]></Flyweight>

index 和 view 只生效一个

index 定位索引

  // 格式
  Number;
  :index="10";

view 指定显示哪个索引

  // 格式
  {
    // 定位属性
    id: Number,
    // 定位属性字段名称
    picker: String
  }
  :view="{id: 10, picker: 'id'}";

flys 显示的数据列表

// 格式
Array;
:flys="[]";

width 单个容器 宽度

// 格式
Number;
// 默认: 0, 占整行
:width="100";

height 单个容器 高度

// 格式
Number;
// 默认: 100
:height="10";

offset 偏移量 [左右, 上下]

// 格式
Array = [左右, 上下];
:offset="[0, 30]";

@onend 拉到底部时的回调

// 格式
Function;
@onend="function(){}";