npm.io
1.0.0 • Published 5 years ago

vue-falls-release

Licence
ISC
Version
1.0.0
Deps
0
Size
6 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

构建目标

  • 当图片加载失败时，不做显示
  • 图片进行预加载，提升用户体验
  • 每次添加图片的时候保证往最短的列插入
  • 保证图片比例，高度由图片高度等比例撑开
  • 参数变化时触发页面更新
// 安装开发依赖
npm i vue-falls --save
  • 安装成功后，在项目中引入
// main.js 中全局引入 注意 Vue.use要在new Vue实例之前
import falls from 'vue-falls'
Vue.use(falls)
  • 组件内使用
 <vue-falls :photoList="photoList" :row="row" @onClick="click" width="500"></vue-falls>
  • 参数说明
参数 默认值 类型 示例 说明
photoList [] array [{url:'path'},{url:'path'}] 图片list,每个item至少包含url
row 2 number 5 要显示的排数，默认显示2排
width 100% string '500 ' 整个容器的宽度，默认100%