text: "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[1062],{49644:(n,s,e)=>{e.r(s),e.d(s,{data:()=>o});const o={key:"v-0552df9c",path:"/zh/vuepress-next/reference/plugin/medium-zoom.html",title:"medium-zoom",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"安装",slug:"安装",children:[]},{level:2,title:"配置项",slug:"配置项",children:[{level:3,title:"selector",slug:"selector",children:[]},{level:3,title:"delay",slug:"delay",children:[]},{level:3,title:"zoomOptions",slug:"zoomoptions",children:[]}]},{level:2,title:"样式",slug:"样式",children:[]},{level:2,title:"Composition API",slug:"composition-api",children:[{level:3,title:"useMediumZoom",slug:"usemediumzoom",children:[]}]}],git:{updatedTime:1635758933e3,contributors:[{name:"shentuzhigang",email:"shentuzhigang@moresec.cn",commits:1}]},readingTime:{minutes:1.51,words:453},filePathRelative:"zh/vuepress-next/reference/plugin/medium-zoom.md",content:"# medium-zoom\n\n<NpmBadge package=\"@vuepress/plugin-medium-zoom\" />\n\n将 [medium-zoom](https://github.com/francoischalifour/medium-zoom#readme) 集成到 VuePress 中，为图片提供可缩放的功能。\n\n该插件已经集成到默认主题中。\n\n## 安装\n\n```bash\nnpm i -D @vuepress/plugin-medium-zoom@next\n```\n\n## 配置项\n\n### selector\n\n- 类型： `string`\n\n- 默认值： `':not(a) > img'`\n\n- 详情：\n\n  可缩放的图片的选择器。\n\n  默认情况下，该插件会使 `<a>` 标签以外的所有图片都支持缩放。\n\n### delay\n\n- 类型： `number`\n\n- 默认值： `500`\n\n- 详情：\n\n  以毫秒为单位的延迟。\n\n  在切换路由进入一个新页面时，该插件会在一定延迟后才使页面内的图片支持缩放。\n\n### zoomOptions\n\n- 类型： `Object`\n\n- 详情：\n\n  medium-zoom 的配置项。\n\n- 参考：\n  - [medium-zoom > Options](https://github.com/francoischalifour/medium-zoom#options)\n\n## 样式\n\n你可以通过 [zoomOptions](#zoomoptions) 对大部分的缩放样式进行自定义，不过作为补充，该插件同样提供了一些 CSS 变量：\n\n@[code css](@vuepress/plugin-medium-zoom/src/client/styles/vars.css)\n\n## Composition API\n\n### useMediumZoom\n\n- 详情：\n\n  返回该插件使用的 `Zoom` 实例，便于你直接使用实例上的 [methods](https://github.com/francoischalifour/medium-zoom#methods) 。\n\n  该插件会在切换路由进入当前页面时使图片支持缩放。但如果你要动态添加新图片，那么你可能就需要这个方法来让这些新图片也支持缩放。\n\n  该插件在 `Zoom` 实例上额外添加了一个 `refresh` 方法，它将使用 [selector](#selector) 作为默认参数，先调用 `zoom.detach()` 再调用 `zoom.attach()` ，便于你快速刷新当前页面图片的缩放状态。\n\n- 示例：\n\n```ts\nimport { nextTick } from 'vue'\nimport { useMediumZoom } from '@vuepress/plugin-medium-zoom/lib/client'\n\nexport default {\n  setup() {\n    const zoom = useMediumZoom()\n\n    // ... 进行了一些操作，在当前页面添加了新的图片\n\n    // 此时你可能需要手动调用 `refresh` 来让这些新图片支持缩放\n    nextTick(() => {\n      zoom.refresh()\n    })\n  },\n}\n```\n"}},22633:(n,s,e)=>{e.r(s),e.d(s,{default:()=>i});var o=e(66252);const a=(0,o._)("h1",{id:"medium-zoom",tabindex:"-1"},[(0,o._)("a",{class:"header-anchor",href:"#medium-zoom","aria-hidden":"true"},"#"),(0,o.Uk)(" medium-zoom")],-1),l=(0,o.uE)('<p>将 <a href="https://github.com/francoischalifour/medium-zoom#readme" target="_blank" rel="noopener noreferrer">medium-zoom</a> 集成到 VuePress 中，为图片提供可缩放的功能。</p><p>该插件已经集成到默认主题中。</p><h2 id="安装" tabindex="-1"><a class="header-anchor" href="#安装" aria-hidden="true">#</a> 安装</h2><div class="language-bash ext-sh line-numbers-mode"><pre class="shiki" style="background-color:#1E1E1E;"><code><span class="line"><span style="color:#D4D4D4;">npm i -D @vuepress/plugin-medium-zoom@next</span></span>\n<span class="line"></span></code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h2 id="配置项" tabindex="-1"><a class="header-anchor" href="#配置项" aria-hidden="true">#</a> 配置项</h2><h3 id="selector" tabindex="-1"><a class="header-anchor" href="#selector" aria-hidden="true">#</a> selector</h3><ul><li><p>类型： <code>string</code></p></li><li><p>默认值： <code>&#39;:not(a) &gt; img&#39;</code></p></li><li><p>详情：</p><p>可缩放的图片的选择器。</p><p>默认情况下，该插件会使 <code>&lt;a&gt;</code> 标签以外的所有图片都支持缩放。</p></li></ul><h3 id="delay" tabindex="-1"><a class="header-anchor" href="#delay" aria-hidden="true">#</a> delay</h3><ul><li><p>类型： <code>number</code></p></li><li><p>默认值： <code>500</code></p></li><li><p>详情：</p><p>以毫秒为单位的延迟。</p><p>在切换路由进入一个新页面时，该插件会在一定延迟后才使页面内的图片支持缩放。</p></li></ul><h3 id="zoomoptions" tabindex="-1"><a class="header-anchor" href="#zoomoptions" aria-hidden="true">#</a> zoomOptions</h3><ul><li><p>类型： <code>Object</code></p></li><li><p>详情：</p><p>medium-zoom 的配置项。</p></li><li><p>参考：</p><ul><li><a href="https://github.com/francoischalifour/medium-zoom#options" target="_blank" rel="noopener noreferrer">medium-zoom &gt; Options</a></li></ul></li></ul><h2 id="样式" tabindex="-1"><a class="header-anchor" href="#样式" aria-hidden="true">#</a> 样式</h2><p>你可以通过 <a href="#zoomoptions">zoomOptions</a> 对大部分的缩放样式进行自定义，不过作为补充，该插件同样提供了一些 CSS 变量：</p><div class="language-css ext-css line-numbers-mode"><pre class="shiki" style="background-color:#1E1E1E;"><code><span class="line"><span style="color:#D4D4D4;">File not found</span></span></code></pre><div class="line-numbers"></div></div><h2 id="composition-api" tabindex="-1"><a class="header-anchor" href="#composition-api" aria-hidden="true">#</a> Composition API</h2><h3 id="usemediumzoom" tabindex="-1"><a class="header-anchor" href="#usemediumzoom" aria-hidden="true">#</a> useMediumZoom</h3><ul><li><p>详情：</p><p>返回该插件使用的 <code>Zoom</code> 实例，便于你直接使用实例上的 <a href="https://github.com/francoischalifour/medium-zoom#methods" target="_blank" rel="noopener noreferrer">methods</a> 。</p><p>该插件会在切换路由进入当前页面时使图片支持缩放。但如果你要动态添加新图片，那么你可能就需要这个方法来让这些新图片也支持缩放。</p><p>该插件在 <code>Zoom</code> 实例上额外添加了一个 <code>refresh</code> 方法，它将使用 <a href="#selector">selector</a> 作为默认参数，先调用 <code>zoom.detach()</code> 再调用 <code>zoom.attach()</code> ，便于你快速刷新当前页面图片的缩放状态。</p></li><li><p>示例：</p></li></ul><div class="language-typescript ext-ts line-numbers-mode"><pre class="shiki" style="background-color:#1E1E1E;"><code><span class="line"><span style="color:#C586C0;">import</span><span style="color:#D4D4D4;"> { </span><span style="color:#9CDCFE;">nextTick</span><span style="color:#D4D4D4;"> } </span><span style="color:#C586C0;">from</span><span style="color:#D4D4D4;"> </span><span style="color:#CE9178;">&#39;vue&#39;</span></span>\n<span class="line"><span style="color:#C586C0;">import</span><span style="color:#D4D4D4;"> { </span><span style="color:#9CDCFE;">useMediumZoom</span><span style="color:#D4D4D4;"> } </span><span style="color:#C586C0;">from</span><span style="color:#D4D4D4;"> </span><span style="color:#CE9178;">&#39;@vuepress/plugin-medium-zoom/lib/client&#39;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#C586C0;">export</span><span style="color:#D4D4D4;"> </span><span style="color:#C586C0;">default</span><span style="color:#D4D4D4;"> {</span></span>\n<span class="line"><span style="color:#D4D4D4;">  </span><span style="color:#DCDCAA;">setup</span><span style="color:#D4D4D4;">() {</span></span>\n<span class="line"><span style="color:#D4D4D4;">    </span><span style="color:#569CD6;">const</span><span style="color:#D4D4D4;"> </span><span style="color:#4FC1FF;">zoom</span><span style="color:#D4D4D4;"> = </span><span style="color:#DCDCAA;">useMediumZoom</span><span style="color:#D4D4D4;">()</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#D4D4D4;">    </span><span style="color:#6A9955;">// ... 进行了一些操作，在当前页面添加了新的图片</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#D4D4D4;">    </span><span style="color:#6A9955;">// 此时你可能需要手动调用 `refresh` 来让这些新图片支持缩放</span></span>\n<span class="line"><span style="color:#D4D4D4;">    </span><span style="color:#DCDCAA;">nextTick</span><span style="color:#D4D4D4;">(() </span><span style="color:#569CD6;">=&gt;</span><span style="color:#D4D4D4;"> {</span></span>\n<span class="line"><span style="color:#D4D4D4;">      </span><span style="color:#9CDCFE;">zoom</span><span style="color:#D4D4D4;">.</span><span style="color:#DCDCAA;">refresh</span><span style="color:#D4D4D4;">()</span></span>\n<span class="line"><span style="color:#D4D4D4;">    })</span></span>\n<span class="line"><span style="color:#D4D4D4;">  },</span></span>\n<span class="line"><span style="color:#D4D4D4;">}</span></span>\n<span class="line"></span></code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div>',18),p={},i=(0,e(83744).Z)(p,[["render",function(n,s){const e=(0,o.up)("NpmBadge");return(0,o.wg)(),(0,o.iD)(o.HY,null,[a,(0,o.Wm)(e,{package:"@vuepress/plugin-medium-zoom"}),l],64)}]])}}]);