https://wei-docusaurus-vercel.vercel.app/assets/js/8a358f7e.43cf1ea1.js

1/*! For license information please see 8a358f7e.43cf1ea1.js.LICENSE.txt */
2"use strict";(self.webpackChunkWeiWei_WeiYun0912_=self.webpackChunkWeiWei_WeiYun0912_||[]).push([[8827],{3905:(e,t,n)=>{n.d(t,{Zo:()=>s,kt:()=>g});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=r.createContext({}),p=function(e){var t=r.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},s=function(e){var t=p(e.components);return r.createElement(u.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,i=e.originalType,u=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),m=p(n),g=o,d=m["".concat(u,".").concat(g)]||m[g]||c[g]||i;return n?r.createElement(d,a(a({ref:t},s),{},{components:n})):r.createElement(d,a({ref:t},s))}));function g(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=n.length,a=new Array(i);a[0]=m;var l={};for(var u in t)hasOwnProperty.call(t,u)&&(l[u]=t[u]);l.originalType=e,l.mdxType="string"==typeof e?e:o,a[1]=l;for(var p=2;p<i;p++)a[p]=n[p];return r.createElement.apply(null,a)}return r.createElement.apply(null,n)}m.displayName="MDXCreateElement"},5706:(e,t,n)=>{n.d(t,{Z:()=>a});var r=n(7294),o=n(24),i=n(2949);function a(){const{colorMode:e}=(0,i.I)();return r.createElement(o.Z,{repo:"WeiYun0912/Wei-Docusaurus-Vercel",repoId:"R_kgDOJNKufA",category:"Announcements",categoryId:"DIC_kwDOJNKufM4CdhHY",mapping:"title",strict:"0",reactionsEnabled:"1",emitMetadata:"1",inputPosition:"top",theme:e,lang:"zh-TW",loading:"lazy",crossorigin:"anonymous",async:!0})}},9219:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>l,default:()=>m,frontMatter:()=>a,metadata:()=>u,toc:()=>s});var r=n(7462),o=(n(7294),n(3905)),i=n(5706);const a={title:"[vue] \u4f7f\u7528 vue-easy-lightbox \u5be6\u73fe\u5716\u7247\u9810\u89bd",keywords:["Vue3","vue-easy-lightbox","\u5716\u7247\u9810\u89bd"],description:"\u4f7f\u7528 vue-easy-lightbox \u5be6\u73fe\u5716\u7247\u9810\u89bd\uff0c\u652f\u63f4\u653e\u5927\u3001\u7e2e\u5c0f\u3001\u65cb\u8f49\u3001\u6062\u5fa9\u539f\u59cb\u5927\u5c0f\uff0c\u4e5f\u53ef\u4ee5\u5de6\u53f3\u5207\u63db\u5716\u7247\u3002",author:"WeiYun0912","og:title":"[vue] \u4f7f\u7528 vue-easy-lightbox \u5be6\u73fe\u5716\u7247\u9810\u89bd","og:description":"\u4f7f\u7528 vue-easy-lightbox \u5be6\u73fe\u5716\u7247\u9810\u89bd\uff0c\u652f\u63f4\u653e\u5927\u3001\u7e2e\u5c0f\u3001\u65cb\u8f49\u3001\u6062\u5fa9\u539f\u59cb\u5927\u5c0f\uff0c\u4e5f\u53ef\u4ee5\u5de6\u53f3\u5207\u63db\u5716\u7247\u3002",sidebar_position:16},l="\u4f7f\u7528 vue-easy-lightbox \u5be6\u73fe\u5716\u7247\u9810\u89bd",u={unversionedId:"Vue/Vue-30/Vue-ImagePreview",id:"Vue/Vue-30/Vue-ImagePreview",title:"[vue] \u4f7f\u7528 vue-easy-lightbox \u5be6\u73fe\u5716\u7247\u9810\u89bd",description:"\u4f7f\u7528 vue-easy-lightbox \u5be6\u73fe\u5716\u7247\u9810\u89bd\uff0c\u652f\u63f4\u653e\u5927\u3001\u7e2e\u5c0f\u3001\u65cb\u8f49\u3001\u6062\u5fa9\u539f\u59cb\u5927\u5c0f\uff0c\u4e5f\u53ef\u4ee5\u5de6\u53f3\u5207\u63db\u5716\u7247\u3002",source:"@site/docs/Vue/Vue-30/Vue-ImagePreview.md",sourceDirName:"Vue/Vue-30",slug:"/Vue/Vue-30/Vue-ImagePreview",permalink:"/docs/Vue/Vue-30/Vue-ImagePreview",draft:!1,tags:[],version:"current",sidebarPosition:16,frontMatter:{title:"[vue] \u4f7f\u7528 vue-easy-lightbox \u5be6\u73fe\u5716\u7247\u9810\u89bd",keywords:["Vue3","vue-easy-lightbox","\u5716\u7247\u9810\u89bd"],description:"\u4f7f\u7528 vue-easy-lightbox \u5be6\u73fe\u5716\u7247\u9810\u89bd\uff0c\u652f\u63f4\u653e\u5927\u3001\u7e2e\u5c0f\u3001\u65cb\u8f49\u3001\u6062\u5fa9\u539f\u59cb\u5927\u5c0f\uff0c\u4e5f\u53ef\u4ee5\u5de6\u53f3\u5207\u63db\u5716\u7247\u3002",author:"WeiYun0912","og:title":"[vue] \u4f7f\u7528 vue-easy-lightbox \u5be6\u73fe\u5716\u7247\u9810\u89bd","og:description":"\u4f7f\u7528 vue-easy-lightbox \u5be6\u73fe\u5716\u7247\u9810\u89bd\uff0c\u652f\u63f4\u653e\u5927\u3001\u7e2e\u5c0f\u3001\u65cb\u8f49\u3001\u6062\u5fa9\u539f\u59cb\u5927\u5c0f\uff0c\u4e5f\u53ef\u4ee5\u5de6\u53f3\u5207\u63db\u5716\u7247\u3002",sidebar_position:16},sidebar:"tutorialSidebar",previous:{title:"[vue] Vue \u4f7f\u7528 Lottie \u52d5\u756b",permalink:"/docs/Vue/Vue-30/Vue-Lottie"},next:{title:"[vue] Vue \u5c07 State \u653e\u5165 URL \u7684\u597d\u8655\u8207\u5be6\u4f5c\u65b9\u5f0f",permalink:"/docs/Vue/Vue-30/Vue-URL-State"}},p={},s=[{value:"\u7c21\u4ecb",id:"\u7c21\u4ecb",level:2},{value:"\u5b89\u88dd",id:"\u5b89\u88dd",level:2},{value:"vue-easy-lightbox",id:"vue-easy-lightbox",level:2},{value:"toolbar",id:"toolbar",level:2},{value:"\u53c3\u8003\u8cc7\u6599",id:"\u53c3\u8003\u8cc7\u6599",level:2}],c={toc:s};

