release 2.6.1

.eslintrc

@@ -0,0 +1,35 @@
+env:
+  es6: true
+  browser: true
+
+parserOptions:
+  ecmaVersion: 6
+  sourceType: module
+
+rules:
+  indent: [ 1, 2, SwitchCase: 1 ]
+  quotes: [ 1, single ]
+  linebreak-style: [ 1, unix ]
+  semi: [ 1, never ]
+  no-undef: [ 1 ]
+  no-console: [ 0 ]
+  no-debug: [ 0 ]
+  no-unused-vars: [ 1 ]
+  space-infix-ops: [ 1 ]
+  no-multi-spaces: [ 1 ]
+  no-fallthrough: [ 0 ]
+  comma-dangle: [1, only-multiline]
+  eol-last: 'error'
+
+globals:
+  Vue: true
+  module: true
+  require: true
+  crayfish: true
+  Promise: true
+  UParams: true
+  Geohash: true
+  hybridAPI: true
+  UBT: true
+
+extends: 'eslint:recommended'

.gitignore

@@ -0,0 +1,4 @@
+*.log
+.cache
+.DS_Store
+node_modules

README.md

@@ -0,0 +1,79 @@
+# vue-img
+
+> hash2path wrapper for vue 2
+
+## 使用方法
+
+### 安装插件
+
+```JS
+// 默认全局配置
+Vue.use(VueImg)
+
+// 自定义全局配置
+Vue.use(VueImg, {
+  loading: '',
+  error: '',
+  prefix: '',
+  quality: 100
+})
+```
+
+### 使用指令
+
+#### 基本用法
+
+> 由于 Vue 2 删除了指令中的 params，故采用 object value 的形式传入参数
+
+```HTML
+<!-- 设置图片 + 默认参数 -->
+<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 提供了一些属性，可用于指令以外的场合。你应当视它们为**只读**属性，避免直接修改。
+
+```JS
+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] 失败替换图片哈希 | 支持 | 支持 | 不支持
+disableWebp | [Boolean] 禁用 webP | 支持 | 支持 | 支持
+
+- `suffix` 参数可用于模糊、旋转等特殊处理，具体请参考[《七牛 CDN 开发者文档》](http://developer.qiniu.com/code/v6/api/kodo-api/image/imagemogr2.html)。
+
+## 贡献代码
+
+```bash
+npm install  # 安装依赖
+npm run dev  # 构建文件
+npm run test # 单元测试
+```
+
+- 提交代码前请确保已通过测试。
+- 更多细节请参考[《饿了么开源项目贡献指南》](https://github.com/ElemeFE/vue-img/blob/master/.github/CONTRIBUTING_zh-cn.md)。
+
+## 开源协议
+
+MIT

build/karma.config.js

@@ -0,0 +1,14 @@
+module.exports = config => {
+  config.set({
+    basePath: '../',
+    browsers: ['Chrome'],
+    files: [
+      'http://github.elemecdn.com/vuejs/vue/v2.2.4/dist/vue.js',
+      'dist/vue-img.js',
+      'build/test/*.test.js'
+    ],
+    frameworks: ['mocha', 'chai'],
+    reporters: ['mocha'],
+    singleRun: true
+  })
+}

build/rollup.config.js

@@ -0,0 +1,18 @@
+import eslint from 'rollup-plugin-eslint'
+import buble from 'rollup-plugin-buble'
+
+const argv = process.argv[4]
+const config = {
+  '--es5': { dest: 'vue-img', format: 'umd', plugins: [ eslint(), buble() ] },
+  '--es6': { dest: 'vue-img.es6', format: 'es', plugins: [ eslint() ] }
+}[argv]
+
+export default {
+  entry: 'src/index.js',
+  dest: `dist/${config.dest}.js`,
+
+  format: `${config.format}`,
+  moduleName: 'VueImg',
+
+  plugins: config.plugins
+}

build/test/base.test.js

@@ -0,0 +1,10 @@
+describe('检测依赖', () => {
+  it('Vue 2 已安装', () => {
+    expect(Vue).to.exist
+    expect(Vue.version.split('.')[0]).to.equal('2')
+  })
+
+  it('VueImg 已安装', () => {
+    expect(VueImg).to.be.an('object')
+  })
+})

build/test/core.test.js

@@ -0,0 +1,56 @@
+describe('检测核心函数 getSrc', () => {
+  const config = { hash: '50f940dbce46148638e03d0778a4c5f8jpeg' }
+
+  it('{ null }', () => {
+    expect(VueImg.getSrc())
+      .to.equal('')
+    expect(VueImg.getSrc({}))
+      .to.equal('')
+    expect(VueImg.getSrc({ hash: 12450 }))
+      .to.equal('')
+    expect(VueImg.getSrc({ hash: null }))
+      .to.equal('')
+  })
+
+  it('{ hash }', () => {
+    expect(VueImg.getSrc(config))
+      .to.match(/^http:\/\/fuss10.elemecdn.com\//)
+      .to.include('/5/0f/940dbce46148638e03d0778a4c5f8jpeg.jpeg')
+      .to.include('?imageMogr/')
+      .to.match(/format\/webp\/$/)
+  })
+
+  it('{ hash, prefix }', () => {
+    config.prefix = 'eleme.me'
+    expect(VueImg.getSrc(config))
+      .to.match(/^eleme\.me\//)
+  })
+
+  it('{ hash, prefix, suffix }', () => {
+    config.suffix = 'github'
+    expect(VueImg.getSrc(config))
+      .to.match(/github$/)
+  })
+
+  it('{ hash, prefix, suffix, quality }', () => {
+    config.quality = 75
+    expect(VueImg.getSrc(config))
+      .to.include('/quality/75/')
+  })
+
+  it('{ hash, prefix, suffix, quality, width, height }', () => {
+    config.width = 100
+    expect(VueImg.getSrc(config))
+      .to.include('/thumbnail/100x/')
+
+    config.height = 200
+    expect(VueImg.getSrc(config))
+      .to.include('/!100x200r/gravity/Center/crop/100x200/')
+  })
+
+  it('{ disableWebp }', () => {
+    config.disableWebp = true
+    expect(VueImg.getSrc(config))
+      .to.not.include('webp')
+  })
+})

build/test/directive.test.js

@@ -0,0 +1,149 @@
+describe('检测指令', function() {
+  this.timeout(6000)
+
+  const hash = '50f940dbce46148638e03d0778a4c5f8jpeg'
+  const loading = '7b73ae0bcb1e68afacbaff7d4b25780bjpeg'
+  const error = '4f88f93f3797600783990d32e5673ab7jpeg'
+  const config = { loading }
+  const re = /^url\(['"]?(.*?)['"]?\)$/
+  let vm
+
+  before(done => {
+    const el = document.createElement('section')
+    el.id = 'app'
+    el.innerHTML = '<img v-img="config"><div v-img="config"></div>'
+    document.body.appendChild(el)
+
+    Vue.use(VueImg)
+    vm = new Vue({ el: '#app', data: { config } })
+    setTimeout(done, 1000)
+  })
+
+  describe('{ loading }', () => {
+    before(done => {
+      Vue.set(vm.config, 'hash', 'xxxxxx')
+      setTimeout(done, 2000)
+    })
+
+    it('测试通过', () => {
+      const imgSrc = document.querySelector('#app img').src
+      const divImg = document.querySelector('#app div').style.backgroundImage.match(re)[1]
+      const src = VueImg.getSrc({ hash: loading })
+
+      expect(imgSrc).to.equal(src)
+      expect(divImg).to.equal(src)
+    })
+  })
+
+  describe('{ error }', () => {
+    before(done => {
+      Vue.set(vm.config, 'error', error)
+      setTimeout(done, 2000)
+    })
+
+    it('测试通过', () => {
+      const imgSrc = document.querySelector('#app img').src
+      const divImg = document.querySelector('#app div').style.backgroundImage.match(re)[1]
+      const src = VueImg.getSrc({ hash: error })
+
+      expect(imgSrc).to.equal(src)
+      expect(divImg).to.equal(src)
+    })
+  })
+
+  describe('{ hash }', () => {
+    before(done => {
+      Vue.set(vm.config, 'hash', hash)
+      setTimeout(done, 2000)
+    })
+
+    it('测试通过', () => {
+      const imgSrc = document.querySelector('#app img').src
+      const divImg = document.querySelector('#app div').style.backgroundImage.match(re)[1]
+      const src = VueImg.getSrc(config)
+
+      expect(imgSrc).to.equal(src)
+      expect(divImg).to.equal(src)
+    })
+  })
+
+  describe('{ hash, suffix }', () => {
+    before(done => {
+      Vue.set(vm.config, 'suffix', 'blur/3x5')
+      setTimeout(done, 2000)
+    })
+
+    it('测试通过', () => {
+      const imgSrc = document.querySelector('#app img').src
+      const divImg = document.querySelector('#app div').style.backgroundImage.match(re)[1]
+      const src = VueImg.getSrc(config)
+
+      expect(imgSrc).to.equal(src)
+      expect(divImg).to.equal(src)
+    })
+  })
+
+  describe('{ hash, suffix, height }', () => {
+    before(done => {
+      Vue.set(vm.config, 'height', 100)
+      setTimeout(done, 2000)
+    })
+
+    it('测试通过', () => {
+      const imgSrc = document.querySelector('#app img').src
+      const divImg = document.querySelector('#app div').style.backgroundImage.match(re)[1]
+      const src = VueImg.getSrc(config)
+
+      expect(imgSrc).to.equal(src)
+      expect(divImg).to.equal(src)
+    })
+  })
+
+  describe('{ hash, suffix, width, height }', () => {
+    before(done => {
+      Vue.set(vm.config, 'width', 100)
+      setTimeout(done, 2000)
+    })
+
+    it('测试通过', () => {
+      const imgSrc = document.querySelector('#app img').src
+      const divImg = document.querySelector('#app div').style.backgroundImage.match(re)[1]
+      const src = VueImg.getSrc(config)
+
+      expect(imgSrc).to.equal(src)
+      expect(divImg).to.equal(src)
+    })
+  })
+
+  describe('{ hash, suffix, width, height, quality }', () => {
+    before(done => {
+      Vue.set(vm.config, 'quality', 80)
+      setTimeout(done, 2000)
+    })
+
+    it('测试通过', () => {
+      const imgSrc = document.querySelector('#app img').src
+      const divImg = document.querySelector('#app div').style.backgroundImage.match(re)[1]
+      const src = VueImg.getSrc(config)
+
+      expect(imgSrc).to.equal(src)
+      expect(divImg).to.equal(src)
+    })
+  })
+
+  describe('hash', () => {
+    before(done => {
+      vm.config = hash
+      setTimeout(done, 2000)
+    })
+
+    it('测试通过', () => {
+      const imgSrc = document.querySelector('#app img').src
+      const divImg = document.querySelector('#app div').style.backgroundImage.match(re)[1]
+      const src = VueImg.getSrc({ hash })
+
+      expect(imgSrc).to.equal(src)
+      expect(divImg).to.equal(src)
+    })
+  })
+})