{"_id":"@breathlessway/element-image-preview","_rev":"1-69b0d8529459dff17a63ab6ef05f87a6","name":"@breathlessway/element-image-preview","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@breathlessway/element-image-preview","description":"element-image-preview component","version":"0.0.1","private":false,"scripts":{"serve":"vue-cli-service serve","build":"vue-cli-service build","lint":"vue-cli-service lint","lib":"vue-cli-service build --target lib --name element-image-preview src/components/index.js","release":"standard-version","prepublishOnly":"npm run lib","deploy":"npm run release && git push --follow-tags origin master && npm publish --access public"},"main":"dist/element-image-preview.umd.min.js","author":{"name":"BreathlessWay"},"license":"MIT","keywords":["vue","element-ui"],"dependencies":{"core-js":"^3.8.3","vue":"^2.6.14"},"devDependencies":{"@babel/core":"^7.12.16","@babel/eslint-parser":"^7.12.16","@commitlint/cli":"^17.0.1","@commitlint/config-conventional":"^17.0.0","@vue/cli-plugin-babel":"~5.0.0","@vue/cli-plugin-eslint":"~5.0.0","@vue/cli-service":"~5.0.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-vue":"^8.0.3","lint-staged":"^11.1.2","prettier":"^2.4.1","sass":"^1.32.7","sass-loader":"^12.0.0","standard-version":"^9.5.0","vue-template-compiler":"^2.6.14"},"gitHooks":{"pre-commit":"lint-staged","commit-msg":"commitlint -E GIT_PARAMS"},"repository":{"type":"git","url":"git+https://github.com/BreathlessWay/element-image-preview.git"},"homepage":"https://github.com/BreathlessWay/element-image-preview/blob/main/README.md","gitHead":"cebe45a0b5f67456d973a7abb0215b974732699d","bugs":{"url":"https://github.com/BreathlessWay/element-image-preview/issues"},"_id":"@breathlessway/element-image-preview@0.0.1","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","_npmUser":{"name":"breathlessway","email":"731005087@qq.com"},"dist":{"integrity":"sha512-OniB5p8gjbgziths6mZhr9CWiKAwDPRAjJbrXC7HidcTiFGRV0YcufNSdaLT4Wi69Y9RBNwh1ntGefKW1MM6Fw==","shasum":"ab992432921e99459504fd2134948183d6c2e2fe","tarball":"https://registry.npmjs.org/@breathlessway/element-image-preview/-/element-image-preview-0.0.1.tgz","fileCount":25,"unpackedSize":615743,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE+Uy3J0y/ekkZCIPQbv0zsytkivaF1fcQMQEF+eoMpYAiBV4ZWpCNq4vqxDz5rceL11Y4hU8xxRdiHt+kjDtxvPew=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJij6LtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryQA//VcE+njh7soWBFu+mAZMXQun+6NG74kCwjfZdEYvl1KZ2Tzmo\r\n6DmtlHBpktXCpFgq5Ry+4JcEXJZhidfGK/bRJWWABfmeKTQglYeoGG0wemB7\r\nWcQedCYiiphZ+pZFsMvluy1szUn2pvQ29EY/Fg9/RMwLxj5m4K3u0XI+E4Fi\r\ncESJfmvhnBBt/1/ZqrEP5Jjo9m5Tt2F7oLxU2xLeJlXTzCNBoJqBDDzfdV6Z\r\nsyrrkJca6Zc0wNZGYZU1sJLZy5VkFLciC1O8pEZO/pCRaYAY9OLtMdFCQE7b\r\nE/G3ctnCCjssVliJ2Ncs63FuMcaPJWpDGT/sS59GxAZT57Pdhi3RlSpSuFRj\r\nFWhoFC+Tex30nDDcdle79CVXbmBlHx7sSnqrDH39x9GwoICi5pfywv7ANiaA\r\nVd8EEFFFUWQVHAZC1dKe/sOnYc073KSGEbPn4Nt/LkHj2JC4RkPG6WpmVdmR\r\njYuvBZ6m2ZJFM2UjUpJhFXZZfs1ld5DJRIjtGfGyOL+yA/cDwGI1GjoKxjrF\r\nr/eThX9Pe5CEvN7ryWn+wA4a6t7Qm56mcfWOJwLQ5B3WukN+TWc4GrQ00G46\r\nhIZPQ7G9p9yiCrffpJhIiT45DYnQ1809JTJUJsgJaNnct2/yGUbuNW/3NV4a\r\n0ANPlSs931STAFTH9bGhuRypP+PbrTa+mqA=\r\n=1KcA\r\n-----END PGP SIGNATURE-----\r\n"},"directories":{},"maintainers":[{"name":"breathlessway","email":"731005087@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/element-image-preview_0.0.1_1653580525761_0.60738185675283"},"_hasShrinkwrap":false},"0.0.2":{"name":"@breathlessway/element-image-preview","description":"element-image-preview component","version":"0.0.2","private":false,"scripts":{"serve":"vue-cli-service serve","build":"vue-cli-service build","lint":"vue-cli-service lint","lib":"vue-cli-service build --target lib --name element-image-preview src/components/index.js","release":"standard-version","prepublishOnly":"npm run lib","deploy":"npm run release && git push --follow-tags origin main && npm publish --access public"},"main":"dist/element-image-preview.umd.min.js","author":{"name":"BreathlessWay"},"license":"MIT","keywords":["vue","element-ui"],"dependencies":{"core-js":"^3.8.3","vue":"^2.6.14"},"devDependencies":{"@babel/core":"^7.12.16","@babel/eslint-parser":"^7.12.16","@commitlint/cli":"^17.0.1","@commitlint/config-conventional":"^17.0.0","@vue/cli-plugin-babel":"~5.0.0","@vue/cli-plugin-eslint":"~5.0.0","@vue/cli-service":"~5.0.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-vue":"^8.0.3","lint-staged":"^11.1.2","prettier":"^2.4.1","sass":"^1.32.7","sass-loader":"^12.0.0","standard-version":"^9.5.0","vue-template-compiler":"^2.6.14"},"gitHooks":{"pre-commit":"lint-staged","commit-msg":"commitlint -E GIT_PARAMS"},"repository":{"type":"git","url":"git+https://github.com/BreathlessWay/element-image-preview.git"},"homepage":"https://github.com/BreathlessWay/element-image-preview/blob/main/README.md","gitHead":"295c1b80898c43ceb77e224c7140e79faa13fa48","bugs":{"url":"https://github.com/BreathlessWay/element-image-preview/issues"},"_id":"@breathlessway/element-image-preview@0.0.2","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","_npmUser":{"name":"breathlessway","email":"731005087@qq.com"},"dist":{"integrity":"sha512-GlXwGeZUzSuqttTo9awAUvKgcY+SlxDDFveDGJbemvm57AFC9X7jA8XyWqP3uInpWKn4TuLm0AdZp7RftU7GRQ==","shasum":"33100b4b08bc2be9e11d83552895bc1842701b2c","tarball":"https://registry.npmjs.org/@breathlessway/element-image-preview/-/element-image-preview-0.0.2.tgz","fileCount":12,"unpackedSize":592313,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXxj2n8mNUPJzRUuai7XQ9BWCL48X8RtxZMcfQQ3ZufQIhALNuG8CSIPVpYkrBDwdP0WcNwoYBKIGJFWVg0fVLMD/F"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJij6npACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0lw//VaSeB1BjDaJV7jhQD9CWaa1oIRohWcvN9FOws3c4ijBKYf6G\r\n4oKrgpxVv296rKEIa6JR2Zl26kajy5nhusvGjqm6AXUIapbI8N1cRsnHmZZl\r\nwdlZ/tGyHjXcLAdbW2KL8zhZrbEvmyO8BngnFuOOnN2MjtlMW2P9REsPPbGg\r\n5L3Fa7QQ7b19ZwCp3ne3MeoGaT2G4mrQaB8stHEXQrDv42uV+wpB4PeAWFep\r\nmpCpwTju2UOFex/Q181kAfzW1mJ213LGgpHgJbxa6nLU1w6td1koTSP7zaPG\r\nC40hhtgs0gr8aL92NAJBSuB0DRtqJ+XbrwZjT7Piww0UWV0yE3XBvGeyU4pW\r\nslWb688EvxQ++WG9JgLIbyZDVzdypMTH03XwW/7X3sgUyNeQ/47qSmN6yL6w\r\n6Qc+tIdXLwk+AtHUSAl5Hnm8iBG6Hl1iNuk35A/9PWixen+fVP0fImKalQbi\r\n5GqwsIoYSkW5q1Z+FM6FBCoRhFZ2CQg/TDCucKfeRp8v7qhWtSivdXfETTej\r\nmLCtov7j7OaIDJwXeiLguRIrlhRjl6lWhy6CzUhsZJFqvBbkiPpVfwDayyRG\r\nOwlqE/3/3GOdr2zK5UdFx30nEbz/o/16yUgnE04YX3QN/cM3vffXlN4Va4iO\r\ny/Vb1SZZxZCY46fD9wjqy9CJZoq5d8UO4Bs=\r\n=1p32\r\n-----END PGP SIGNATURE-----\r\n"},"directories":{},"maintainers":[{"name":"breathlessway","email":"731005087@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/element-image-preview_0.0.2_1653582313601_0.6636213210017818"},"_hasShrinkwrap":false}},"time":{"created":"2022-05-26T15:55:25.721Z","0.0.1":"2022-05-26T15:55:25.961Z","modified":"2022-05-26T16:25:13.893Z","0.0.2":"2022-05-26T16:25:13.822Z"},"maintainers":[{"name":"breathlessway","email":"731005087@qq.com"}],"description":"element-image-preview component","homepage":"https://github.com/BreathlessWay/element-image-preview/blob/main/README.md","keywords":["vue","element-ui"],"repository":{"type":"git","url":"git+https://github.com/BreathlessWay/element-image-preview.git"},"author":{"name":"BreathlessWay"},"bugs":{"url":"https://github.com/BreathlessWay/element-image-preview/issues"},"license":"MIT","readme":"# element-image-preview\n\n## ImageViewer 图片预览\n\n图片预览组件，从 [element-ui](https://element.eleme.cn/#/zh-CN/component/image) 的图片组件中剥离出来的单独的图片预览功能，参数和 element-ui 一致，主要为解决当预览图片需要通过接口获取高清图片地址时，添加了 `onFetchImage` 参数，当没有次参数时，默认使用 `urlList` 展示，若有，当切换图片会先调用 `onFetchImage` 获取真实要预览的图片地址\n\n### 基础用法\n\n:::demo 可通过组件形式调用\n\n```html\n<div class=\"demo-image\">\n  <image-preview :urlList=\"url\"></image-preview>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        url: \"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\",\n      };\n    },\n  };\n</script>\n```\n\n:::demo 也可通过 `this.$preview` 调用\n\n```html\n<div class=\"demo-image__preview\">\n  <article @click=\"preview\">Image Viewer</article>\n</div>\n\n<script>\n  export default {\n    methods: {\n      preview() {\n        this.$preview({\n          urlList: [\n            \"https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg\",\n            \"https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg\",\n          ],\n        });\n      },\n    },\n  };\n</script>\n```\n### 异步获取展示图片地址\n\n:::demo 也可通过 `this.$preview` 调用\n\n```html\n<div class=\"demo-image__preview\">\n  <article @click=\"preview\">Image Viewer</article>\n</div>\n\n<script>\n  export default {\n      methods: {\n          preview() {\n              this.$preview({\n                  urlList: [\n                      \"https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg\",\n                      \"https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg\",\n                  ],\n                  onFetchImage: this.onFetchImage,\n              });\n          },\n          onFetchImage(v) {\n              console.log(v);\n              return new Promise((resolve) => {\n                  setTimeout(() => {\n                      resolve(\n                              \"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\"\n                      );\n                  });\n              });\n          },\n      },\n  };\n</script>\n```\n\n:::\n\n### Attributes\n\n| 参数         | 说明                                           | 类型            | 可选值 | 默认值  |\n| ------------ | ---------------------------------------------- | --------------- | ------ |------|\n| urlList      | 预览图片预览地址                               | Array           | —      | []   |\n| initialIndex | 默认激活的图片索引                             | Number          | —      | 0    |\n| z-index      | 设置图片预览的 z-index                         | Number          | —      | 2000 |\n| initialIndex | 默认激活的图片索引                             | Number          | —      | 0    |\n| maskClosable | 点击蒙层关闭预览                               | Boolean         | —      | true |\n| onSwitch     | 切换图片时的回调，接受当前激活的图片索引参数   | Function(index) | —      | -    |\n| onClose      | 关闭预览时的回调                               | Function()      | —      | -    |\n| onFetchImage | 异步获取图片的回调，接受当前激活的图片地址参数 | Function(url)   | —      | -    |\n\n\n### Tips\n\n1. vue 的过度动画 transition，可以通过 appear attribute 设置节点在初始渲染的过渡\n2. `npm run deploy` 时报 `.git/hooks/pre-commit: line 48: node: command not found`\n错误，解决方法\n    - whereis node\n    - ln -s node路径 /usr/local/bin/node\n","readmeFilename":"README.md"}