下载框架

npm i zaj-indexedb

实例化

const app = createApp(App)
import wcpPlugin from 'zaj-indexedb'
app.use(wcpPlugin,{
    baseURL: 'https://static.wcp.8080c.cn/other/',
    time: 1000 * 60 * 60 * 24 * 7,
    type: 'canvas',
    quality: 1,
    errorImg: 'https://static.wcp.8080c.cn/html/demo/error-img.png',
    loadingImg: 'https://static.wcp.8080c.cn/html/demo/loading.gif',
    errorGetType: 'fetch',
    loadingGetType: 'fetch'
})

页面使用

<img v-wcpImgDb="imgUrl" alt="" />

options 说明

| 参数名 | 说明 | 类型 | 默认值 | |---------|----------------------------------|---------|-------------------------| | baseURL | 基础路径 | String | '' | | time | 过期时间 | Number | 1000 * 60 * 60 * 24 * 7 | | type | 图片获取类型 canvas or fetch | enum | canvas | | quality | 图片质量（type=canvas时可用） | Number（ 0-1 ） | 1 | | errorImg | 加载失败图片 | String | 'https://static.wcp.8080c.cn/html/demo/error-img.png' | | loadingImg | 加载中图片 | String | 'https://static.wcp.8080c.cn/html/demo/loading.gif' | | errorGetType | 加载失败图片获取方式（若图片是gif图片，则必须使用fetch） | String | 'fetch' | | loadingGetType | 加载中图片获取方式（若图片是gif图片，则必须使用fetch） | String | 'fetch' |

实例函数

| 函数名 | 说明 | 参数 | 返回值 | | --- |--------|-----|-----------------------------------------| | getImgUrl | 获取图片地址 | url | { url: 传递的真实路径, renderUrl: 图片 blob 路径 } | | clearDb | 清空所有数据 | | |

使用方法

import { ref, getCurrentInstance } from 'vue'
const app = getCurrentInstance()
app.appContext.config.globalProperties.$wcp.clearDb()