![](\\\"../assets/previewer_delete_icon.png\\\"){kind=icon}
\\n \\n \\nPhotoSwipe 本身要求设置宽高，Previewer 组件会尝试对没有设置宽高的图片先加载再显示，可能会造成性能问题或者宽带浪费。\\n相关 issue:#2321
\\n\"\n }]\n },\n \"extra\": {\n \"en\": \"\\n> please avoid using large pictures or they may crash your browser(especially on Android).\\n\\nexample for list:\\n\\n``` js\\n[{\\n msrc: 'https://placekitten.com/500/250',\\n src: 'https://placekitten.com/800/400',\\n w: 600,\\n h: 400\\n},\\n{\\n src: 'https://placekitten.com/1200/900',\\n msrc: 'https://placekitten.com/120/90', // thumbnail\\n w: 1200,\\n h: 900\\n}]\\n```\\n\\n::: warning\\nbefore v2.4.0, `w` and `h` should be specified.\\n:::\\n\\nPrevewing an image by index:\\n\\n``` js\\nthis.$refs.previewer.show(index)\\n```\\n\",\n \"zh-CN\": \"\\n> 注意避免使用过大图片，否则可能会出现卡顿黑屏的情况(尤其是在 Android 机子上) #2514。\\n\\nlist的数据示例如图：\\n\\n``` js\\n[{\\n src: 'https://placekitten.com/800/400',\\n w: 600,\\n h: 400\\n},\\n{\\n src: 'https://placekitten.com/1200/900',\\n msrc: 'https://placekitten.com/120/90', // 缩略图\\n w: 1200,\\n h: 900\\n}]\\n```\\n\\n::: warning\\n注意在 v2.4.0 之前 w 和 h 都必须填写\\n:::\\n\\n显示特定index的图片，使用`ref`:\\n\\n``` js\\nthis.$refs.previewer.show(index)\\n```\\n\\n注意，当你自定义添加按钮时，需要在 photoswipe 选项设置 clickable 元素，否则点击将没有响应
\\n\\n\\n``` html\\n\\n \\n \\n$1');\n }\n },\n mounted: function mounted() {\n var _this = this;\n\n return __WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_asyncToGenerator___default()(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_regenerator___default.a.mark(function _callee() {\n var rs;\n return __WEBPACK_IMPORTED_MODULE_0_babel_runtime_regenerator___default.a.wrap(function _callee$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n _context.next = 2;\n return __WEBPACK_IMPORTED_MODULE_2_axios___default.a.get('https://api.github.com/search/issues?q=repo:airyland/vux%20label:component/' + _this.componentName);\n\n case 2:\n rs = _context.sent;\n\n _this.issues = rs.data.items;\n _this.hasReady = true;\n\n case 5:\n case \"end\":\n return _context.stop();\n }\n }\n }, _callee, _this);\n }))();\n },\n\n watch: {\n sourceCodeDialogVisibility: function sourceCodeDialogVisibility(val) {\n var _this2 = this;\n\n return __WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_asyncToGenerator___default()(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_regenerator___default.a.mark(function _callee2() {\n var mask;\n return __WEBPACK_IMPORTED_MODULE_0_babel_runtime_regenerator___default.a.wrap(function _callee2$(_context2) {\n while (1) {\n switch (_context2.prev = _context2.next) {\n case 0:\n if (!val) {\n _context2.next = 5;\n break;\n }\n\n _context2.next = 3;\n return _this2.$nextTick();\n\n case 3:\n mask = document.querySelector('.v-modal');\n\n mask && mask.addEventListener('click', function () {\n _this2.sourceCodeDialogVisibility = false;\n });\n\n case 5:\n case \"end\":\n return _context2.stop();\n }\n }\n }, _callee2, _this2);\n }))();\n }\n },\n methods: {\n onCopyError: function onCopyError() {\n this.$message({\n type: 'error',\n message: 'copy fail!'\n });\n },\n onCopy: function onCopy() {\n this.$message({\n type: 'success',\n message: 'copy done!'\n });\n },\n showSourceCode: function showSourceCode() {\n this.sourceCodeDialogVisibility = true;\n },\n getTypeHTML: function getTypeHTML(type) {\n type = type || 'String';\n if (/,/.test(type)) {\n var list = type.split(',').map(function (one) {\n return one.replace(/^s+|s+$/g, '');\n }).map(function (one) {\n var type = one ? one.toLowerCase() : 'string';\n return '' + type + '';\n });\n return list.join('