2function m(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"\u4f7f\u7528-vue-easy-lightbox-\u5be6\u73fe\u5716\u7247\u9810\u89bd"},"\u4f7f\u7528 vue-easy-lightbox \u5be6\u73fe\u5716\u7247\u9810\u89bd"),(0,o.kt)("h2",{id:"\u7c21\u4ecb"},"\u7c21\u4ecb"),(0,o.kt)("p",null,"\u5728 Vue 3 \u61c9\u7528\u4e2d\uff0c\u6211\u5011\u53ef\u80fd\u9700\u8981\u9810\u89bd\u4e0d\u540c\u985e\u578b\u7684\u5716\u6a94\uff0c\u4f8b\u5982\uff1a"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"JPG"),(0,o.kt)("li",{parentName:"ul"},"PNG"),(0,o.kt)("li",{parentName:"ul"},"GIF"),(0,o.kt)("li",{parentName:"ul"},"SVG")),(0,o.kt)("p",null,"\u9019\u6642\u5019\u53ef\u4ee5\u4f7f\u7528\uff1a"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"https://github.com/XiongAmao/vue-easy-lightbox"},"vue-easy-lightbox")," \u652f\u63f4\u5716\u7247\u9810\u89bd")),(0,o.kt)("h2",{id:"\u5b89\u88dd"},"\u5b89\u88dd"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-bash"},"npm install vue-easy-lightbox\n")),(0,o.kt)("h2",{id:"vue-easy-lightbox"},"vue-easy-lightbox"),(0,o.kt)("p",null,"\u4f7f\u7528\u7684\u65b9\u5f0f\u5f88\u7c21\u55ae\uff0c\u53ea\u8981\u5f15\u5165 ",(0,o.kt)("inlineCode",{parentName:"p"},"VueEasyLightbox")," \u5373\u53ef\u3002"),(0,o.kt)("p",null,"\u63a5\u8457\u5728 ",(0,o.kt)("inlineCode",{parentName:"p"},"imgs props")," \u7684\u5730\u65b9\u63d0\u4f9b\u5716\u7247\u7684 ",(0,o.kt)("inlineCode",{parentName:"p"},"url"),"\uff0c\u53ef\u4ee5\u63d0\u4f9b\u9663\u5217\u6216\u55ae\u4e00\u500b ",(0,o.kt)("inlineCode",{parentName:"p"},"url"),"\uff0c\u7136\u5f8c\u6211\u5011\u53ef\u4ee5\u7c21\u55ae\u7d66\u4e00\u500b\u958b\u555f\u6309\u9215\uff0c\u7576\u9ede\u64ca\u6309\u9215\u6642\uff0c\u5c31\u6703\u958b\u555f\u5716\u7247\u9810\u89bd\u3002"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-html",metastring:"title='App.vue' showLineNumbers",title:"'App.vue'",showLineNumbers:!0},'<script setup>\nimport { ref } from "vue";\nimport VueEasyLightbox from "vue-easy-lightbox";

