安装

npm i @ifun-vue2/lazy-load

组件包包含

• 一个指令v-lazy-load
• 一个lazy-select 下拉懒加载组件，可结合el-form表单校验
• 一个lazy-list 下来滚动列表组件。

import IFunLazyLoad from "@ifun-vue2/lazy-load";

// 使用
Vue.use(IFunLazyLoad);

组件完全支持所有的el-select 属性。比如clearable, 但是懒加载可能会对其他使用场景有一些限制，测试不能完全,欢迎提issue

lazy-select 基本使用

通过传入data, 数据类型为数组。

<template>
  <div style="margin-bottom:20px;">
    <IFunLazySelect :data="data" v-model="value" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      value: "",
    };
  },
  mounted() {
    this.data = new Array(100).fill(0).map((item, index) => ({
      value: index,
      label: "数据" + index,
    }));
  },
};
</script>

自定义下拉渲染props

使用selectProps 来定义下拉渲染定义的 value、label 值

<template>
  <div style="margin-bottom:20px;">
    <IFunLazySelect :data="data" :selectProps="selectProps" v-model="value" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      selectProps: {
        value: "id",
        label: "title",
      },
      value: "",
    };
  },
  mounted() {
    this.data = new Array(100).fill(0).map((item, index) => ({
      id: index,
      title: "数据" + index,
    }));
  },
};
</script>

结合el-form实现组件校验

v-model数据绑定。通过 el-form rules进行数据校验。

<template>
  <div style="margin-bottom:20px;">
    <el-form :model="form" :rules="rules">
      <el-form-item prop="userId">
        <IFunLazySelect
          :data="data"
          :selectProps="selectProps"
          v-model="form.userId"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      selectProps: {
        value: "id",
        label: "title",
      },
      form: {
        userId: "",
      },
      rules: {
        userId: [{ required: true, message: "请选择" }],
      },
    };
  },
  mounted() {
    this.data = new Array(100).fill(0).map((item, index) => ({
      id: index,
      title: "数据" + index,
    }));
  },
};
</script>

实现默认值选中

由于是懒加载数据，默认初始值可能由于没有被渲染，而导致不能展示出名称。通过定义属性处理默认值。

使用checked 来传入默认选中的 value 值。

<template>
  <div style="margin-bottom:20px;">
    <IFunLazySelect
      :data="data"
      :checked="23"
      :selectProps="selectProps"
      v-model="value"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      selectProps: {
        value: "id",
        label: "title",
      },
      value: "",
    };
  },
  mounted() {
    this.data = new Array(100).fill(0).map((item, index) => ({
      id: index,
      title: "数据" + index,
    }));
  },
};
</script>

checked 支持 select 的多选操作。字符串或者数组；选中默认值

通过lazy设置是否分页加载数据

分页加载数据时，通过绑定外部加载函数load处理分页加载。数据处理逻辑则自行处理。

 <IFunLazySelect
  :data="data"
  lazy
  :load="handleLoadData"
  :selectProps="selectProps"
  v-model="value"
/>

API 属性一览

| props | 说明 | 默认值 | | ----------- | :------------------------------------: | ----------------------------------: | | checked | 初始值，默认选中回显 | 非必须，string | | data | 下拉数据源 | 必传，Array | | selectProps | 下拉列表渲染的属性 key | 默认{value:"value",label:"label"} | | lazy | 是否远程加载，需配合load加载远程数据 | 默认 false | | load | 需配合lazy加载远程数据 | Function |

其他el-select 支持的属性，事件。

lazy-list 基本使用

通过传入data, 数据类型为数组。通过slot自定义渲染。

<template>
  <div style="margin-bottom:20px;height:150px;">
    <IFunLazyList :data="data">
      <template #default="item">
        <div>{{ item.label }}</div>
      </template>
    </IFunLazyList>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
    };
  },
  mounted() {
    this.data = new Array(100).fill(0).map((item, index) => ({
      value: index,
      label: "数据" + index,
    }));
  },
};
</script>

API 属性一览

| props | 说明 | 默认值 | | ----------- | :------------------------------------: | ----------------------------------: | | data | 下拉数据源 | 必传，Array | |size|默认加载数据的数量,非远程加载时有效|| | lazy | 是否远程加载，需配合load加载远程数据 | 默认 false | | load | 需配合lazy加载远程数据 | Function |

| slot | 说明 | 默认值 | | ----------- | :------------------------------------: | ----------------------------------: | |default| 默认插槽，自定义渲染，暴露单项数据||

v-lazy-load 指令使用

v-lazy-load指令用于懒加载数据

<template>
  <div class="ifun-lazy-list" v-lazy-load="lazyOption">
    <template v-for="item in viewData">
      <slot v-bind="item"></slot>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [],
      lazyOption: {
        loadData: $this.loadData,
        distance: 20,
        callback: (fn) => {
          // 这里是在组件销毁前, 移除监听事件.
          $this.$once("hook:beforeDestroy", () => fn());
        },
      },
    };
  },
  
};
</script>

属性一览

| props | 说明 | 默认值 | | ----------- | :------------------------------------: | ----------------------------------: | | loadData | 懒加载数据方法 | Function | | distance | 懒加载滚动触发加载距离底部距离， | 默认20 | | callback | 执行销毁逻辑的回掉函数，正常使用方法如示例所示，组件销毁时移除DOM监听 | Function | |scrollBody| 滚动容器元素，默认取当前指令绑定元素，可自定义||