Merge pull request #1 from banrikun/dev

Release v1.2.1

README.md

@@ -36,7 +36,7 @@ app.mount('#app')
 ## Options
 | Name | Global | Directive | `.compose` | Description |
 |-|:-:|:-:|:-:|-|
-| quality | ✅ | ✅ | ✅ | [Number] Quality, supports integers from `0` to `100` |
+| quality | ✅ | ✅ | ✅ | [Number] Quality, supports integers from `1` to `100` |
 | format | ✅ | ✅ | ✅ | [String] Format conversion, supports `webp` `jpg` `png` `bmp` `gif` `tiff` |
 | resizeMode | ✅ | ✅ | ✅ | [String] Resize mode, supports `fill` `lfit` `mfit` `pad` `fixed`, default is `fill` |
 | ratio | ✅ | ✅ | ✅ | [Number] Resize ratio, default is `window.devicePixelRatio` |
@@ -59,7 +59,7 @@ app.mount('#app')
 const myOssImage = VueOssImage.create({
   // global options
 })
-myOssImage.prototype.compose = () => {}
+myOssImage.prototype.$compose = () => {}
 // Using myOssImage instead of the global options object
 app.use(VueOssImage, myOssImage)
 ```

lib/class.ts

@@ -39,11 +39,20 @@ export class OssImageGlobal {
     })
   }
 
-  compose(params: TComposerParams) {
+  $compose(params: TComposerParams) {
     return ossUrlComposer(params)
   }
 
-  getUrl(path: TComposerParams['path']) {
+  $setUrl(el: HTMLElement, url: string) {
+    if (!el) return
+    if (this.attr && typeof this.attr === 'string') {
+      el.setAttribute(this.attr, url)
+    } else {
+      setImageUrl(el, url)
+    }
+  }
+
+  $getUrl(path: TComposerParams['path']) {
     if (!path) return ''
     const params: TComposerParams = {}
     copyKeys({
@@ -64,28 +73,19 @@ export class OssImageGlobal {
       ]
     })
     params.path = path
-    return this.compose(params)
+    return this.$compose(params)
   }
 
-  get url() {
-    return this.getUrl(this.path)
+  get $url() {
+    return this.$getUrl(this.path)
   }
 
-  get loadingUrl() {
-    return this.getUrl(this.loading)
+  get $loadingUrl() {
+    return this.$getUrl(this.loading)
   }
 
-  get errorUrl() {
-    return this.getUrl(this.error)
-  }
-
-  setUrl(el: HTMLElement, url: string) {
-    if (!el) return
-    if (this.attr && typeof this.attr === 'string') {
-      el.setAttribute(this.attr, url)
-    } else {
-      setImageUrl(el, url)
-    }
+  get $errorUrl() {
+    return this.$getUrl(this.error)
   }
 }
 

lib/composer.ts

@@ -1,13 +1,5 @@
 import { deviceRatio } from './utils'
 
-export const resolveUrl = (host?: string, path?: string) => {
-  const _host = (host || '').replace(/\/$/, '')
-  const _path = (path || '').replace(/^\.*\//, '')
-  return /^https?:\/\//.test(_path)
-    ? _path
-    : `${_host}/${_path}`
-}
-
 type TSizeParams = {
   resizeMode?: 'lfit' | 'mfit' | 'fill' | 'pad' | 'fixed' // default: fill
   ratio?: number
@@ -50,13 +42,21 @@ const getFormatQueryString = (format?: TFormat) => {
     : ''
 }
 
+export const resolveUrl = (host?: string, path?: string) => {
+  const _host = (host || '').replace(/\/$/, '')
+  const _path = (path || '').replace(/^\.*\//, '')
+  return /^https?:\/\//.test(_path)
+    ? _path
+    : `${_host}/${_path}`
+}
+const isDataImage = (path: string) => /^data:image/.test(path)
+
 export type TComposerParams = TSizeParams & {
   host?: string
   path?: string
   quality?: TQuality
   format?: TFormat
 }
-const isDataImage = (path: string) => /^data:image/.test(path)
 const compose = (params: TComposerParams) => {
   if (!params.path) return ''
   if (isDataImage(params.path)) return params.path

lib/directive.ts

@@ -6,28 +6,28 @@ type TVueImg = InstanceType<TOssImage>
 
 const createHooks = (ossImage: TOssImage) => {
   const preload = (el: HTMLElement, vImg: TVueImg) => {
-    if (!vImg.url) return
+    if (!vImg.$url) return
 
     const virtualImg = new Image()
     virtualImg.onload = () => {
-      vImg.setUrl(el, vImg.url)
+      vImg.$setUrl(el, vImg.$url)
     }
-    if (vImg.errorUrl) {
+    if (vImg.$errorUrl) {
       virtualImg.onerror = () => {
-        vImg.setUrl(el, vImg.errorUrl)
+        vImg.$setUrl(el, vImg.$errorUrl)
       }
     }
-    virtualImg.src = vImg.url
+    virtualImg.src = vImg.$url
   }
 
   return {
     created(el: HTMLElement, binding: DirectiveBinding) {
       const vImg = new ossImage(binding.value)
-      if (vImg.loadingUrl || vImg.errorUrl) {
-        vImg.loadingUrl && vImg.setUrl(el, vImg.loadingUrl)
+      if (vImg.$loadingUrl || vImg.$errorUrl) {
+        vImg.$loadingUrl && vImg.$setUrl(el, vImg.$loadingUrl)
         preload(el, vImg)
-      } else if (vImg.url) {
-        vImg.setUrl(el, vImg.url)
+      } else if (vImg.$url) {
+        vImg.$setUrl(el, vImg.$url)
       }
     },
 

lib/index.ts

@@ -21,6 +21,8 @@ export default {
   create: createOssImage,
   createHooks,
   compose,
-  copyKeys,
-  setImageUrl
+  utils: {
+    copyKeys,
+    setImageUrl
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-oss-image",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "MIT",
   "type": "module",
   "scripts": {

tests/class.test.ts

@@ -13,13 +13,13 @@ test('ossImage Class', () => {
   const ossImageInstance1 = new ossImage({
     path: ''
   })
-  expect(ossImageInstance1.url).toBe('')
+  expect(ossImageInstance1.$url).toBe('')
 
 
   const ossImageInstance2 = new ossImage({
     path: 'path/to/image.jpg'
   })
-  expect(ossImageInstance2.url).toBe('https://www.example.com/path/to/image.jpg?x-oss-process=image/quality,q_80/format,webp')
+  expect(ossImageInstance2.$url).toBe('https://www.example.com/path/to/image.jpg?x-oss-process=image/quality,q_80/format,webp')
 
   const ossImageInstance3 = new ossImage({
     path: 'path/to/image.jpg',
@@ -28,7 +28,7 @@ test('ossImage Class', () => {
     height: 50,
     ratio: 2
   })
-  expect(ossImageInstance3.url).toBe('https://www.example.com/path/to/image.jpg?x-oss-process=image/resize,m_fill,w_200,h_100/quality,q_80/format,webp')
+  expect(ossImageInstance3.$url).toBe('https://www.example.com/path/to/image.jpg?x-oss-process=image/resize,m_fill,w_200,h_100/quality,q_80/format,webp')
 
   const ossImageInstance4 = new ossImage({
     path: 'path/to/image.jpg',
@@ -39,5 +39,5 @@ test('ossImage Class', () => {
     quality: 100,
     format: undefined
   })
-  expect(ossImageInstance4.url).toBe('https://www.example.com/path/to/image.jpg?x-oss-process=image/resize,m_fill,w_200,h_100')
+  expect(ossImageInstance4.$url).toBe('https://www.example.com/path/to/image.jpg?x-oss-process=image/resize,m_fill,w_200,h_100')
 })