2\n\n// \u5716\u7247\u9663\u5217\uff08\u53ef\u652f\u63f4\u591a\u5f35\u5716\u7247\uff09\nconst imageList = ref(["https://i.imgur.com/376RZas.png", "https://i.imgur.com/xLqGdL3.jpg"]);\n\n// \u63a7\u5236\u71c8\u7bb1\u958b\u95dc\nconst dialog = ref(false);\n\nconst openPreview = () => (dialog.value = true);\nconst closePreview = () => (dialog.value = false);\n<\/script>\n\n<template>\n    <div>\n        \x3c!-- \u9810\u89bd\u6309\u9215 --\x3e\n        <button @click="openPreview">\u9810\u89bd\u5716\u7247</button>\n\n        <vue-easy-lightbox :visible="dialog" :imgs="imageList" @hide="closePreview" />\n    </div>\n</template>\n')),(0,o.kt)("p",null,"\u5716\u7247\u9810\u89bd\u7684\u6642\u5019\u4e5f\u53ef\u4ee5\u770b\u5230\u4e0b\u65b9\u6709\u5e7e\u500b\u6309\u9215\uff0c\u53ef\u4ee5\u653e\u5927\u3001\u7e2e\u5c0f\u3001\u65cb\u8f49\u3001\u6062\u5fa9\u539f\u59cb\u5927\u5c0f\uff0c\u4e5f\u53ef\u4ee5\u5de6\u53f3\u5207\u63db\u5716\u7247\u3002"),(0,o.kt)("p",null,(0,o.kt)("img",{parentName:"p",src:"https://i.imgur.com/mR4MFGa.png",alt:"Image"})),(0,o.kt)("h2",{id:"toolbar"},"toolbar"),(0,o.kt)("p",null,"\u5982\u679c\u60f3\u8981\u81ea\u8a02 toolbar \u7684\u6309\u9215\uff0c\u53ef\u4ee5\u900f\u904e ",(0,o.kt)("inlineCode",{parentName:"p"},"#toolbar(v-slot:toolbar)")," \u4f86\u5be6\u73fe\uff0c\u4f46\u8981\u6ce8\u610f\u7684\u662f\uff0c\u4e00\u65e6\u4f7f\u7528 ",(0,o.kt)("inlineCode",{parentName:"p"},"v-slot:toolbar"),"\uff0c\u5c31\u6703\u8986\u84cb\u6389\u539f\u672c\u7684\u90a3\u4e9b\u529f\u80fd\uff0c\u6240\u4ee5\u9700\u8981\u81ea\u5df1\u91cd\u65b0\u5be6\u73fe\u548c\u4e0a\u6a23\u5f0f\u3002"),(0,o.kt)("p",null,"toolbarMethods \u6709\u63d0\u4f9b\u4ee5\u4e0b\u65b9\u6cd5\uff1a"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"resize")," \u6062\u5fa9\u539f\u59cb\u5927\u5c0f"),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"rotate")," \u65cb\u8f49(\u9810\u8a2d -90 \u5ea6)"),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"rotateLeft")," \u5f80\u5de6\u65cb\u8f49"),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"rotateRight")," \u5f80\u53f3\u65cb\u8f49"),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"zoomIn")," \u653e\u5927"),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"zoomOut")," \u7e2e\u5c0f")),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-html",metastring:"title='App.vue' showLineNumbers",title:"'App.vue'",showLineNumbers:!0},'<script setup>\nimport { ref } from "vue";\nimport VueEasyLightbox from "vue-easy-lightbox";

