{"_id":"@carseason/vue3-photo-preview","name":"@carseason/vue3-photo-preview","dist-tags":{"latest":"0.3.1"},"versions":{"0.3.1":{"name":"@carseason/vue3-photo-preview","version":"0.3.1","description":"一个 vue3 的图片预览组件","main":"dist/vue3-photo-preview.umd.js","module":"dist/vue3-photo-preview.esm.js","esnext":"dist/vue3-photo-preview.esm.js","types":"dist/types/index.d.ts","author":{"name":"wangjp"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/NameWjp/vue3-photo-preview.git"},"homepage":"https://github.com/NameWjp/vue3-photo-preview#readme","bugs":{"url":"https://github.com/NameWjp/vue3-photo-preview/issues"},"keywords":["vue3","photo-preview","vue3-photo-preview"],"engines":{"node":">=14","npm":">=7"},"scripts":{"build":"npm run clean && tsc --module commonjs && rollup -c rollup.config.ts","dev":"rollup -c rollup.config.ts -w","clean":"rimraf ./dist","deploy":"deploy.sh","release":"npm run build && release.sh"},"husky":{"hooks":{"pre-commit":"lint-staged","commit-msg":"FORCE_COLOR=1 node scripts/verify-commit.js"}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,vue}":"eslint"},"peerDependencies":{"vue":">=3.2.0"},"devDependencies":{"@babel/types":"^7.16.0","@rollup/plugin-commonjs":"^20.0.0","@rollup/plugin-node-resolve":"^13.0.4","@types/lodash-es":"^4.17.4","@typescript-eslint/eslint-plugin":"^4.29.2","@typescript-eslint/parser":"^4.29.2","@vue/compiler-sfc":"^3.2.4","autoprefixer":"^10.3.1","chalk":"^4.1.2","eslint":"^7.32.0","eslint-plugin-vue":"7.16.0","husky":"4.2.3","lint-staged":"^11.1.2","postcss":"^8.3.6","rimraf":"^3.0.2","rollup":"^2.56.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.1","rollup-plugin-typescript2":"^0.30.0","rollup-plugin-vue":"^6.0.0-beta.10","sass":"^1.38.0","tslib":"^2.3.1","typescript":"^4.3.5"},"dependencies":{"lodash-es":"^4.17.21"},"gitHead":"32fb0f9a44c77e7d1619d7b655d155809f797609","_id":"@carseason/vue3-photo-preview@0.3.1","_nodeVersion":"16.14.0","_npmVersion":"9.6.6","dist":{"integrity":"sha512-7mQuEbD1vlmBYRsYmsEZDEjvSUzct7uKbrgy/5GTsoxeRahLCQaEiWrU5SidRCSOR3oNv9tOVRKEfN2jcp2GIA==","shasum":"3e46f4fd12b22a597e82f9055fa6cc8475b7d9a7","tarball":"https://registry.npmjs.org/@carseason/vue3-photo-preview/-/vue3-photo-preview-0.3.1.tgz","fileCount":80,"unpackedSize":622608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBt3WdK7rwIlFYH5zkJmaxSnMzi94ZxJ9EI3hNistKFXAiEA9eK3fpt858lqxnL6FTyl4K/OuQZtTuNTd68nKA0YQI0="}]},"_npmUser":{"name":"carseason","email":"carseason01@gmail.com"},"directories":{},"maintainers":[{"name":"carseason","email":"carseason01@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-photo-preview_0.3.1_1713167853895_0.8340489876500519"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-15T07:57:33.769Z","0.3.1":"2024-04-15T07:57:34.076Z","modified":"2024-04-15T07:57:34.380Z"},"maintainers":[{"name":"carseason","email":"carseason01@gmail.com"}],"description":"一个 vue3 的图片预览组件","homepage":"https://github.com/NameWjp/vue3-photo-preview#readme","keywords":["vue3","photo-preview","vue3-photo-preview"],"repository":{"type":"git","url":"git+https://github.com/NameWjp/vue3-photo-preview.git"},"author":{"name":"wangjp"},"bugs":{"url":"https://github.com/NameWjp/vue3-photo-preview/issues"},"license":"MIT","readme":"# vue3-photo-preview\nvue3 的图片预览组件\n\n### 特点\n1. 基于 typescript \n2. 支持桌面端和移动端\n3. 支持左右切换导航、上/下滑关闭、双击放大/缩小、双指放大/缩小、键盘导航/关闭、点击切换控件、翻转、下载\n4. 图片尺寸自适应\n5. 图片切换、打开、关闭动画\n\nDemo: [https://namewjp.github.io/vue3-photo-preview/](https://namewjp.github.io/vue3-photo-preview/)\n\n## 开始使用\n### 安装\n```\nnpm install -S vue3-photo-preview\n```\n### 全局注册\n```js\nimport vue3PhotoPreview from 'vue3-photo-preview';\nimport 'vue3-photo-preview/dist/index.css';\n\napp.use(vue3PhotoPreview);\n```\n\n### 使用\n```html\n<template>\n  <photo-provider>\n    <photo-consumer v-for=\"src in imgList\" :intro=\"src\" :key=\"src\" :src=\"src\">\n      <img :src=\"src\" class=\"view-box\">\n    </photo-consumer>\n  </photo-provider>\n</template>\n```\n\n## API\n### PhotoProvider\n#### 属性\n| 名称 | 类型 | 描述 | 默认值 | 必填 |\n| :---- | :---- | :---- | :---- | :---- |\n| photo-closable | boolean | 图片点击是否关闭 | false | 否 |\n| mask-closable | boolean | 背景点击是否关闭 | true | 否 |\n| should-transition | boolean | 箭头切换是否需要过渡 | false | 否 |\n| default-backdrop-opacity | number | 默认背景透明度 | 1 | 否 |\n| loop | boolean | 是否循环显示预览图 | false | 否 |\n| download-method | (item: ItemType) => void&#124;null | 下载图片方法，不传使用内置的下载方法 | null | 否 |\n#### 事件\n| 名称 | 描述 | 参数 |\n| :---- | :---- | :---- |\n| indexChange | 图片切换回调 | { index, items, visible } |\n| visibleChange | 图片显隐切换回调 | { index, items, visible } |\n\n### PhotoConsumer\n#### 属性\n| 名称 | 类型 | 描述 | 默认值 | 必填 |\n| :---- | :---- | :---- | :---- | :---- |\n| src | string | 图片地址 | - | 是 |\n| intro | string | 图片介绍 | - | 否 |\n| download-name | string | 图片下载名称 | 图片名称 | 否 |\n\n### PhotoSlider\n#### 属性\n| 名称 | 类型 | 描述 | 默认值 | 必填 |\n| :---- | :---- | :---- | :---- | :---- |\n| items | ItemType[] | 图片列表 | - | 是 |\n| index | number | 图片当前索引 | - | 是 |\n| visible | number | 是否显示模态框 | - | 是 |\n| should-transition | boolean | 箭头切换是否需要过渡 | false | 否 |\n| toggle-overlay | boolean | 是否切换显隐覆盖物 | true | 否 |\n| default-backdrop-opacity | number | 默认背景透明度 | 1 | 否 |\n| loop | boolean | 是否循环显示预览图 | false | 否 |\n| download-method | (item: ItemType) => void&#124;null | 下载图片方法，不传使用内置的下载方法 | null | 否 |\n#### 事件\n| 名称 | 描述 | 参数 |\n| :---- | :---- | :---- |\n| clickPhoto | 点击预览图片的回调 | MouseEvent&#124;TouchEvent |\n| clickMask | 点击预览背景的回调 | MouseEvent&#124;TouchEvent |\n| changeIndex | 图片下标改变的回调 | newIndex |\n| closeModal | 关闭预览的回调 | - |\n\n## 本地开发调试\n\n1. 在根目录依次执行\n```bash\n# 安装依赖\nnpm ci\n\n# 实时编译代码\nnpm run dev\n```\n\n2. 进入 example 目录依次执行\n```bash\n# 安装依赖\nnpm ci \n\n# 实时编译代码\nnpm run dev\n```\n\n此时，修改 **根目录** 或者 **example目录** 的任何代码都会导致项目重新打包构建。 \n\n\n参考：[https://github.com/MinJieLiu/react-photo-view](https://github.com/MinJieLiu/react-photo-view)\n","readmeFilename":"README.md"}