feat($plugin-medium-zoom): custom options (#1649)

Also update medium-zoom to v1.0.4
vuejs · Jun 11, 2019 · 54bb2f3 · 54bb2f3
1 parent 6c60e54
commit 54bb2f3
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git a/packages/@vuepress/plugin-medium-zoom/clientRootMixin.js b/packages/@vuepress/plugin-medium-zoom/clientRootMixin.js
@@ -1,4 +1,4 @@
-/* global SELECTOR */
+/* global SELECTOR, OPTIONS */
 
 import './style.css'
 import zoom from 'medium-zoom'
@@ -20,7 +20,7 @@ export default {
         if (this.zoom) {
           this.zoom.detach()
         }
-        this.zoom = zoom(SELECTOR)
+        this.zoom = zoom(SELECTOR, OPTIONS)
       }, 1000)
     }
   }

diff --git a/packages/@vuepress/plugin-medium-zoom/index.js b/packages/@vuepress/plugin-medium-zoom/index.js
@@ -2,7 +2,8 @@ const { path } = require('@vuepress/shared-utils')
 
 module.exports = (options, context) => ({
   define: {
-    SELECTOR: options.selector || '.content img'
+    SELECTOR: options.selector || '.content img',
+    OPTIONS: options.options
   },
   clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js')
 })
diff --git a/packages/@vuepress/plugin-medium-zoom/package.json b/packages/@vuepress/plugin-medium-zoom/package.json
@@ -18,7 +18,7 @@
     "generator"
   ],
   "dependencies": {
-    "medium-zoom": "^0.4.0"
+    "medium-zoom": "^1.0.4"
   },
   "author": "ULIVZ <chl814@foxmail.com>",
   "license": "MIT",

diff --git a/packages/docs/docs/plugin/official/plugin-medium-zoom.md b/packages/docs/docs/plugin/official/plugin-medium-zoom.md
@@ -16,15 +16,38 @@ yarn add -D @vuepress/plugin-medium-zoom@next
 
 ## Usage
 
+**Simple**:
+
 ```javascript
 module.exports = {
   plugins: ['@vuepress/medium-zoom'] 
 }
 ```
 
+**With options**:
+
+```javascript
+module.exports = {
+  plugins: {
+    '@vuepress/medium-zoom': {
+      selector: 'img.zoom-custom-imgs',
+
+      // medium-zoom options here (https://github.com/francoischalifour/medium-zoom#options)
+      options: {
+        margin: 16
+      }
+    }
+  }
+}
+```
+
 ## Options
 
 ### selector
 
 - Type: `string`
 - Default: `.content img`
+
+### options
+
+Other `medium-zoom` options. [See documentation](https://github.com/francoischalifour/medium-zoom#options).