From 42f19e0ce653e42ea1187a9f108f884b92e1febd Mon Sep 17 00:00:00 2001 From: ULIVZ <472590061@qq.com> Date: Wed, 12 Jun 2019 01:06:44 +0800 Subject: [PATCH] fix($plugin-medium-zoom): doesn't work with default plugin options in default theme --- .../@vuepress/plugin-medium-zoom/index.js | 2 +- .../plugin/official/plugin-medium-zoom.md | 13 +++++--- .../zh/plugin/official/plugin-medium-zoom.md | 32 ++++++++++++++++++- 3 files changed, 41 insertions(+), 6 deletions(-) diff --git a/packages/@vuepress/plugin-medium-zoom/index.js b/packages/@vuepress/plugin-medium-zoom/index.js index 3d2fbf2387..556a7e045c 100644 --- a/packages/@vuepress/plugin-medium-zoom/index.js +++ b/packages/@vuepress/plugin-medium-zoom/index.js @@ -2,7 +2,7 @@ const { path } = require('@vuepress/shared-utils') module.exports = (options, context) => ({ define: { - SELECTOR: options.selector || '.content img', + SELECTOR: options.selector || '.theme-default-content img', OPTIONS: options.options }, clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js') diff --git a/packages/docs/docs/plugin/official/plugin-medium-zoom.md b/packages/docs/docs/plugin/official/plugin-medium-zoom.md index 2f3a2a53d0..3b79b464bd 100644 --- a/packages/docs/docs/plugin/official/plugin-medium-zoom.md +++ b/packages/docs/docs/plugin/official/plugin-medium-zoom.md @@ -31,8 +31,8 @@ module.exports = { plugins: { '@vuepress/medium-zoom': { selector: 'img.zoom-custom-imgs', - - // medium-zoom options here (https://github.com/francoischalifour/medium-zoom#options) + // medium-zoom options here + // See: https://github.com/francoischalifour/medium-zoom#options options: { margin: 16 } @@ -46,8 +46,13 @@ module.exports = { ### selector - Type: `string` -- Default: `.content img` +- Default: `.theme-default-content img` + +Note that `.theme-default-content` is the class name of [``](../../guide/using-vue.md#content) component in default theme. ### options -Other `medium-zoom` options. [See documentation](https://github.com/francoischalifour/medium-zoom#options). +- Type: `object` +- Default: `undefined` + +[Options](https://github.com/francoischalifour/medium-zoom#options) for [medium-zoom](https://github.com/francoischalifour/medium-zoom). diff --git a/packages/docs/docs/zh/plugin/official/plugin-medium-zoom.md b/packages/docs/docs/zh/plugin/official/plugin-medium-zoom.md index f9ae2939c9..db1e6f1311 100644 --- a/packages/docs/docs/zh/plugin/official/plugin-medium-zoom.md +++ b/packages/docs/docs/zh/plugin/official/plugin-medium-zoom.md @@ -16,15 +16,45 @@ yarn add -D @vuepress/plugin-medium-zoom@next ## 使用 +## Usage + +**简单使用**: + ```javascript module.exports = { plugins: ['@vuepress/medium-zoom'] } ``` +**自定义选项**: + +```javascript +module.exports = { + plugins: { + '@vuepress/medium-zoom': { + selector: 'img.zoom-custom-imgs', + // medium-zoom options here + // See: https://github.com/francoischalifour/medium-zoom#options + options: { + margin: 16 + } + } + } +} +``` + ## 选项 ### selector - 类型: `string` -- 默认值: `.content img` +- 默认值: `.theme-default-content img` + +值得注意的是, `.theme-default-content` 是默认主题添加给 [``](../../guide/using-vue.md#content) 组件的 class name。 + +### options + +- 类型: `object` +- 默认值: `undefined` + +[medium-zoom](https://github.com/francoischalifour/medium-zoom) 的 [选项](https://github.com/francoischalifour/medium-zoom#options)。