更新记录

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 组件上是一样可以用的,这里在原有的基础上加了几个属性

属性名 类型 默认值 说明
dir string image 缓存的文件目录(文件夹开头不能有_)
custom-style object - 自定义样式

Events

属性名 类型 说明
click HandleEvent 点击事件,请勿使用@tap点击事件,微信小程序无效,返回值为点击事件及参数

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> 转换后的文字

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问