Merge branch 'dev'

docs/with-v-img-preview.md

@@ -0,0 +1,26 @@
+与 v-img-preview 指令组合使用
+
+v-img 内部提供了一个未经过裁剪的 url 属性(data-uncropped-src), 因此可以向 v-img-preview 指令传递这个参数
+
+由于 v-img 内部不提供 @femessage/img-preview 组件, 因此需要安装并且通过 Vue.use(ImgPreview), 才能使用这个指令
+
+```vue
+<template>
+  <v-img
+    v-img-preview:data-uncropped-src
+    :src="src"
+    height="100"
+    width="100"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      src: 'https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg'
+    }
+  }
+}
+</script>
+```

package.json

@@ -43,6 +43,7 @@
     "@babel/plugin-transform-runtime": "^7.4.3",
     "@babel/preset-env": "^7.4.3",
     "@femessage/github-release-notes": "^0.19.0",
+    "@femessage/img-preview": "^1.4.0",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.5",
     "eslint": "^6.8.0",

src/background.js

@@ -24,7 +24,7 @@ function getSrc(config) {
     extraQuery,
     width,
     height
-  })
+  }).$src
 }
 
 export default {

src/provider-config.js

@@ -72,6 +72,7 @@ export const providerConfig = {
       const resizeQuery = actions.join(',')
 
       vm.$src = resizeQuery + $src
+      vm.$config.resizeQuery = resizeQuery
 
       return vm
     },
@@ -141,11 +142,13 @@ export const providerConfig = {
 
 export default vm => {
   vm.$src = ''
+  vm.$config = {}
   const providerPipe = providerConfig[vm.provider]
   const output = pipe([
     providerPipe[srcProcess.CONVERT_WEBP],
     providerPipe[srcProcess.CROP_IMAGE],
     providerPipe[srcProcess.APPEND_QUERY]
   ])(vm)
-  return output.$src
+  vm.$uncroppedSrc = vm.$src.replace(vm.$config.resizeQuery, '')
+  return output
 }

src/v-img.vue

@@ -5,7 +5,8 @@
     :style="style"
     :height="height"
     :width="width"
-    :data-src="imageSrc"
+    :data-src="imageSrc.$src"
+    :data-uncropped-src="imageSrc.$uncroppedSrc"
     :src="transparentImg"
     v-bind="$attrs"
     referrerpolicy="no-referrer"
@@ -198,10 +199,10 @@ export default {
       localStorage.setItem('isSupportWebp', this.isSupportWebp)
     },
     forceUpdateSrc() {
-      this.$el.setAttribute('src', this.imageSrc)
+      this.$el.setAttribute('src', this.imageSrc.$src)
     },
     onLoad() {
-      if (this.$el.getAttribute('src') === this.imageSrc)
+      if (this.$el.getAttribute('src') === this.imageSrc.$src)
         this.status = STATUS_LOADED
     },
     onError() {

styleguide/register.js

@@ -1,4 +1,6 @@
 import Vue from 'vue'
+import ImgPreview from '@femessage/img-preview'
 import VImg from '../src'
 
+Vue.use(ImgPreview)
 Vue.use(VImg)

test/provider-config.test.js

@@ -1,4 +1,7 @@
-import getSrc from '../src/provider-config'
+import _getSrc from '../src/provider-config'
+
+const getSrc = val => _getSrc(val).$src
+const getUncroppedSrc = val => _getSrc(val).$uncroppedSrc
 
 describe('alibaba', () => {
   const src = 'http://image-demo.oss-cn-hangzhou.aliyuncs.com/panda.png'
@@ -100,6 +103,19 @@ describe('alibaba', () => {
       })
     ).toBe(`${src}?x-oss-process=image/format,webp/quality,Q_75`)
   })
+
+  test('获取不经过裁剪的 url', () => {
+    expect(
+      getUncroppedSrc({
+        provider: 'alibaba',
+        src,
+        isSupportWebp: true,
+        autocrop: true,
+        height: 100,
+        width: 100
+      })
+    ).toBe(`${src}?x-oss-process=image/format,webp/quality,Q_75`)
+  })
 })
 
 describe('qiniu', () => {

yarn.lock

@@ -782,6 +782,11 @@
     require-yaml "0.0.1"
     valid-url "^1.0.9"
 
+"@femessage/img-preview@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/@femessage/img-preview/-/img-preview-1.4.0.tgz#0a9e6ac99e17f99c3b4012791f1f742082deb591"
+  integrity sha512-Zb22L13I82PClPf0aMKALgU7P5QT8OahyfPgHWVxJlWkBVHtCFkaZoAznb6/2E/prybx/mTBYswgYQ6UdzfBug==
+
 "@jest/console@^24.7.1":
   version "24.7.1"
   resolved "https://registry.npm.taobao.org/@jest/console/download/@jest/console-24.7.1.tgz#32a9e42535a97aedfe037e725bd67e954b459545"