更新记录

2.0.8（2021-03-09） 下载此版本

• 优化缓存数据方法
• 修复图片多时页面卡顿问题
• 调整缓存方法导出

2.0.7（2020-10-13） 下载此版本

• 修复小程序无法自定义样式

2.0.6（2020-10-10） 下载此版本

• 修复图片地址修改显示不刷新
• 优化缓存图片
• 新增示例项目

平台兼容性

uni-app

✨ Feature

• UNIAPP APP 平台（vue）上图片缓存组件
• 可兼容其他平台写法

🥗 Install

• 在 uni-app 插件市场右上角选择使用HBuilderX 导入插件或者下载插件ZIP
• 将下载解压后的img-cache文件夹，复制到components目录内

🥐 Usage

由于 uni-app 的 easycom，可以不用引用、注册，直接在页面中使用

<img-cache src="https://example.com/image.png"></img-cache>

🥪 API

Props

image的属性在img-cache组件上是一样可以用的，这里在原有的基础上加了几个属性

Events

Method

// 引入
import { resolveFile, getDirSize, removeDir, formatSize, storage } from '@/components/img-cache';

① 处理缓存文件（路径格式查看RelativeURL）

resolveFile(url)

• 获取目录对象或文件对象
• 参数：url <string> 要操作文件或目录的 URL 地址
• 返回：Promise<object> 目录或文件对象，若不存在返回 null

getDirSize(dir)

• 获取目录大小
• 参数：dir <string> 目录地址
• 返回：Promise<number> 目录大小，单位字节

removeDir(dir)

• 删除目录
• 参数：dir <string> 目录地址
• 返回：Promise<boolean> 删除状态

formatSize(size)

• 格式化字节大小
• 参数：size <number> 字节大小
• 返回：string 转换后的文字

② 处理缓存数据

storage.clear()

• 清空缓存数据