diff --git a/README.md b/README.md
index 131ac51dafd5f46d0ee100023811e0cca8b0e98f..352cdd74e9221a4f3652a4983f4fc0257bebc8a2 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,11 @@
 # image-ipreview
-一款基于vue2.x的桌面端轻量图片预览插件。
+一款基于vue的桌面端轻量图片预览插件。
 
 （欢迎大家使用~，我会持续迭代）
 
 ### 特性
-      1.支持缩放，旋转，下载等
+      1.支持缩放，旋转，下载
+      2.支持鼠标滚轮缩放
 ### 安装
 ```javascript
 npm install image-ipreview 
@@ -16,7 +17,7 @@ import 'image-ipreview/lib/image-ipreview.css';
 Vue.use(ImageIpreview);
 
 ```
-### 选项
+### 配置
 
 |       属性名       |  类型   |     描述      | 默认值 |
 | :----------------: | :-----: | :-----------: | :----: |
@@ -24,9 +25,12 @@ Vue.use(ImageIpreview);
 | closeOnPressEscape | Boolean | esc键关闭预览 |  true  |
 |   isShowToolBar    | Boolean |  是否展示工具栏   |  true  |
 |   isDownload    | Boolean |  是否展示下载图标   |  true  |
+|   downloadName    | String |  下载图片名称   |  下载图片  |
+|   isMouseWheel    | Boolean |  是否开启鼠标滚轮缩放   |  false  |
 
 ### 效果
 
 ![image](https://gitee.com/weban/vue-plug-in/raw/master/examples/assets/44.jpg)
+![image](https://gitee.com/weban/vue-plug-in/raw/master/examples/assets/1314.png)
 
 
diff --git a/examples/App.vue b/examples/App.vue
index 8a7efef9d58a0121e35bbf1ffa1b747bfac7fa97..c37d16fd030fc25c19ab0793c42a7ac11d1b6039 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <image-preview :url="require('./assets/logo.png')" ></image-preview>
+    <image-preview :url="require('./assets/logo.png')" :isMouseWheel="false"></image-preview>
   </div>
 </template>
 
diff --git a/examples/assets/1314.png b/examples/assets/1314.png
new file mode 100644
index 0000000000000000000000000000000000000000..f8a771d249fa5685286a2a342c2c44d262994325
Binary files /dev/null and b/examples/assets/1314.png differ
diff --git a/package.json b/package.json
index de1770b2c50b12ee5b4228196bbbe1ee45b73124..3a2d60afb3b50322e587244a30278748fea57be5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "image-ipreview",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": false,
   "author": "xc",
   "description": "A image preview plugin for Vue.js.",
diff --git a/src/components/imagePreview/index.js b/src/components/imagePreview/index.js
index 9109256881f65dec65f2f17505740fb06888db52..38a974a3510a551b104d45adad51e47218a89136 100644
--- a/src/components/imagePreview/index.js
+++ b/src/components/imagePreview/index.js
@@ -1,4 +1,4 @@
-import ImagePrview from './src/imagePreview.vue';
+import ImagePrview from './src/index.vue';
 
 // eslint-disable-next-line func-names
 ImagePrview.install = function(Vue) {
diff --git a/src/components/imagePreview/src/index.vue b/src/components/imagePreview/src/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cac4cfc3f7c7a361b714ad43682aa8c6ff979d1f
--- /dev/null
+++ b/src/components/imagePreview/src/index.vue
@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <img :src="url" @click="handleShowPreview" />
+        <Preview
+            :url="url"
+            :closeOnPressEscape="closeOnPressEscape"
+            :isShowToolBar="isShowToolBar"
+            :isMouseWheel="isMouseWheel"
+            v-if="isShowImg"
+            @close="isShowImg = false"
+        />
+    </div>
+</template>
+
+<script>
+import Preview from './preview';
+export default {
+  name: 'image-preview',
+  provide: {
+    childProp: this
+  },
+  props: {
+    url: {
+      type: String,
+      default: ''
+    },
+    closeOnPressEscape: {
+      type: Boolean,
+      default: true
+    },
+    isShowToolBar: {
+      type: Boolean,
+      default: true
+    },
+    isMouseWheel: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isShowImg: false
+    };
+  },
+  components: {
+    Preview
+  },
+  created() {
+
+  },
+  mounted() {
+
+  },
+  methods: {
+    handleShowPreview() {
+      this.isShowImg = true;
+      this.$nextTick(() => {
+        this.provide = {
+          childProp: this
+        };
+      });
+    }
+  }
+};
+</script>
+
diff --git a/src/components/imagePreview/src/imagePreview.vue b/src/components/imagePreview/src/preview.vue
similarity index 58%
rename from src/components/imagePreview/src/imagePreview.vue
rename to src/components/imagePreview/src/preview.vue
index ddeb4c06445cb41a6e156400718df72e42e1d202..52c935a1a25d150e5ed4ed9b75b26fc6ba420433 100644
--- a/src/components/imagePreview/src/imagePreview.vue
+++ b/src/components/imagePreview/src/preview.vue
@@ -1,13 +1,10 @@
 <template>
-  <div v-if="url">
-    <img :src="url" @click="isShowImg = true" />
-    <div class="preview-modal-wrapper" v-show="isShowImg">
-      <div class="preview-modal">
-        <div class="preview-header"><span @click="isShowImg = false">x</span></div>
-        <div class="preview-modal-body" :style="{background: `url(${url}) no-repeat center/${bgSize}%`, transform: `rotate(${degree}deg)`}" />
-        <div class="preview-toolbar" v-if="isShowToolBar">
-          <tool-bar @zoom="handleZoom" @spin="handleSpin" :imgUrl="url" :isDownload="true"/>
-        </div>
+  <div class="preview-modal-wrapper">
+    <div class="preview-modal">
+      <div class="preview-header"><span @click="$emit('close')">x</span></div>
+      <div class="preview-modal-body" ref="image" :style="{background: `url(${url}) no-repeat center/${bgSize}%`, transform: `rotate(${degree}deg)`}" />
+      <div class="preview-toolbar" v-if="isShowToolBar">
+        <tool-bar @zoom="handleZoom" @spin="handleSpin" :imgUrl="url" :isDownload="true"/>
       </div>
     </div>
   </div>
@@ -17,10 +14,11 @@
 import { addEvent, removeEvent } from '../../../utils/domEvent.js';
 import ToolBar from './toolBar';
 export default {
-  name: 'image-preview',
+  name: 'preview',
   components: {
     ToolBar
   },
+  inject: ['childProp'],
   props: {
     url: {
       type: String,
@@ -33,11 +31,14 @@ export default {
     isShowToolBar: {
       type: Boolean,
       default: true
+    },
+    isMouseWheel: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
-      isShowImg: false,
       bgSize: 50, // 背景图片默认大小
       degree: 0
     };
@@ -45,22 +46,39 @@ export default {
   mounted() {
     // 挂载后，绑定
     addEvent(window, 'keyup', this.handleEscape);
+    // 鼠标滚动：120向前滚动，-120向后滚动
+    addEvent(this.$refs.image, 'mousewheel', this.handleMousewheel);
   },
   beforeDestroy() {
     removeEvent(window, 'keyup', this.handleEscape);
+    removeEvent(this.$refs.image, 'mousewheel', this.handleMousewheel);
   },
   methods: {
+    // 鼠标滚轮缩放
+    handleMousewheel(e) {
+      if (!this.isMouseWheel) return;
+      const delta = e.wheelDelta;
+      const data = {
+        '120': 15,
+        '-120': -15
+      };
+      this.handleZoom(data[delta]);
+    },
+    // esc键退出图片预览
     handleEscape(e) {
       if (!this.closeOnPressEscape) return;
       const key = e.which || e.keyCode;
       if (key === 27) {
-        this.isShowImg = false;
+        this.$emit('close');
       }
     },
+    // 点击缩放
     handleZoom(num) {
-      if (this.bgSize <= 15 && num < 0) return;
+      num = window.parseFloat(num);
+      if ((this.bgSize <= 15 && num < 0) || (this.bgSize >= 230 && num > 0)) return;
       this.bgSize += num;
     },
+    // 图片旋转
     handleSpin(num) {
       this.degree += num;
       if (this.degree >= 360) this.degree = 0;
diff --git a/src/components/imagePreview/src/toolBar.vue b/src/components/imagePreview/src/toolBar.vue
index 82275dae1ba1e97ff95a8fabc078e0cc0199cd1a..74a51e43c85b1607b0ee82f08b6854d9aedb1778 100644
--- a/src/components/imagePreview/src/toolBar.vue
+++ b/src/components/imagePreview/src/toolBar.vue
@@ -19,6 +19,10 @@ export default {
     isDownload: {
       type: Boolean,
       default: true
+    },
+    downloadName: {
+      type: String,
+      default: '下载图片'
     }
   },
   data() {
@@ -26,8 +30,9 @@ export default {
   },
   computed: {
     getImgName() {
-      let imgName = strSplit(strSplit(this.imgUrl, '/')[2], '.')[0];
-      return imgName;
+      const arr = strSplit(this.imgUrl, '/');
+      let imgName = strSplit(arr[arr.length - 1], '.')[0];
+      return (imgName || this.downloadName);
     }
   },
   components: {},