From 5417ae76f7bc7f6c4e69e4ff71b6399c1e7dba05 Mon Sep 17 00:00:00 2001 From: banrikun Date: Wed, 20 Mar 2024 14:00:35 +0800 Subject: [PATCH 1/2] feat: rename properties --- README.md | 4 ++-- lib/class.ts | 36 ++++++++++++++++++------------------ lib/composer.ts | 18 +++++++++--------- lib/directive.ts | 18 +++++++++--------- lib/index.ts | 6 ++++-- tests/class.test.ts | 8 ++++---- 6 files changed, 46 insertions(+), 44 deletions(-) diff --git a/README.md b/README.md index bb4721d..e490133 100644 --- a/README.md +++ b/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) ``` diff --git a/lib/class.ts b/lib/class.ts index 2e6fe91..19368c0 100644 --- a/lib/class.ts +++ b/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) } } diff --git a/lib/composer.ts b/lib/composer.ts index 4f01ff7..797f170 100644 --- a/lib/composer.ts +++ b/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 diff --git a/lib/directive.ts b/lib/directive.ts index f48af56..1c903aa 100644 --- a/lib/directive.ts +++ b/lib/directive.ts @@ -6,28 +6,28 @@ type TVueImg = InstanceType 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) } }, diff --git a/lib/index.ts b/lib/index.ts index 6a2ef69..8644966 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -21,6 +21,8 @@ export default { create: createOssImage, createHooks, compose, - copyKeys, - setImageUrl + utils: { + copyKeys, + setImageUrl + } } diff --git a/tests/class.test.ts b/tests/class.test.ts index a2d701c..41a65ed 100644 --- a/tests/class.test.ts +++ b/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') }) From 110321c92034203375fc764393c5e6c4ff488180 Mon Sep 17 00:00:00 2001 From: banrikun Date: Wed, 20 Mar 2024 14:01:42 +0800 Subject: [PATCH 2/2] feat: update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5ad7720..a370278 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-oss-image", - "version": "1.2.0", + "version": "1.2.1", "license": "MIT", "type": "module", "scripts": {