vue-lazy-load-list
vue-lazy-load-list
一个vue的懒加载组件,当一个list或者一个多级的list的数据非常庞大的时候,如果不做局部渲染或者懒加载,浏览器是扛不住的。此组件就是解决这样的问题的,只会渲染视图区中的要呈现的数据,而不是把所有数据一下子全部渲染。
安装
npm install --save vue-lazy-load-list beautify-scrollbar
注册
import Vue from 'vue';
import 'beautify-scrollbar/dist/index.css';
import lazyLoadList from 'vue-lazy-load-list';
Vue.use(lazyLoadList);
在组件中直接使用
<lazy-load-list :data="data"></lazy-load-list>
属性
参数 | 类型 | 是否必填 | 可选值 | 默认值 | 说明 |
---|---|---|---|---|---|
data | Array | 是 | ———— | [] | 一个数组,数组里的各个item为对象,对象里可以有children ,children必须是个数组,数组里的各个item为对象,可以这样一直嵌套下去,对深度没什么限制,这表示,你不仅可以做一个只有一层的列表,也可以做深层嵌套的列表 |
listHeight | Number 或 String | 否 | ———— | 100px | 组件中列表的高度 |
itemHeight | Number 或 String | 否 | ———— | 40px | 组件的列表中的每个item的高度 |
mode | String | 否 | 'demand' 或 'lazy' | 'demand' | 渲染模式,当是demo模式时,滚上去的区域会从dom中移除,lazy模式不会移除 |
searchKeys | Array | 否 | ———— | [] | 搜索的时候对哪些字段进行搜索 |
threshold | Number 或 String | 否 | ———— | 0 | 钩子函数,当距离滚动结束还有threshold的距离时,触发reach-threshold 事件 |
tag | String | 否 | ———— | ‘div’ | 定义列表包裹元素的tag名称 |
itemTag | String | 否 | ———— | ‘div’ | 定义列表的tag |
hasSearchInput | Boolean | 否 | ———— | true | 是否有搜索框 |
placeholder | String | 否 | ———— | 'please enter keywords' | 搜索框的placeholder |
事件
props | type | requred | optional | default | details |
---|---|---|---|---|---|
reach-threshold | Function | 否 | ———— | 无 | 钩子函数,当距离滚动结束还有threshold的距离时,触发reach-threshold 事件 |
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
LICENSE
MIT
Dependencies
vue-i18n: ^7.6.0url-loader: ^1.0.1normalize.css: ^8.0.0element-ui: ^2.3.2animate.css: ^3.6.1babel-core: ^6.26.0babel-loader: ^7.1.2babel-preset-env: ^1.6.0babel-preset-stage-3: ^6.24.1chai: ^4.1.2chalk: ^2.3.2copy-webpack-plugin: ^4.5.1cross-env: ^5.1.4css-loader: ^0.28.7extract-text-webpack-plugin: ^3.0.2file-loader: ^1.1.4html-webpack-plugin: ^3.1.0karma: ^2.0.0karma-chai: ^0.1.0karma-chrome-launcher: ^2.2.0karma-coverage: ^1.1.1karma-mocha: ^1.3.0karma-mocha-reporter: ^2.2.5karma-sourcemap-loader: ^0.3.7karma-webpack: ^3.0.0less: ^3.0.1less-loader: ^4.1.0mocha: ^5.0.5optimize-css-assets-webpack-plugin: ^4.0.0ora: ^2.0.0rimraf: ^2.6.2semver: ^5.5.0shelljs: ^0.8.1uglifyjs-webpack-plugin: ^1.2.4vue-loader: ^13.0.5vue-template-compiler: ^2.4.4webpack: ^3.6.0webpack-dev-server: ^2.9.1