@aochuang/common 1.0.136 → 1.0.138

package/components/icon/icon.vue

@@ -9,11 +9,11 @@ export default {
     name: {
       type: String,
       required: true
-    },
+    }, 
     size: {
       type: Number
     },
-    color: { 
+    color: {  
       type: String
     }
   },

package/components/image/image.vue

@@ -15,13 +15,15 @@
         @error="handleImageError"
         :style="imageStyle"
       />
-      <ui-icon
-        v-if="status === 'error'"
-        name="image-error-line"
-        class="ui-image__error"
-        :size="iconSize"
-        color="#aaa"
-      ></ui-icon>
+      <div v-if="status === 'error'" class="ui-image__error" :class="{'has-slot': $slots.error}">
+        <slot name="error">
+          <ui-icon
+            name="image-error-line"
+            :size="iconSize"
+            color="#aaa"
+          ></ui-icon>
+        </slot>
+      </div>
       <div class="ui-image__preview" v-if="previewable && status === 'success'" @click="handlePreviewClick">
         <ui-icon name="sousuo" :size="30" color="#fff"></ui-icon>
       </div>
@@ -215,7 +217,7 @@ export default {
       if (!this.source) {
         return
       }
-      const clickFn = getImageClickFn()
+      const clickFn = getImageClickFn() 
       if (clickFn) {
         clickFn({
           alt: this.alt,
@@ -318,7 +320,7 @@ export default {
     img {
       display: none!important;
     }
-    .ui-image__error{
+    .ui-image__error:not(.has-slot){
       position: absolute;
       left: 50%;
       top: 50%;

package/components/image/index.js

@@ -1,5 +1,9 @@
 import Image from './image'
-import { setImageClickFn, getThumbnailSrc as _getThumbnailSrc, removeThumbnailSrc as _removeThumbnailSrc } from './util'
+import {
+  setImageClickFn,
+  getThumbnailSrc as _getThumbnailSrc,
+  removeThumbnailSrc as _removeThumbnailSrc
+} from './util'
 
 Image.install = (Vue, options) => {
   options = Object.assign({

package/components/image/util.js

@@ -106,6 +106,39 @@ export function getThumbnailSrc (url, width) {
   }
 }
 
+function decodeUrlParam (value) {
+  try {
+    return decodeURIComponent(value.replace(/\+/g, ' '))
+  } catch (e) {
+    return value
+  }
+}
+
+function removeThumbnailQuery (url) {
+  const hashIndex = url.indexOf('#')
+  const hash = hashIndex > -1 ? url.substr(hashIndex) : ''
+  const urlWithoutHash = hashIndex > -1 ? url.substr(0, hashIndex) : url
+  const queryIndex = urlWithoutHash.indexOf('?')
+
+  if (queryIndex < 0) {
+    return url
+  }
+
+  const baseUrl = urlWithoutHash.substr(0, queryIndex)
+  const query = urlWithoutHash.substr(queryIndex + 1)
+  const nextQuery = query.split('&').filter(param => {
+    const equalIndex = param.indexOf('=')
+    const key = decodeUrlParam(equalIndex > -1 ? param.substr(0, equalIndex) : param)
+    const value = decodeUrlParam(equalIndex > -1 ? param.substr(equalIndex + 1) : '')
+    const isAliyunThumbnail = key === 'x-oss-process' && /^image\/resize,w_[^/]+$/.test(value)
+    const isTencentThumbnail = /^imageMogr2\/thumbnail\/[^/]+$/.test(key) && !value
+
+    return !isAliyunThumbnail && !isTencentThumbnail
+  }).join('&')
+
+  return baseUrl + (nextQuery ? '?' + nextQuery : '') + hash
+}
+
 /**
  * 移除图片缩略图裁剪参数，保留其他查询参数及 hash
  */
@@ -115,27 +148,29 @@ export function removeThumbnailSrc (url) {
   }
 
   const hashIndex = url.indexOf('#')
-  const hash = hashIndex >= 0 ? url.substr(hashIndex) : ''
-  let source = hashIndex >= 0 ? url.substr(0, hashIndex) : url
-
-  // /oss/view 和 /oss/ 地址的真实图片在 url 参数中，递归处理后再重新编码
-  if (source.indexOf('/oss/view') > -1 || source.indexOf('/oss/') > -1) {
-    const marker = source.indexOf('/oss/view') > -1 ? '/oss/view' : '/oss/'
-    const markerIndex = source.indexOf(marker)
-    const prefix = source.substr(0, markerIndex + marker.length)
-    const params = getUrlParams(source)
-    if (params.url) {
-      params.url = removeThumbnailSrc(params.url)
-      source = buildUrl(prefix, params)
-      return source + hash
-    }
+  const hash = hashIndex > -1 ? url.substr(hashIndex) : ''
+  const urlWithoutHash = hashIndex > -1 ? url.substr(0, hashIndex) : url
+  let proxyPath = ''
+
+  if (urlWithoutHash.indexOf('/oss/view') > -1) {
+    proxyPath = '/oss/view'
+  } else if (urlWithoutHash.indexOf('/oss/') > -1) {
+    proxyPath = '/oss/'
+  }
+
+  if (!proxyPath) {
+    return removeThumbnailQuery(url)
+  }
+
+  const urlParams = getUrlParams(urlWithoutHash)
+  if (!urlParams.url) {
+    return url
   }
 
-  // 阿里云参数是普通 query 参数；腾讯云参数是无等号的 query path
-  source = source
-    .replace(/([?&])x-oss-process=image\/resize(?:,[^&#]*)?(?=&|$)/ig, '$1')
-    .replace(/([?&])imageMogr2\/thumbnail\/[^&#]*(?=&|$)/ig, '$1')
-    .replace('?&', '?')
-    .replace(/[?&]$/, '')
-  return source + hash
+  return buildUrl(
+    urlWithoutHash.substr(0, urlWithoutHash.indexOf(proxyPath) + proxyPath.length),
+    Object.assign({}, urlParams, {
+      url: removeThumbnailSrc(urlParams.url)
+    })
+  ) + hash
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aochuang/common",
-  "version": "1.0.136",
+  "version": "1.0.138",
   "description": "",
   "main": "index.js",
   "publishConfig": {