fix: 修复引入npm包后报错的bug

AnaniZhu · Feb 15, 2020 · 825b3e5 · 825b3e5
1 parent ab13938
commit 825b3e5
Show file tree

Hide file tree

Showing 10 changed files with 5,926 additions and 44 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+dist
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,31 @@
+module.exports = {
+    root: true,
+    parserOptions: {
+      parser: 'babel-eslint',
+      sourceType: 'module',
+    },
+    env: {
+      browser: true,
+      es6: true,
+      jest: true
+    },
+    extends: ['eslint:recommended', 'standard', 'plugin:vue/recommended'],
+    plugins: ['vue'],
+    rules: {
+        "vue/html-closing-bracket-newline": 0,
+        "vue/singleline-html-element-content-newline": 0,
+        "vue/max-attributes-per-line": ["warn", {
+          "singleline": 3,
+          "multiline": {
+            "max": 1,
+            "allowFirstLine": false
+          }
+        }],
+    },
+    globals:{
+      page: true,
+      browser: true,
+      context: true,
+      jestPuppeteer: true
+    }
+  }
diff --git a/.gitignore b/.gitignore
@@ -7,4 +7,5 @@ dist/
 npm-debug.log
 static/uploadfiles
 test/unit/coverage/
-.history/
+.history/
+yarn-error.log
diff --git a/README.md b/README.md
@@ -55,7 +55,7 @@ template
 ```html
   <!-- 过滤方式： includeSelector、excludeSelector过滤  -->
   <h4 class="mb16">includeSelector 和 excludeSelector过滤</h4>
-  <img-preview
+  <image-preview
     max-scale="3"
     min-scale="0.6"
     scale-step="0.2"
@@ -75,11 +75,11 @@ template
         :class="['s-img', index > 1 ? `img${index}` : '']"
         style="width: 100px; height: 100px; margin-right: 10px;">
     </div>
-  </img-preview>
+  </image-preview>
 
   <!-- 过滤方式：filter 函数 -->
   <h4 class="mb16">filter 函数过滤</h4>
-  <img-preview
+  <image-preview
     max-scale="2"
     min-scale="0.5"
     scale-step="0.1"
@@ -99,7 +99,7 @@ template
         :class="['s-img', index > 1 ? `img${index}` : '']"
         style="width: 100px; height: 100px; margin-right: 10px;">
     </div>
-  </img-preview>
+  </image-preview>
 ```
 script
 ```js
@@ -127,7 +127,7 @@ export default {
 
 ## 2. 自定义模式
 
-> 此模式需自定义传递图片url集合，自己控制显隐，扩展性强，使用大部分场景
+> 此模式需自定义传递图片url集合，自己控制显隐，扩展性强，适用于自定义较强的场景
 
 template
 ```html
@@ -139,10 +139,10 @@ template
       style="width: 100px; height: 100px; margin-right: 10px;"
       @click="handleImgPreview(index)">
   </template>
-  <img-preview
+  <image-preview
     :image-urls="imageUrls"
     :visible.sync="visible"
