Merge pull request #6 from jiananshi/url-formatter

feat($url): add url formatter method

Author: banrikun

README.md

@@ -66,11 +66,13 @@ VueImg.getSrc({ ... }) // [Function] 获取图片地址
 | adapt    | [Boolean] 图片尺寸是否适配设备屏幕    |  〇   |  〇   |     〇     |
 | delay    | [Number] 设置延迟加载最大等待时长（ms） |  〇   |  ✕   |     ✕     |
 | defer     | [Boolean] 图片是否进行延迟加载      |  ✕   |  〇   |     ✕     |
+| urlFormatter | [Function] 修改 v-img 生成的 url |  ✕   |  〇   |     〇    |
 
 - `suffix` 参数可用于模糊、旋转等特殊处理，具体请参考[《七牛 CDN 开发者文档》](http://developer.qiniu.com/code/v6/api/kodo-api/image/imagemogr2.html)。
 - `adapt`图片尺寸是否适配设备屏幕大小，指令参数会覆盖全局配置，例如：当全局配置`adapt: true`时，指令参数`adpat: false`，那么该图片不会根据设备viewport调整尺寸。
 - `defer`延迟加载的含义，当`defer: false`时，图片在`v-img`指令的`bind`钩子函数中加载，当`defer: true`时，又分两种情况，图片在首屏和不在首屏中。在首屏中的图片会在`v-img`指令的`inserted`钩子函数中加载，非首屏的图片将等待`defer: false`和首屏中图片都加载完全后才加载。
-- `delay`延迟加载最大等待时长，默认值**5000ms**。
+- `delay`延迟加载最大等待时长，默认值**5000ms**。/
+- `urlFormatter` 可以不依赖组件更新让 src 属性适配 CDN 源更新或者添加自定义参数，举例：七牛云的 imageMogr1 => imageMogr2。
 
 ## 贡献代码
 

build/test/core.test.js

@@ -61,4 +61,11 @@ describe('检测核心函数 getSrc', () => {
     expect(VueImg.getSrc(config))
       .to.include('format/png')
   })
+
+  it('{ urlFormatter }', () => {
+    const _config = Object.assign({}, config)
+    _config.urlFormatter = url => url.replace(/\b(imageMogr)\b/, $1 => `${$1}2`)
+    expect(VueImg.getSrc(_config))
+      .to.include('imageMogr2/')
+  })
 })

dist/vue-img.es6.js

@@ -101,6 +101,7 @@ const getSrc = ({
   width, height, quality,
   format, fallback,
   prefix, suffix,
+  urlFormatter,
 } = {}) => {
   if (!hash || typeof hash !== 'string') return ''
 
@@ -110,8 +111,9 @@ const getSrc = ({
   const _size = getSize({ width, height, adapt });
   const _suffix = typeof suffix === 'string' ? suffix : '';
   const params = `${_quality}${_format}${_size}${_suffix}`;
-
-  return _prefix + hashToPath(hash) + (params ? `?imageMogr/${params}` : '')
+  let src = _prefix + hashToPath(hash) + (params ? `?imageMogr/${params}` : '');
+  if (typeof urlFormatter === 'function') src = urlFormatter(src);
+  return src
 };
 
 var getImageClass = (opt = {}) => {

dist/vue-img.js

@@ -124,6 +124,7 @@ var getSrc = function (ref) {
   var fallback = ref.fallback;
   var prefix = ref.prefix;
   var suffix = ref.suffix;
+  var urlFormatter = ref.urlFormatter;
 
   if (!hash || typeof hash !== 'string') { return '' }
 
@@ -133,8 +134,9 @@ var getSrc = function (ref) {
   var _size = getSize({ width: width, height: height, adapt: adapt });
   var _suffix = typeof suffix === 'string' ? suffix : '';
   var params = "" + _quality + _format + _size + _suffix;
-
-  return _prefix + hashToPath(hash) + (params ? ("?imageMogr/" + params) : '')
+  var src = _prefix + hashToPath(hash) + (params ? ("?imageMogr/" + params) : '');
+  if (typeof urlFormatter === 'function') { src = urlFormatter(src); }
+  return src
 };
 
 var getImageClass = function (opt) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-img",
-  "version": "2.8.2",
+  "version": "2.9.0",
   "description": "hash2path wrapper for vue 2",
   "main": "dist/vue-img.js",
   "scripts": {

src/src.js

@@ -37,6 +37,7 @@ const getSrc = ({
   width, height, quality,
   format, fallback,
   prefix, suffix,
+  urlFormatter,
 } = {}) => {
   if (!hash || typeof hash !== 'string') return ''
 
@@ -46,8 +47,9 @@ const getSrc = ({
   const _size = getSize({ width, height, adapt })
   const _suffix = typeof suffix === 'string' ? suffix : ''
   const params = `${_quality}${_format}${_size}${_suffix}`
-
-  return _prefix + hashToPath(hash) + (params ? `?imageMogr/${params}` : '')
+  let src = _prefix + hashToPath(hash) + (params ? `?imageMogr/${params}` : '')
+  if (typeof urlFormatter === 'function') src = urlFormatter(src)
+  return src
 }
 
 export default getSrc