更新记录

2.0.7（2020-10-13）

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

2.0.6（2020-10-10）

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

✨ Feature

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

🥗 Install

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

🥐 Usage

Vue CLI

// 引入
import ImgCache from '@/components/img-cache/img-cache.vue';

// 注册
components: {
  ImgCache
}

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

HBuilderX

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

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

🥪 API

Props

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

Events

Method

这里我写了几个方法用于处理缓存文件，可无需引入组件，而是引入组件img-cache目录下的index.js，文件路径格式查看RelativeURL

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

resolveFile(url)

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

getDirSize(dir)

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

removeDir(dir)

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

formatSize(size)

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