vue-img-viewr - npm Package Compare versions

Comparing version 1.0.3 to 2.0.0

CHANGELOG.md

 # 更新日志
 
-#### 1.0.0 (2020-6-11)
+#### 2.0.0 (2021-06-16)
 
-* 修复Edge浏览器出现纵向滚动条的bug
+* 升级为vue@3.x版本
+* 基于vite@2.x开发
+* vue@2.x版本请移步 Npm [vue-img-viewr@1.0.3](https://www.npmjs.com/package/vue-img-viewr/v/1.0.3)， Github v1.x地址 [请点击](https://github.com/jekorx/vue-img-viewr/tree/1.x) 
 
-#### 1.0.1 (2020-11-20)
+#### 1.0.3 (2021-01-21)
 
-* 将vue依赖移除打包后的文件，vue依赖改为项目中的vue环境
+* 增加点击蒙层关闭功能，可通过closeOnClickMask（默认：true）进行控制是否启用该功能
+* zIndex由默认2000调整为3000
+* 更换关闭按钮图标
 
@@ -15,6 +19,8 @@ #### 1.0.2 (2020-12-03)
 
-#### 1.0.3 (2021-01-21)
+#### 1.0.1 (2020-11-20)
 
-* 增加点击蒙层关闭功能，可通过closeOnClickMask（默认：true）进行控制是否启用该功能
-* zIndex由默认2000调整为3000
-* 更换关闭按钮图标
+* 将vue依赖移除打包后的文件，vue依赖改为项目中的vue环境
+
+#### 1.0.0 (2020-6-11)
+
+* 修复Edge浏览器出现纵向滚动条的bug

package.json

 {
   "name": "vue-img-viewr",
-  "version": "1.0.3",
-  "description": "vue图片查看组件（vue image viewer component）",
+  "version": "2.0.0",
+  "description": "vue图片查看组件（vue image viewer component），with vue@3.x",
   "author": "jekorx",
-  "main": "lib/vue-img-viewr.js",
+  "files": [
+    "lib",
+    "styles",
+    "types"
+  ],
+  "main": "./lib/vue-img-viewr.umd.js",
+  "module": "./lib/vue-img-viewr.es.js",
+  "exports": {
+    ".": {
+      "import": "./lib/vue-img-viewr.es.js",
+      "require": "./lib/vue-img-viewr.umd.js"
+    }
+  },
+  "typings": "./types/index.d.ts",
   "private": false,
   "scripts": {
-    "dev": "webpack-dev-server --inline --progress --colors --config build/webpack.dev.conf.js",
-    "start": "npm run dev",
-    "build": "webpack --config build/webpack.prod.conf.js",
-    "build:show": "webpack --config build/webpack.show.conf.js"
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && eslint src --ext .ts,.js,.tsx,.jsx,.vue && vite build",
+    "build:show": "vue-tsc --noEmit && eslint src --ext .ts,.js,.tsx,.jsx,.vue && vite build -c vite.config.show.ts",
+    "serve": "vite preview"
   },
-  "dependencies": {
-    "vue": "^2.6.12"
+  "peerDependencies": {
+    "vue": "^3.0.5"
   },
   "devDependencies": {
-    "autoprefixer": "^9.1.0",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.5",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-stage-2": "^6.24.1",
-    "css-loader": "^1.0.0",
-    "html-webpack-plugin": "^3.2.0",
-    "postcss-loader": "^2.1.6",
-    "uglifyjs-webpack-plugin": "^1.3.0",
-    "vue-loader": "^15.2.7",
-    "vue-style-loader": "^4.1.1",
-    "vue-template-compiler": "^2.6.12",
-    "webpack": "^4.16.4",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.5",
-    "webpack-merge": "^4.1.4"
+    "@types/node": "^15.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
+    "@vitejs/plugin-legacy": "^1.3.2",
+    "@vitejs/plugin-vue": "^1.2.2",
+    "@vue/compiler-sfc": "^3.0.5",
+    "eslint": "^7.25.0",
+    "eslint-config-standard": "^16.0.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.3.1",
+    "eslint-plugin-vue": "^7.9.0",
+    "typescript": "^4.1.3",
+    "vite": "^2.2.3",
+    "vue": "^3.0.5",
+    "vue-tsc": "^0.0.24"
   },
   "engines": {
-    "node": ">= 6.0.0",
-    "npm": ">= 3.0.0"
+    "node": ">= 12.0.0",
+    "npm": ">= 6.0.0"
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ],
   "repository": {
@@ -54,2 +62,3 @@ "type": "git",
     "Vue",
+    "Vue3",
     "vue-img-viewr",
@@ -56,0 +65,0 @@ "image",

README.md

@@ -5,4 +5,8 @@ # vue-img-viewr
 
-> vue图片查看组件（vue image viewer component）  
+> ❗ vue图片查看组件（vue image viewer component），```2.x```版本为**vue@3.x**组件  
 
+> ❗ 如需在**vue@2.x**中使用，请使用 [vue-img-viewr@1.0.3](https://www.npmjs.com/package/vue-img-viewr/v/1.0.3)， Github v1.x地址 [请点击](https://github.com/jekorx/vue-img-viewr/tree/1.x)  
+> ```yarn add vue-img-viewr@^1.0.3```
+> ```npm i vue-img-viewr@^1.0.3 -S```  
+
 ### 示例
@@ -30,46 +34,84 @@
 import Vue from 'vue'
-import { showImages } from '../img-viewr'
+import { showImages } from 'vue-img-viewr'
 import 'vue-img-viewr/styles/index.css'
 
-Vue.prototype.$showImages = showImages
+const app = createApp(App)
+app.config.globalProperties.$showImages = showImages
+app.mount('#app')
 
 /** 使用 **/
-this.$showImages({
-  urls: this.urls,
-  index
-})
+const appContext = getCurrentInstance()?.appContext as AppContext
+const showImagesByJs: (i: number) => void = i => {
+  appContext.config.globalProperties.$showImages({
+    urls: images,
+    index: i,
+    onSwitch: (i: number) => void = i => {
+      console.log(`current image index: ${i}`)
+    },
+    onClose: () => {
+      console.log('closed')
+    }
+  })
+}
 
+/** 
+ * 注册全局组件
+ */
+import ImgViewr from 'vue-img-viewr'
+import 'vue-img-viewr/styles/index.css'
+
+const app = createApp(App)
+app.component('ImgViewr', ImgViewr)
+app.mount('#app')
+
 /**
  * 二、按需引入使用
  */
+// lang="ts"
+import { ref } from 'vue'
 import ImgViewr, { showImages } from 'vue-img-viewr'
 import 'vue-img-viewr/styles/index.css'
 
+const images = [
+  'https://s.gravatar.com/avatar/221f86a573320174bad7a62886a6d4b4?size=100&default=retro',
+  'https://s.gravatar.com/avatar/221f86a573320174bad7a62886a6d4b4',
+  'https://static.npmjs.com/attachments/ck3uwf5d872zb8874c3ayi1pj-icon-pro-wombat-3x.png'
+]
 export default {
-  // 注册组件
+  name: 'App',
   components: { ImgViewr },
-  data () {
-    return {
-      urls: [
-        'https://s.gravatar.com/avatar/221f86a573320174bad7a62886a6d4b4?size=100&default=retro',
-        'https://s.gravatar.com/avatar/221f86a573320174bad7a62886a6d4b4',
-        'https://static.npmjs.com/attachments/ck3uwf5d872zb8874c3ayi1pj-icon-pro-wombat-3x.png'
-      ],
-      index: 0,
-      visible: false
+  setup () {
+    const urls = ref(images)
+    const index = ref(0)
+    const visible = ref(false)
+    const showImagesByComponent: (i: number) => void = i => {
+      visible.value = true
+      index.value = i
     }
-  },
-  methods: {
-    // 通过组件方式
-    showImagesByComponent (index) {
-      this.visible = true
-      this.index = index
-    },
-    showImagesByJs (index) {
-      // 通过js方式显示
+    const showImagesByJs: (i: number) => void = i => {
       showImages({
-        urls: this.urls,
-        index
+        urls: images,
+        index: i,
+        onSwitch: changeHandle,
+        onClose: () => {
+          console.log('closed js')
+        }
       })
     }
+    const changeHandle: (i: number) => void = i => {
+      console.log(`current image index: ${i}`)
+    }
+    const closeHandle = () => {
+      console.log('closed component')
+      visible.value = false
+    }
+    return {
+      urls,
+      index,
+      visible,
+      showImagesByComponent,
+      showImagesByJs,
+      closeHandle,
+      changeHandle
+    }
   }
@@ -82,52 +124,4 @@ }
 ```javascript
-/**
- * 引用
- */
-// @/plugins/vue-img-viewr.js
-import Vue from 'vue'
-import ImgViewr, { showImages } from 'vue-img-viewr'
-import 'vue-img-viewr/styles/index.css'
-
-export default () => {
-  // 全局方法
-  Vue.prototype.$showImages = showImages
-  // 注册组件
-  Vue.component(ImgViewr.name, ImgViewr)
-}
-
-// nuxt.config.js
-plugins: [
-  { src: '@/plugins/vue-img-viewr', ssr: false }
-]
-
-/**
- * 使用
- */
-export default {
-  data () {
-    return {
-      urls: [
-        'https://s.gravatar.com/avatar/221f86a573320174bad7a62886a6d4b4?size=100&default=retro',
-        'https://s.gravatar.com/avatar/221f86a573320174bad7a62886a6d4b4',
-        'https://static.npmjs.com/attachments/ck3uwf5d872zb8874c3ayi1pj-icon-pro-wombat-3x.png'
-      ],
-      index: 0,
-      visible: false
-    }
-  },
-  methods: {
-    // 通过组件方式
-    showImagesByComponent (index) {
-      this.visible = true
-      this.index = index
-    },
-    showImagesByJs (index) {
-      // 通过js方式显示
-      this.$showImages({
-        urls: this.urls,
-        index
-      })
-    }
-  }
-}
+// TODO
+// 后期测试后再进行补充
 ```
@@ -146,6 +140,6 @@
   </div>
-  <ImgViewr :visible="visible" :urls="urls" :initialIndex="index" :onClose="() => (visible = false)" />
+  <ImgViewr :visible="visible" :urls="urls" :initial-index="index" @close="closeHandle" @switch="changeHandle" />
   <h3>通过js方法调用</h3>
   <div class="imgs">
-    <div v-for="(url, i) in urls" class="img" :key="`j_${i}`" @click="() => showImagesByJs(i)">
+    <div v-for="(url, i) in urls" class="img" :key="i" @click="() => showImagesByJs(i)">
       <img :src="url" />
@@ -186,9 +180,19 @@ </div>
 | :--------------- | :----------------------------------------- | :------------- | :------------- | :----- |
-| urls             | 需要展示的图片url数组（必须参数）           | array&#60;string&#62; | —       | —      |
+| urls             | 需要展示的图片url数组（必须参数）           | array&#60;string&#62; | —       | []      |
 | visible          | 是否显示组件（仅限于通过组件方式参数）      | boolean         | true / false  | —      |
 | initialIndex     | 初始显示的图片索引（仅限于通过组件方式参数）| number          | —             | 0      |
 | index            | 显示的图片索引（仅限于通过js方法调用参数）  | number          | —             | 0      |
-| onSwitch         | 图片切换函数 Function (index)              | function        | —             | —      |
-| onClose          | 关闭函数（通过js方法调用，返回true才会关闭；组件方式可以直接设置visible为false） | function | — | — |
-| zIndex           | 层级                                      | number          | —             | 3000    |
-| closeOnClickMask | 点击蒙层关闭                              | boolean         | true / false   | true    |
+| onSwitch         | 图片切换回调函数 Function (index)          | function        | —             | —      |
+| onClose          | 关闭回调函数                               | function        | —             | —      |
+| zIndex           | 层级                                       | number          | —             | 3000    |
+| lockScroll       | 是否在查看图片时将 body 滚动锁定            | boolean         | true / false   | true    |
+| closeOnClickMask | 点击蒙层关闭                               | boolean         | true / false   | true    |
+
+##### Events
+
+> 仅用于组件方式  
+
+| 参数   | 说明                                    | 参数  |
+| :----- | :-------------------------------------- | :--- |
+| close  | 关闭事件，将 visible 设为 false 关闭窗口 | -    |
+| switch | 图片切换事件                            | index |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50097

increased by20.78%

Number of package files

8

increased by33.33%

Lines of code

339

increased by32.42%

Number of lines in readme file

194

increased by2.11%

Dependency changes

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@vue/compiler-core@3.5.13(transitive)

• + Added@vue/compiler-dom@3.5.13(transitive)

• + Added@vue/compiler-sfc@3.5.13(transitive)

• + Added@vue/compiler-ssr@3.5.13(transitive)

• + Added@vue/reactivity@3.5.13(transitive)

• + Added@vue/runtime-core@3.5.13(transitive)

• + Added@vue/runtime-dom@3.5.13(transitive)

• + Added@vue/server-renderer@3.5.13(transitive)

• + Added@vue/shared@3.5.13(transitive)

• + Addedentities@4.5.0(transitive)

• + Addedestree-walker@2.0.2(transitive)

• + Addedmagic-string@0.30.13(transitive)

• + Addedvue@3.5.13(transitive)

• - Removedvue@^2.6.12

• - Removed@vue/compiler-sfc@2.7.16(transitive)

• - Removedprettier@2.8.8(transitive)

• - Removedsource-map@0.6.1(transitive)

• - Removedvue@2.7.16(transitive)