From f82c3e46f1adf9ced66359324137bf1e8c7d342d Mon Sep 17 00:00:00 2001 From: GuoJikun Date: Sat, 7 Oct 2023 15:30:36 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=9B=B4=E6=94=B9export=20?= =?UTF-8?q?=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 82 ++++++++++++++++----------- package.json | 2 +- src/App.vue | 2 +- src/components/preview-image/index.ts | 6 +- vite.config.lib.ts | 9 ++- 5 files changed, 56 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index 07806d2..4853fc1 100644 --- a/README.md +++ b/README.md @@ -9,31 +9,31 @@ Vue 图片预览组件 ## 安装 -``` +```bash npm i fox-preview-image # or yarn add fox-preview-image +# or +pnpm add fox-preview-image ``` ## 引入组件 -``` -import foxPreviewImage from "fox-preview-image"; -import "fox-preview-image/lib/style.css"; +```js +import foxPreviewImage from 'fox-preview-image' +import 'fox-preview-image/lib/style.css' Vue.use(foxPreviewImage) ``` ## 基础使用 -``` +```html ``` ## 演示地址 -[GITHUB](https://guojikun.github.io/preview-image/) - -[码云](https://guojikun_admin.gitee.io/preview-image/) +[文档以及 demo 地址](https://blog.jikun.dev/docs/preview-image.html) ## API @@ -41,73 +41,87 @@ Vue.use(foxPreviewImage) | ---------------- | :--------------------------- | :----------- | :----- | | src | 预览图片的地址 | String/Array | - | | visiable/v-model | 是否显示预览窗口 | Boolean | false | -| initial-index | 默认显示图片的下标 | Number | 0 | +| initial-index | 默认显示图片的下标 | Number | 0 | | z-index | 预览窗口的层级-css 的 zIndex | Number | 9000 | ## 更新日志 +### v2.8.0 + +feat： + +- 更改打包后文件的格式,es 格式文件后缀改为 `.mjs` + ### v2.6.0 feat: - 增加下载功能 -- 统一icon +- 统一 icon ### v2.4.1 -* fix: - - 修复css导入错误 +fix: + +- 修复 css 导入错误 ### v2.4.0 -* feat: - - 增加默认显示第几张图片的功能 +feat: + +- 增加默认显示第几张图片的功能 ### v2.3.0 -* feat: - - 增加显示当前图片下标的功能(仅在多图下显示) +feat: + +- 增加显示当前图片下标的功能(仅在多图下显示) ### v2.0.0 -* feat: - - 增加 vue3 支持（安装：npm i fox-preview-image@next） +feat: + +- 增加 vue3 支持（安装：npm i fox-preview-image@next） ### v1.1.3 -* refactor: +refactor: - - 删除冗余代码 +- 删除冗余代码 ### v1.1.2 -* fix： +fix： - - 修复火狐浏览器拖拽失效的问题 +- 修复火狐浏览器拖拽失效的问题 ### v1.1.1 -* feat： - - 支持鼠标滚轮放大缩小 +feat： + +- 支持鼠标滚轮放大缩小 ### v1.1.0 -* feat： - - 增加缩放倍数显示 +- feat： + - 增加缩放倍数显示 ### v1.0.2 -* fix: - - 修复当预览的图片为 1 张时扔显示左右切换按钮的问题 +fix: + +- 修复当预览的图片为 1 张时扔显示左右切换按钮的问题 ### v1.0.1 -* fix: - - 修复拖拽时图片未完全跟随鼠标的 bug +fix: + +- 修复拖拽时图片未完全跟随鼠标的 bug ### v1.0.0 -* feat: - - 旋转 - - 放大，缩小（0.5-2） - - 多张图片可以传数组 eg：['http://xxxx.com/a.png','http://xxxx.com/b.png'] +feat: + +- 旋转 +- 放大，缩小（0.5-2） +- 多张图片可以传数组 eg：['http://xxxx.com/a.png','http://xxxx.com/b.png'] diff --git a/package.json b/package.json index 478c0f8..ea1aeff 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "fox-preview-image", "description": "一个支持vue2和vue3的预览图片组件", - "version": "2.8.0", + "version": "2.8.1", "main": "lib/preview-image.js", "module": "lib/preview-image.mjs", "browser": "lib/preview-image.js", diff --git a/src/App.vue b/src/App.vue index 595cef4..c241ef0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,7 +2,7 @@ import { ref } from 'vue' import a from './assets/a.jpg' import b from './assets/logo.png' -import { FoxPreviewImage } from './components/preview-image/index' +import FoxPreviewImage from './components/preview-image/index' const visible = ref(false) const visible1 = ref(false) diff --git a/src/components/preview-image/index.ts b/src/components/preview-image/index.ts index 89fe977..8252469 100644 --- a/src/components/preview-image/index.ts +++ b/src/components/preview-image/index.ts @@ -1,10 +1,8 @@ import PreviewImage from './src/index.vue' import type { App } from 'vue' -const install = (app: App) => { +PreviewImage.install = (app: App) => { app.component(PreviewImage.name, PreviewImage) } -export default install - -export const FoxPreviewImage = PreviewImage +export default PreviewImage diff --git a/vite.config.lib.ts b/vite.config.lib.ts index 6ef12af..1cf8478 100644 --- a/vite.config.lib.ts +++ b/vite.config.lib.ts @@ -31,12 +31,11 @@ export default defineConfig({ fileName: (format) => { if (format === 'es') { return 'preview-image.mjs' - } else { - return `preview-image.js` } - }, - formats: ['umd', 'es'] + return `preview-image.js` + } }, - cssCodeSplit: false + cssCodeSplit: false, + minify: 'terser' } })