2\n\n// \u5716\u7247\u9663\u5217\uff08\u53ef\u652f\u63f4\u591a\u5f35\u5716\u7247\uff09\nconst imageList = ref(["https://i.imgur.com/376RZas.png", "https://i.imgur.com/xLqGdL3.jpg"]);\n\n// \u63a7\u5236\u958b\u95dc\nconst dialog = ref(false);\n\nconst openPreview = () => (dialog.value = true);\nconst closePreview = () => (dialog.value = false);\n<\/script>\n\n<template>\n    <div>\n        \x3c!-- \u9810\u89bd\u6309\u9215 --\x3e\n        <button @click="openPreview">\u9810\u89bd\u5716\u7247</button>\n\n        <vue-easy-lightbox :visible="dialog" :imgs="imageList" @hide="closePreview">\n            <template #toolbar="{ toolbarMethods }">\n                <button @click="toolbarMethods.zoomIn">\u653e\u5927</button>\n                <button @click="toolbarMethods.zoomOut">\u7e2e\u5c0f</button>\n            </template>\n        </vue-easy-lightbox>\n    </div>\n</template>\n\n<style scoped>\nbutton {\n    padding: 8px 12px;\n    margin: 10px;\n    border: none;\n    background-color: #3498db;\n    color: white;\n    border-radius: 4px;\n}\n</style>\n\n')),(0,o.kt)("p",null,(0,o.kt)("img",{parentName:"p",src:"https://i.imgur.com/jR6lhnf.png",alt:"Image"})),(0,o.kt)("p",null,"\u9084\u6709\u5176\u4ed6 props \u53ef\u4ee5\u8a2d\u5b9a\uff0c\u53ef\u4ee5\u53c3\u8003",(0,o.kt)("a",{parentName:"p",href:"https://github.com/XiongAmao/vue-easy-lightbox?tab=readme-ov-file#options"},"\u5b98\u65b9\u6587\u4ef6"),"\u3002"),(0,o.kt)("h2",{id:"\u53c3\u8003\u8cc7\u6599"},"\u53c3\u8003\u8cc7\u6599"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"https://github.com/XiongAmao/vue-easy-lightbox"},"vue-easy-lightbox"))),(0,o.kt)(i.Z,{mdxType:"Giscus"}))}m.isMDXComponent=!0},5251:(e,t,n)=>{var r=n(7294),o=Symbol.for("react.element"),i=Symbol.for("react.fragment"),a=Object.prototype.hasOwnProperty,l=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,u={key:!0,ref:!0,__self:!0,__source:!0};function p(e,t,n){var r,i={},p=null,s=null;for(r in void 0!==n&&(p=""+n),void 0!==t.key&&(p=""+t.key),void 0!==t.ref&&(s=t.ref),t)a.call(t,r)&&!u.hasOwnProperty(r)&&(i[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps)void 0===i[r]&&(i[r]=t[r]);return{$$typeof:o,type:e,key:p,ref:s,props:i,_owner:l.current}}t.jsx=p},5893:(e,t,n)=>{e.exports=n(5251)},24:(e,t,n)=>{n.d(t,{Z:()=>i});var r=n(5893),o=n(7294);function i({id:e,host:t,repo:i,repoId:a,category:l,categoryId:u,mapping:p,term:s,strict:c,reactionsEnabled:m,emitMetadata:g,inputPosition:d,theme:v,lang:b,loading:h}){const[y,f]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{y||(n.e(4355).then(n.bind(n,4355)),f(!0))}),[]),y?(0,r.jsx)("giscus-widget",{id:e,host:t,repo:i,repoid:a,category:l,categoryid:u,mapping:p,term:s,strict:c,reactionsenabled:m,emitmetadata:g,inputposition:d,theme:v,lang:b,loading:h}):null}}}]);