更新记录

1.0.0（2020-08-14）

图片缓存组件

imgcache

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.js

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

getDirSize(dir)

• 根据目录获取目录大小
• 参数：dir <String> 目录地址
• 返回：<Promise> 目录大小

removeDir(dir)

• 删除目录
• 参数：dir <String> 目录地址

formatSize(size)

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