更新记录

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

属性名 类型 默认值 说明
dir string imgcache 缓存的文件目录,文件夹开头不能有_
width string | number - 宽度,单位任意,如果为数值,则为 rpx 单位
height string | number - 高度,单位任意,如果为数值,则为 rpx 单位
custom-style object - 自定义样式,自定义样式宽高权重大于属性设定的宽高

Events

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

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

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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