hash2path wrapper for vue.js
JavaScript
Latest commit 474bd43 Dec 2, 2016 @banricho banricho Fix bug
Permalink
Failed to load latest commit information.
build
dist
src
.eslintrc
.gitignore
README.md
package.json

README.md

vue-img

hash2path wrapper for vue 2

使用方法

安装插件

// 默认全局配置
Vue.use(VueImg)

// 自定义全局配置
Vue.use(VueImg, {
  loading: '',
  error: '',
  prefix: '',
  quality: 100
})

使用指令

基本用法

由于 Vue 2 删除了指令中的 params,故采用 object value 的形式传入参数

<!-- 设置图片 + 默认参数 -->
<img v-img="'xxx'">
<!-- 设置图片 + 自定义参数 -->
<img v-img="{ hash: 'xxx', width: 233, height: 666 }">

<!-- 设置背景 + 默认参数 -->
<div v-img="'xxx'"></div>
<!-- 设置背景 + 自定义参数 -->
<div v-img="{ hash: 'xxx', width: 12, height: 450 }"></div>

可读属性

VueImg 提供了一些属性,可用于指令以外的场合。你应当视它们为只读属性,避免直接修改。

VueImg.cdn             // [String]   当前环境的默认 CDN
VueImg.canWebp         // [Boolean]  当前环境是否支持 webP
VueImg.getSrc({ ... }) // [Function] 获取图片地址

参数列表

名称 描述 全局配置 指令参数 getSrc 函数
hash [String] 图片哈希(必填) 不支持 支持 支持
width [Number] 宽度 不支持 支持 支持
height [Number] 高度 不支持 支持 支持
quality [Number] 图片质量 [?] 支持 支持 支持
prefix [String] CDN 地址前缀 支持 不支持 支持
suffix [String] CDN 处理后缀 [?] 不支持 支持 支持
loading [String] 加载中默认图片哈希 支持 支持 不支持
error [String] 失败替换图片哈希 支持 支持 不支持

贡献代码

npm install  # 安装依赖
npm run dev  # 构建文件
npm run test # 单元测试

开源协议

MIT