-    :start-position="startPosition"></img-preview>
+    :start-position="startPosition"></image-preview>
 </template>
 ```
 script

diff --git a/package.json b/package.json
@@ -2,23 +2,54 @@
   "name": "vue-img-viewer",
   "version": "1.1.0",
   "description": "基于 Vue 的轻量级图片预览组件",
-  "main": "src/index.js",
+  "private": false,
+  "main": "dist/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "NODE_ENV=production webpack --config webpack.config.js"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/AnaniZhu/vue-imgPreview.git"
+    "url": "git+https://github.com/AnaniZhu/vue-img-viewer.git"
   },
   "keywords": [
     "vue",
     "component",
     "image-preview"
   ],
-  "author": "Annani",
+  "author": "Annani <https://github.com/AnaniZhu/>",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/AnaniZhu/vue-imgPreview/issues"
+    "url": "https://github.com/AnaniZhu/vue-img-viewer/issues"
   },
-  "homepage": "https://github.com/AnaniZhu/vue-imgPreview#readme"
+  "homepage": "https://github.com/AnaniZhu/vue-img-viewer#readme",
+  "devDependencies": {
+    "@babel/core": "^7.5.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/preset-env": "^7.5.0",
+    "babel": "^6.23.0",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^10.0.2",
+    "babel-loader": "^8.0.6",
+    "css-loader": "^3.0.0",
+    "eslint": "^6.0.1",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-plugin-import": "^2.18.0",
+    "eslint-plugin-node": "^9.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^5.2.3",
+    "file-loader": "^4.0.0",
+    "node-sass": "^4.12.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "sass": "^1.22.3",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "uglifyjs-webpack-plugin": "^2.1.3",
+    "url-loader": "^2.0.1",
+    "vue": "^2.6.10",
+    "vue-loader": "^15.7.0",
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^4.35.2",
+    "webpack-cli": "^3.3.5"
+  }
 }
diff --git a/src/ImgPreview.vue → src/ImagePreview.vue b/src/ImgPreview.vue → src/ImagePreview.vue
@@ -20,15 +20,15 @@
             @wheel="wheelScale">
         </div>
         <div class="pos-tip">{{ currentPosition + 1 }} / {{ totalCount }}</div>
-        <div class="close hover-icon" @click="close"><i class="iconfont icon-guanbi"></i></div>
-        <div class="arrow arrow-prev hover-icon" @click="updatePosition(-1)"><i class="iconfont icon-shangyizhang"></i></div>
-        <div class="arrow arrow-next hover-icon" @click="updatePosition(1)"><i class="iconfont icon-xiayizhang"></i></div>
+        <div class="close hover-icon" @click="close"><i class="iconfont icon-guanbi" /></div>
+        <div class="arrow arrow-prev hover-icon" @click="updatePosition(-1)"><i class="iconfont icon-shangyizhang" /></div>
+        <div class="arrow arrow-next hover-icon" @click="updatePosition(1)"><i class="iconfont icon-xiayizhang" /></div>
         <div class="operate-area">
-          <i class="iconfont icon-actionicon hover-icon" @click="increaseScale"></i>
-          <i class="iconfont icon-suoxiao hover-icon" @click="decreaseScale"></i>
-          <div class="divide"></div>
-          <i class="iconfont icon-xuanzhuan hover-icon" @click="rotate -= innerAngle"></i>
-          <i class="iconfont icon-xuanzhuan-r hover-icon" @click="rotate += innerAngle"></i>
+          <i class="iconfont icon-actionicon hover-icon" @click="increaseScale" />
+          <i class="iconfont icon-suoxiao hover-icon" @click="decreaseScale" />
+          <div class="divide" />
+          <i class="iconfont icon-xuanzhuan hover-icon" @click="rotate -= innerAngle" />
+          <i class="iconfont icon-xuanzhuan-r hover-icon" @click="rotate += innerAngle" />
         </div>
         <transition name="fade">
           <div
@@ -40,7 +40,7 @@
         </transition>
       </div>
     </transition>
-    <div v-if="isSlotMode" ref="slotWrapper" @click="handleImgWrapperClick"><slot></slot></div>
+    <div v-if="isSlotMode" ref="slotWrapper" @click="handleImgWrapperClick"><slot /></div>
   </div>
 </template>
 
@@ -54,6 +54,7 @@ const BASE_SELECTOR = 'img' // 默认选择器
 const DEFAULT_FILTER_FUNCTION = () => true // 插槽模式下，默认过滤函数
 
 export default {
+  name: 'ImagePreview',
   props: {
     visible: {
       type: Boolean,
@@ -173,15 +174,15 @@ export default {
       return (this.finallyImageList || []).length
     },
     imgStyle () {
-      let {left, top} = this.position
+      let { left, top } = this.position
       let styleKey = this.aspectRatio > 1 ? 'max-width' : 'max-height'
       return {
         transform: `translate3d(${left}px, ${top}px, 0) scale(${this.scale}) rotate(${this.rotate}deg)`,
         [styleKey]: '100%'
       }
     },
     scaleTipStyle () {
-      let {left, top} = this.position
+      let { left, top } = this.position
       return `transform: translate3d(calc(-50% + ${left}px), calc(-50% + ${top}px), 0)`
     }
   },
@@ -336,9 +337,9 @@ export default {
     },
     handleImageMouseMove (e) {
       // 移动event的坐标
-      let {clientX, clientY} = e
+      let { clientX, clientY } = e
       // 鼠标按下时记录的坐标
-      let {x, y} = this.mouse
+      let { x, y } = this.mouse
       // 偏移后的位置
       let deltaX = clientX - x + this.position.left
       let deltaY = clientY - y + this.position.top
@@ -352,6 +353,7 @@ export default {
       }
     },
     handleImageMouseUp (e) {
+      console.log(123)
       window.removeEventListener('mousemove', this.handleImageMouseMove)
       window.removeEventListener('mouseup', this.handleImageMouseUp)
     },
@@ -370,7 +372,7 @@ export default {
       this.resetImage()
     },
     handlePressESC (e) {
-      let {keyCode, code} = e
+      let { keyCode, code } = e
       if (this.visible && (keyCode === 27 || code === 'Escape')) {
         this.close()
       }
@@ -380,6 +382,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import url('//at.alicdn.com/t/font_1239600_z1ho2s724n.css');
+
 .fade-in-enter-active,
 .fade-in-leave-active {
   transition: opacity 0.25s;

diff --git a/src/example.vue b/src/example.vue
@@ -8,14 +8,14 @@
         style="width: 100px; height: 100px; margin-right: 10px;"
         @click="handleImgPreview(index)">
     </template>
-    <img-preview
+    <image-preview
       :image-urls="imageUrls"
       :visible.sync="visible"
-      :start-position="startPosition"></img-preview>
+      :start-position="startPosition" />
 
     <h3 class="mb16">第二种用法，组件包裹元素，自动识别内部图片并添加点击事件预览, 显隐由组件内部控制，此模式可传递缩放相关的Props</h3>
     <h4 class="mb16">includeSelector 和 excludeSelector过滤</h4>
-    <img-preview
+    <image-preview
       max-scale="3"
       min-scale="0.6"
       scale-step="0.2"
@@ -35,9 +35,9 @@
           :class="['s-img', index > 1 ? `img${index}` : '']"
           style="width: 100px; height: 100px; margin-right: 10px;">
       </div>
-    </img-preview>
+    </image-preview>
     <h4 class="mb16">filter 函数过滤</h4>
-    <img-preview
+    <image-preview
       max-scale="2"
       min-scale="0.5"
       scale-step="0.1"
@@ -57,14 +57,14 @@
           :class="['s-img', index > 1 ? `img${index}` : '']"
           style="width: 100px; height: 100px; margin-right: 10px;">
       </div>
-    </img-preview>
+    </image-preview>
   </div>
 </template>
 <script>
-import ImgPreview from './ImgPreview'
+import ImagePreview from './ImagePreview'
 export default {
   components: {
-    ImgPreview
+    ImagePreview
   },
   data () {
     return {
@@ -167,4 +167,3 @@ export default {
   display: inline-block;
 }
 </style>
-
diff --git a/src/index.js b/src/index.js
@@ -1,8 +1,10 @@
-import ImgPreview from './ImgPreview.vue'
-import '//at.alicdn.com/t/font_1239600_z1ho2s724n.css'
+import ImagePreview from './ImagePreview.vue'
 
-export default {
-  install (Vue, options = {}) {
-    Vue.Component('ImgPreview', ImgPreview)
-  }
-}
+ImagePreview.install = Vue => Vue.Component(ImagePreview.name, ImagePreview)
+
+/* 支持使用标签的方式引入 */
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.Component(ImagePreview.name, ImagePreview)
+}
+
+export default ImagePreview