Skip to content

V
vue-gic-img-preview
Commit 90a77255 by 无尘
Options

add:增加上传图片预览插件

parent 450b9731
Showing with 433 additions and 2 deletions
.babelrc 0 → 100644
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
.editorconfig 0 → 100644
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
.gitignore 0 → 100644
.DS_Store
node_modules/
npm-debug.log
yarn-error.log
package-lock.json
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
# *src
README.md
# 预览插件 # vue-gic-img-preview
\ No newline at end of file
> A Vue.js vue-gic-img-preview Plugin
## Install
```shell
npm install @gic-test/vue-gic-img-preview -S
```
## how to use
```
// main.js
import vueGicImgPreview from 'vue-gic-img-preview'
Vue.use(vueGicImgPreview)
// 使用页面
<img :src="src" alt="img" @mouseover="showImage(src)"/> // 图片所在标签, 图片 src 参数随各个调用地方
<vue-gic-img-preview :imgUrl="imgUrl" :imgShowFlag="imgShowFlag" @hideImage="hideImage"></vue-gic-img-preview>
data() {
return {
// 可传参数
imgShowFlag: false, // 是否弹框显示,true: 显示；false: 不显示
imgUrl: '', // 传递的图片 src
}
}
methods: {
showImage(src) {
var that = this
if(!src || src == ''){
return false;
}
that.imgShowFlag = true;
that.imgUrl = src;
},
hideImage(val) {
var that = this
that.imgShowFlag = val
}
},
```
dist/vue-gic-img-preview.js 0 → 100644
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("vue-gic-img-preview",[],t):"object"==typeof exports?exports["vue-gic-img-preview"]=t():e["vue-gic-img-preview"]=t()}("undefined"!=typeof self?self:this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/dist/",t(t.s=1)}([function(e,t,n){"use strict";t.a={name:"vue-gic-img-preview",props:{imgUrl:String,imgShowFlag:Boolean},data:function(){return{showFlag:!1,imgSrc:""}},methods:{hideImage:function(){var e=this;e.showFlag=!1,e.$emit("hideImage",e.showFlag)},hidePanel:function(){var e=this;e.showFlag&&e.hideImage()}},watch:{imgUrl:function(e){this.imgSrc=e},imgShowFlag:function(e){this.showFlag=e}},mounted:function(){var e=this;e.imgSrc=this.imgUrl,this.showFlag=e.imgShowFlag,document.addEventListener("click",e.hidePanel,!1)}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(2),i={install:function(e,t){e.component(r.a.name,r.a)}};"undefined"!=typeof window&&window.Vue&&window.Vue.use(i),t.default=i},function(e,t,n){"use strict";function r(e){n(3)}var i=n(0),o=n(9),a=n(8),s=r,c=a(i.a,o.a,!1,s,"data-v-1e11a38c",null);t.a=c.exports},function(e,t,n){var r=n(4);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);n(6)("333acad7",r,!0,{})},function(e,t,n){t=e.exports=n(5)(!1),t.push([e.i,".image-view-contain[data-v-1e11a38c]{position:relative;width:100%}.image-view-body[data-v-1e11a38c]{position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:5000;display:-webkit-flex;display:flex;justify-content:center;align-items:center;padding:24px;background:#fff;text-align:center;border-radius:4px;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.15);box-shadow:0 4px 12px rgba(0,0,0,.15);overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.el-icon-close[data-v-1e11a38c]{position:absolute;top:10px;right:10px;font-size:14px;color:#909399;cursor:pointer}.image-view-body img[data-v-1e11a38c]{max-width:452px;max-height:452px}.image-view-mask[data-v-1e11a38c]{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:2000}",""])},function(e,t){function n(e,t){var n=e[1]||"",i=e[3];if(!i)return n;if(t&&"function"==typeof btoa){var o=r(i);return[n].concat(i.sources.map(function(e){return"/*# sourceURL="+i.sourceRoot+e+" */"})).concat([o]).join("\n")}return[n].join("\n")}function r(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r=n(t,e);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},i=0;i<this.length;i++){var o=this[i][0];"number"==typeof o&&(r[o]=!0)}for(i=0;i<e.length;i++){var a=e[i];"number"==typeof a[0]&&r[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),t.push(a))}},t}},function(e,t,n){function r(e){for(var t=0;t<e.length;t++){var n=e[t],r=d[n.id];if(r){r.refs++;for(var i=0;i<r.parts.length;i++)r.parts[i](n.parts[i]);for(;i<n.parts.length;i++)r.parts.push(o(n.parts[i]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{for(var a=[],i=0;i<n.parts.length;i++)a.push(o(n.parts[i]));d[n.id]={id:n.id,refs:1,parts:a}}}}function i(){var e=document.createElement("style");return e.type="text/css",f.appendChild(e),e}function o(e){var t,n,r=document.querySelector("style["+m+'~="'+e.id+'"]');if(r){if(g)return h;r.parentNode.removeChild(r)}if(b){var o=p++;r=l||(l=i()),t=a.bind(null,r,o,!1),n=a.bind(null,r,o,!0)}else r=i(),t=s.bind(null,r),n=function(){r.parentNode.removeChild(r)};return t(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;t(e=r)}else n()}}function a(e,t,n,r){var i=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=x(t,i);else{var o=document.createTextNode(i),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(o,a[t]):e.appendChild(o)}}function s(e,t){var n=t.css,r=t.media,i=t.sourceMap;if(r&&e.setAttribute("media",r),v.ssrId&&e.setAttribute(m,t.id),i&&(n+="\n/*# sourceURL="+i.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */"),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}var c="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!c)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var u=n(7),d={},f=c&&(document.head||document.getElementsByTagName("head")[0]),l=null,p=0,g=!1,h=function(){},v=null,m="data-vue-ssr-id",b="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,n,i){g=n,v=i||{};var o=u(e,t);return r(o),function(t){for(var n=[],i=0;i<o.length;i++){var a=o[i],s=d[a.id];s.refs--,n.push(s)}t?(o=u(e,t),r(o)):o=[];for(var i=0;i<n.length;i++){var s=n[i];if(0===s.refs){for(var c=0;c<s.parts.length;c++)s.parts[c]();delete d[s.id]}}}};var x=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=function(e,t){for(var n=[],r={},i=0;i<t.length;i++){var o=t[i],a=o[0],s=o[1],c=o[2],u=o[3],d={id:e+":"+i,css:s,media:c,sourceMap:u};r[a]?r[a].parts.push(d):n.push(r[a]={id:a,parts:[d]})}return n}},function(e,t){e.exports=function(e,t,n,r,i,o){var a,s=e=e||{},c=typeof e.default;"object"!==c&&"function"!==c||(a=e,s=e.default);var u="function"==typeof s?s.options:s;t&&(u.render=t.render,u.staticRenderFns=t.staticRenderFns,u._compiled=!0),n&&(u.functional=!0),i&&(u._scopeId=i);var d;if(o?(d=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},u._ssrRegister=d):r&&(d=r),d){var f=u.functional,l=f?u.render:u.beforeCreate;f?(u._injectStyles=d,u.render=function(e,t){return d.call(t),l(e,t)}):u.beforeCreate=l?[].concat(l,d):[d]}return{esModule:a,exports:s,options:u}}},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return e.showFlag?n("div",{staticClass:"image-view-contain"},[n("transition",{attrs:{name:"fade"}},[n("div",{staticClass:"image-view-body",on:{click:function(t){return t.stopPropagation(),e.hideImage(t)}}},[n("i",{staticClass:"el-icon-close"}),e._v(" "),n("img",{attrs:{src:e.imgSrc,alt:""}})])])],1):e._e()},i=[],o={render:r,staticRenderFns:i};t.a=o}])});
//# sourceMappingURL=vue-gic-img-preview.js.map
\ No newline at end of file
dist/vue-gic-img-preview.js.map 0 → 100644
{"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///vue-gic-img-preview.js","webpack:///webpack/bootstrap 7eb62f61c6ad8910623d","webpack:///src/lib/vue-gic-img-preview.vue","webpack:///./src/lib/index.js","webpack:///./src/lib/vue-gic-img-preview.vue","webpack:///./src/lib/vue-gic-img-preview.vue?ad31","webpack:///./src/lib/vue-gic-img-preview.vue?903c","webpack:///./node_modules/css-loader/lib/css-base.js","webpack:///./node_modules/vue-style-loader/lib/addStylesClient.js","webpack:///./node_modules/vue-style-loader/lib/listToStyles.js","webpack:///./node_modules/vue-loader/lib/component-normalizer.js","webpack:///./src/lib/vue-gic-img-preview.vue?422f"],"names":["root","factory","exports","module","define","amd","self","this","modules","__webpack_require__","moduleId","installedModules","i","l","call","m","c","d","name","getter","o","Object","defineProperty","configurable","enumerable","get","n","__esModule","object","property","prototype","hasOwnProperty","p","s","__webpack_exports__","props","imgUrl","String","imgShowFlag","Boolean","data","showFlag","imgSrc","methods","hideImage","that","$emit","hidePanel","watch","newVal","mounted","document","addEventListener","value","__WEBPACK_IMPORTED_MODULE_0__vue_gic_img_preview_vue__","ImgPreview","install","Vue","options","component","vueGicImgPreview","window","use","injectStyle","ssrContext","__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_vue_gic_img_preview_vue__","__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_1e11a38c_hasScoped_true_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_vue_gic_img_preview_vue__","normalizeComponent","__vue_styles__","Component","content","locals","push","cssWithMappingToString","item","useSourceMap","cssMapping","btoa","sourceMapping","toComment","concat","sources","map","source","sourceRoot","join","sourceMap","unescape","encodeURIComponent","JSON","stringify","list","toString","mediaQuery","alreadyImportedModules","length","id","addStylesToDom","styles","domStyle","stylesInDom","refs","j","parts","addStyle","createStyleElement","styleElement","createElement","type","head","appendChild","obj","update","remove","querySelector","ssrIdKey","isProduction","noop","parentNode","removeChild","isOldIE","styleIndex","singletonCounter","singletonElement","applyToSingletonTag","bind","applyToTag","newObj","css","media","index","styleSheet","cssText","replaceText","cssNode","createTextNode","childNodes","insertBefore","setAttribute","ssrId","firstChild","hasDocument","DEBUG","Error","listToStyles","getElementsByTagName","navigator","test","userAgent","toLowerCase","parentId","_isProduction","_options","newList","mayRemove","textStore","replacement","filter","newStyles","part","rawScriptExports","compiledTemplate","functionalTemplate","injectStyles","scopeId","moduleIdentifier","esModule","scriptExports","default","render","staticRenderFns","_compiled","functional","_scopeId","hook","context","$vnode","parent","__VUE_SSR_CONTEXT__","_registeredComponents","add","_ssrRegister","existing","beforeCreate","_injectStyles","h","_vm","_h","$createElement","_c","_self","staticClass","attrs","on","click","$event","stopPropagation","_v","src","alt","_e","esExports"],"mappings":"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","file":"vue-gic-img-preview.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"vue-gic-img-preview\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"vue-gic-img-preview\"] = factory();\n\telse\n\t\troot[\"vue-gic-img-preview\"] = factory();\n})(typeof self !== 'undefined' ? self : this, function() {\nreturn \n\n\n// WEBPACK FOOTER //\n// webpack/universalModuleDefinition","(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"vue-gic-img-preview\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"vue-gic-img-preview\"] = factory();\n\telse\n\t\troot[\"vue-gic-img-preview\"] = factory();\n})(typeof self !== 'undefined' ? self : this, function() {\nreturn /******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, {\n/******/ \t\t\t\tconfigurable: false,\n/******/ \t\t\t\tenumerable: true,\n/******/ \t\t\t\tget: getter\n/******/ \t\t\t});\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"/dist/\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(__webpack_require__.s = 1);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n/* harmony default export */ __webpack_exports__[\"a\"] = ({\n name: 'vue-gic-img-preview',\n props: {\n imgUrl: String,\n imgShowFlag: Boolean\n },\n data: function data() {\n return {\n showFlag: false,\n imgSrc: ''\n };\n },\n\n methods: {\n hideImage: function hideImage() {\n var that = this;\n that.showFlag = false;\n that.$emit('hideImage', that.showFlag);\n },\n hidePanel: function hidePanel() {\n var that = this;\n if (!!that.showFlag) {\n that.hideImage();\n }\n }\n },\n watch: {\n imgUrl: function imgUrl(newVal) {\n this.imgSrc = newVal;\n },\n imgShowFlag: function imgShowFlag(newVal) {\n this.showFlag = newVal;\n }\n },\n mounted: function mounted() {\n var that = this;\n that.imgSrc = this.imgUrl;\n this.showFlag = that.imgShowFlag;\n\n // 监听点击隐藏弹层\n document.addEventListener('click', that.hidePanel, false);\n }\n});\n\n/***/ }),\n/* 1 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__vue_gic_img_preview_vue__ = __webpack_require__(2);\n // 导入组件\n\nvar ImgPreview = {\n install: function install(Vue, options) {\n Vue.component(__WEBPACK_IMPORTED_MODULE_0__vue_gic_img_preview_vue__[\"a\" /* default */].name, __WEBPACK_IMPORTED_MODULE_0__vue_gic_img_preview_vue__[\"a\" /* default */]); // vueImagesToast.name 组件的name属性\n // 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已\n // Vue.prototype.$xxx // 最终可以在任何地方通过 this.$xxx 调用\n // 虽然没有明确规定用$开头 但是大家都默认遵守这个规定\n }\n};\nif (typeof window !== 'undefined' && window.Vue) {\n window.Vue.use(ImgPreview);\n}\n/* harmony default export */ __webpack_exports__[\"default\"] = (ImgPreview);\n\n// export {\n// vueImagesToasts\n// }\n\n/***/ }),\n/* 2 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_vue_gic_img_preview_vue__ = __webpack_require__(0);\n/* unused harmony namespace reexport */\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_1e11a38c_hasScoped_true_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_vue_gic_img_preview_vue__ = __webpack_require__(9);\nfunction injectStyle (ssrContext) {\n __webpack_require__(3)\n}\nvar normalizeComponent = __webpack_require__(8)\n/* script */\n\n\n/* template */\n\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = \"data-v-1e11a38c\"\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_vue_gic_img_preview_vue__[\"a\" /* default */],\n __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_1e11a38c_hasScoped_true_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_vue_gic_img_preview_vue__[\"a\" /* default */],\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\n/* harmony default export */ __webpack_exports__[\"a\"] = (Component.exports);\n\n\n/***/ }),\n/* 3 */\n/***/ (function(module, exports, __webpack_require__) {\n\n// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = __webpack_require__(4);\nif(typeof content === 'string') content = [[module.i, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar update = __webpack_require__(6)(\"333acad7\", content, true, {});\n\n/***/ }),\n/* 4 */\n/***/ (function(module, exports, __webpack_require__) {\n\nexports = module.exports = __webpack_require__(5)(false);\n// imports\n\n\n// module\nexports.push([module.i, \".image-view-contain[data-v-1e11a38c]{position:relative;width:100%}.image-view-body[data-v-1e11a38c]{position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:5000;display:-webkit-flex;display:flex;justify-content:center;align-items:center;padding:24px;background:#fff;text-align:center;border-radius:4px;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.15);box-shadow:0 4px 12px rgba(0,0,0,.15);overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.el-icon-close[data-v-1e11a38c]{position:absolute;top:10px;right:10px;font-size:14px;color:#909399;cursor:pointer}.image-view-body img[data-v-1e11a38c]{max-width:452px;max-height:452px}.image-view-mask[data-v-1e11a38c]{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:2000}\", \"\"]);\n\n// exports\n\n\n/***/ }),\n/* 5 */\n/***/ (function(module, exports) {\n\n/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\nmodule.exports = function(useSourceMap) {\n\tvar list = [];\n\n\t// return the list of modules as css string\n\tlist.toString = function toString() {\n\t\treturn this.map(function (item) {\n\t\t\tvar content = cssWithMappingToString(item, useSourceMap);\n\t\t\tif(item[2]) {\n\t\t\t\treturn \"@media \" + item[2] + \"{\" + content + \"}\";\n\t\t\t} else {\n\t\t\t\treturn content;\n\t\t\t}\n\t\t}).join(\"\");\n\t};\n\n\t// import a list of modules into the list\n\tlist.i = function(modules, mediaQuery) {\n\t\tif(typeof modules === \"string\")\n\t\t\tmodules = [[null, modules, \"\"]];\n\t\tvar alreadyImportedModules = {};\n\t\tfor(var i = 0; i < this.length; i++) {\n\t\t\tvar id = this[i][0];\n\t\t\tif(typeof id === \"number\")\n\t\t\t\talreadyImportedModules[id] = true;\n\t\t}\n\t\tfor(i = 0; i < modules.length; i++) {\n\t\t\tvar item = modules[i];\n\t\t\t// skip already imported module\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\n\t\t\t// when a module is imported multiple times with different media queries.\n\t\t\t// I hope this will never occur (Hey this way we have smaller bundles)\n\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\n\t\t\t\tif(mediaQuery && !item[2]) {\n\t\t\t\t\titem[2] = mediaQuery;\n\t\t\t\t} else if(mediaQuery) {\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\n\t\t\t\t}\n\t\t\t\tlist.push(item);\n\t\t\t}\n\t\t}\n\t};\n\treturn list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n\tvar content = item[1] || '';\n\tvar cssMapping = item[3];\n\tif (!cssMapping) {\n\t\treturn content;\n\t}\n\n\tif (useSourceMap && typeof btoa === 'function') {\n\t\tvar sourceMapping = toComment(cssMapping);\n\t\tvar sourceURLs = cssMapping.sources.map(function (source) {\n\t\t\treturn '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'\n\t\t});\n\n\t\treturn [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n\t}\n\n\treturn [content].join('\\n');\n}\n\n// Adapted from convert-source-map (MIT)\nfunction toComment(sourceMap) {\n\t// eslint-disable-next-line no-undef\n\tvar base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n\tvar data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;\n\n\treturn '/*# ' + data + ' */';\n}\n\n\n/***/ }),\n/* 6 */\n/***/ (function(module, exports, __webpack_require__) {\n\n/*\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n Modified by Evan You @yyx990803\n*/\n\nvar hasDocument = typeof document !== 'undefined'\n\nif (typeof DEBUG !== 'undefined' && DEBUG) {\n if (!hasDocument) {\n throw new Error(\n 'vue-style-loader cannot be used in a non-browser environment. ' +\n \"Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.\"\n ) }\n}\n\nvar listToStyles = __webpack_require__(7)\n\n/*\ntype StyleObject = {\n id: number;\n parts: Array<StyleObjectPart>\n}\n\ntype StyleObjectPart = {\n css: string;\n media: string;\n sourceMap: ?string\n}\n*/\n\nvar stylesInDom = {/*\n [id: number]: {\n id: number,\n refs: number,\n parts: Array<(obj?: StyleObjectPart) => void>\n }\n*/}\n\nvar head = hasDocument && (document.head || document.getElementsByTagName('head')[0])\nvar singletonElement = null\nvar singletonCounter = 0\nvar isProduction = false\nvar noop = function () {}\nvar options = null\nvar ssrIdKey = 'data-vue-ssr-id'\n\n// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>\n// tags it will allow on a page\nvar isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase())\n\nmodule.exports = function (parentId, list, _isProduction, _options) {\n isProduction = _isProduction\n\n options = _options || {}\n\n var styles = listToStyles(parentId, list)\n addStylesToDom(styles)\n\n return function update (newList) {\n var mayRemove = []\n for (var i = 0; i < styles.length; i++) {\n var item = styles[i]\n var domStyle = stylesInDom[item.id]\n domStyle.refs--\n mayRemove.push(domStyle)\n }\n if (newList) {\n styles = listToStyles(parentId, newList)\n addStylesToDom(styles)\n } else {\n styles = []\n }\n for (var i = 0; i < mayRemove.length; i++) {\n var domStyle = mayRemove[i]\n if (domStyle.refs === 0) {\n for (var j = 0; j < domStyle.parts.length; j++) {\n domStyle.parts[j]()\n }\n delete stylesInDom[domStyle.id]\n }\n }\n }\n}\n\nfunction addStylesToDom (styles /* Array<StyleObject> */) {\n for (var i = 0; i < styles.length; i++) {\n var item = styles[i]\n var domStyle = stylesInDom[item.id]\n if (domStyle) {\n domStyle.refs++\n for (var j = 0; j < domStyle.parts.length; j++) {\n domStyle.parts[j](item.parts[j])\n }\n for (; j < item.parts.length; j++) {\n domStyle.parts.push(addStyle(item.parts[j]))\n }\n if (domStyle.parts.length > item.parts.length) {\n domStyle.parts.length = item.parts.length\n }\n } else {\n var parts = []\n for (var j = 0; j < item.parts.length; j++) {\n parts.push(addStyle(item.parts[j]))\n }\n stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }\n }\n }\n}\n\nfunction createStyleElement () {\n var styleElement = document.createElement('style')\n styleElement.type = 'text/css'\n head.appendChild(styleElement)\n return styleElement\n}\n\nfunction addStyle (obj /* StyleObjectPart */) {\n var update, remove\n var styleElement = document.querySelector('style[' + ssrIdKey + '~=\"' + obj.id + '\"]')\n\n if (styleElement) {\n if (isProduction) {\n // has SSR styles and in production mode.\n // simply do nothing.\n return noop\n } else {\n // has SSR styles but in dev mode.\n // for some reason Chrome can't handle source map in server-rendered\n // style tags - source maps in <style> only works if the style tag is\n // created and inserted dynamically. So we remove the server rendered\n // styles and inject new ones.\n styleElement.parentNode.removeChild(styleElement)\n }\n }\n\n if (isOldIE) {\n // use singleton mode for IE9.\n var styleIndex = singletonCounter++\n styleElement = singletonElement || (singletonElement = createStyleElement())\n update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)\n remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)\n } else {\n // use multi-style-tag mode in all other cases\n styleElement = createStyleElement()\n update = applyToTag.bind(null, styleElement)\n remove = function () {\n styleElement.parentNode.removeChild(styleElement)\n }\n }\n\n update(obj)\n\n return function updateStyle (newObj /* StyleObjectPart */) {\n if (newObj) {\n if (newObj.css === obj.css &&\n newObj.media === obj.media &&\n newObj.sourceMap === obj.sourceMap) {\n return\n }\n update(obj = newObj)\n } else {\n remove()\n }\n }\n}\n\nvar replaceText = (function () {\n var textStore = []\n\n return function (index, replacement) {\n textStore[index] = replacement\n return textStore.filter(Boolean).join('\\n')\n }\n})()\n\nfunction applyToSingletonTag (styleElement, index, remove, obj) {\n var css = remove ? '' : obj.css\n\n if (styleElement.styleSheet) {\n styleElement.styleSheet.cssText = replaceText(index, css)\n } else {\n var cssNode = document.createTextNode(css)\n var childNodes = styleElement.childNodes\n if (childNodes[index]) styleElement.removeChild(childNodes[index])\n if (childNodes.length) {\n styleElement.insertBefore(cssNode, childNodes[index])\n } else {\n styleElement.appendChild(cssNode)\n }\n }\n}\n\nfunction applyToTag (styleElement, obj) {\n var css = obj.css\n var media = obj.media\n var sourceMap = obj.sourceMap\n\n if (media) {\n styleElement.setAttribute('media', media)\n }\n if (options.ssrId) {\n styleElement.setAttribute(ssrIdKey, obj.id)\n }\n\n if (sourceMap) {\n // https://developer.chrome.com/devtools/docs/javascript-debugging\n // this makes source maps inside style tags work properly in Chrome\n css += '\\n/*# sourceURL=' + sourceMap.sources[0] + ' */'\n // http://stackoverflow.com/a/26603875\n css += '\\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'\n }\n\n if (styleElement.styleSheet) {\n styleElement.styleSheet.cssText = css\n } else {\n while (styleElement.firstChild) {\n styleElement.removeChild(styleElement.firstChild)\n }\n styleElement.appendChild(document.createTextNode(css))\n }\n}\n\n\n/***/ }),\n/* 7 */\n/***/ (function(module, exports) {\n\n/**\n * Translates the list format produced by css-loader into something\n * easier to manipulate.\n */\nmodule.exports = function listToStyles (parentId, list) {\n var styles = []\n var newStyles = {}\n for (var i = 0; i < list.length; i++) {\n var item = list[i]\n var id = item[0]\n var css = item[1]\n var media = item[2]\n var sourceMap = item[3]\n var part = {\n id: parentId + ':' + i,\n css: css,\n media: media,\n sourceMap: sourceMap\n }\n if (!newStyles[id]) {\n styles.push(newStyles[id] = { id: id, parts: [part] })\n } else {\n newStyles[id].parts.push(part)\n }\n }\n return styles\n}\n\n\n/***/ }),\n/* 8 */\n/***/ (function(module, exports) {\n\n/* globals __VUE_SSR_CONTEXT__ */\n\n// IMPORTANT: Do NOT use ES2015 features in this file.\n// This module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle.\n\nmodule.exports = function normalizeComponent (\n rawScriptExports,\n compiledTemplate,\n functionalTemplate,\n injectStyles,\n scopeId,\n moduleIdentifier /* server only */\n) {\n var esModule\n var scriptExports = rawScriptExports = rawScriptExports || {}\n\n // ES6 modules interop\n var type = typeof rawScriptExports.default\n if (type === 'object' || type === 'function') {\n esModule = rawScriptExports\n scriptExports = rawScriptExports.default\n }\n\n // Vue.extend constructor export interop\n var options = typeof scriptExports === 'function'\n ? scriptExports.options\n : scriptExports\n\n // render functions\n if (compiledTemplate) {\n options.render = compiledTemplate.render\n options.staticRenderFns = compiledTemplate.staticRenderFns\n options._compiled = true\n }\n\n // functional template\n if (functionalTemplate) {\n options.functional = true\n }\n\n // scopedId\n if (scopeId) {\n options._scopeId = scopeId\n }\n\n var hook\n if (moduleIdentifier) { // server build\n hook = function (context) {\n // 2.3 injection\n context =\n context || // cached call\n (this.$vnode && this.$vnode.ssrContext) || // stateful\n (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional\n // 2.2 with runInNewContext: true\n if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\n context = __VUE_SSR_CONTEXT__\n }\n // inject component styles\n if (injectStyles) {\n injectStyles.call(this, context)\n }\n // register component module identifier for async chunk inferrence\n if (context && context._registeredComponents) {\n context._registeredComponents.add(moduleIdentifier)\n }\n }\n // used by ssr in case component is cached and beforeCreate\n // never gets called\n options._ssrRegister = hook\n } else if (injectStyles) {\n hook = injectStyles\n }\n\n if (hook) {\n var functional = options.functional\n var existing = functional\n ? options.render\n : options.beforeCreate\n\n if (!functional) {\n // inject component registration as beforeCreate hook\n options.beforeCreate = existing\n ? [].concat(existing, hook)\n : [hook]\n } else {\n // for template-only hot-reload because in that case the render fn doesn't\n // go through the normalizer\n options._injectStyles = hook\n // register for functioal component in vue file\n options.render = function renderWithStyleInjection (h, context) {\n hook.call(context)\n return existing(h, context)\n }\n }\n }\n\n return {\n esModule: esModule,\n exports: scriptExports,\n options: options\n }\n}\n\n\n/***/ }),\n/* 9 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nvar render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.showFlag)?_c('div',{staticClass:\"image-view-contain\"},[_c('transition',{attrs:{\"name\":\"fade\"}},[_c('div',{staticClass:\"image-view-body\",on:{\"click\":function($event){$event.stopPropagation();return _vm.hideImage($event)}}},[_c('i',{staticClass:\"el-icon-close\"}),_vm._v(\" \"),_c('img',{attrs:{\"src\":_vm.imgSrc,\"alt\":\"\"}})])])],1):_vm._e()}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\n/* harmony default export */ __webpack_exports__[\"a\"] = (esExports);\n\n/***/ })\n/******/ ]);\n});\n\n\n// WEBPACK FOOTER //\n// vue-gic-img-preview.js"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/dist/\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 1);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 7eb62f61c6ad8910623d","<template>\n <div class=\"image-view-contain\" v-if=\"showFlag\">\n <!-- <div class=\"image-view-mask\" @click.stop=\"hideImage\"></div> -->\n\n <transition name=\"fade\">\n <div class=\"image-view-body\" @click.stop=\"hideImage\">\n <i class=\"el-icon-close\"></i>\n <img :src=\"imgSrc\" alt=\"\"/>\n </div>\n </transition>\n </div>\n</template>\n\n<script>\nexport default {\n name: 'vue-gic-img-preview',\n props:{\n imgUrl: String,\n imgShowFlag: Boolean\n },\n data () {\n return {\n showFlag: false,\n imgSrc: '',\n }\n },\n methods:{\n hideImage() {\n var that = this\n that.showFlag = false\n that.$emit('hideImage',that.showFlag)\n },\n hidePanel() {\n var that = this\n if (!!that.showFlag) {\n that.hideImage()\n }\n }\n },\n watch:{\n imgUrl:function(newVal) {\n this.imgSrc = newVal\n },\n imgShowFlag:function(newVal) {\n this.showFlag = newVal\n },\n },\n mounted() {\n var that = this\n that.imgSrc = this.imgUrl;\n this.showFlag = that.imgShowFlag;\n\n // 监听点击隐藏弹层\n document.addEventListener('click', that.hidePanel, false)\n }\n}\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped>\n.image-view-contain {\n position: relative;\n width: 100%;\n\n}\n\n.image-view-body {\n position: fixed;\n top: 50%;\n left: 50%;\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n z-index: 5000;\n display: -webkit-flex;\n display: flex;\n justify-content: center;\n align-items: center;\n /*width: 520px;\n height: 520px;*/\n padding: 24px;\n background: #fff;\n text-align: center;\n border-radius: 4px;\n -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n overflow: hidden;\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.el-icon-close {\n position: absolute;\n top: 10px;\n right: 10px;\n font-size: 14px;\n color: #909399;\n cursor: pointer;\n}\n\n.image-view-body img {\n /*-webkit-flex: 1;\n -moz-flex: 1;\n -ms-flex: 1;\n -o-flex: 1;\n flex: 1;*/\n max-width: 452px;\n max-height: 452px;\n}\n\n.image-view-mask {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0,0,0,.5);\n z-index: 2000;\n}\n</style>\n\n\n\n// WEBPACK FOOTER //\n// src/lib/vue-gic-img-preview.vue","import vueGicImgPreview from './vue-gic-img-preview.vue' // 导入组件\n\nconst ImgPreview = {\n install(Vue, options) {\n Vue.component(vueGicImgPreview.name, vueGicImgPreview) // vueImagesToast.name 组件的name属性\n // 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已\n // Vue.prototype.$xxx // 最终可以在任何地方通过 this.$xxx 调用\n // 虽然没有明确规定用$开头 但是大家都默认遵守这个规定\n }\n}\nif (typeof window !== 'undefined' && window.Vue) {\n window.Vue.use(ImgPreview);\n}\nexport default ImgPreview\n\n// export {\n// vueImagesToasts\n// }\n\n\n\n\n\n// WEBPACK FOOTER //\n// ./src/lib/index.js","function injectStyle (ssrContext) {\n require(\"!!vue-style-loader!css-loader?minimize!../../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-1e11a38c\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./vue-gic-img-preview.vue\")\n}\nvar normalizeComponent = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")\n/* script */\nexport * from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./vue-gic-img-preview.vue\"\nimport __vue_script__ from \"!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./vue-gic-img-preview.vue\"\n/* template */\nimport __vue_template__ from \"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-1e11a38c\\\",\\\"hasScoped\\\":true,\\\"buble\\\":{\\\"transforms\\\":{}}}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./vue-gic-img-preview.vue\"\n/* template functional */\nvar __vue_template_functional__ = false\n/* styles */\nvar __vue_styles__ = injectStyle\n/* scopeId */\nvar __vue_scopeId__ = \"data-v-1e11a38c\"\n/* moduleIdentifier (server only) */\nvar __vue_module_identifier__ = null\nvar Component = normalizeComponent(\n __vue_script__,\n __vue_template__,\n __vue_template_functional__,\n __vue_styles__,\n __vue_scopeId__,\n __vue_module_identifier__\n)\n\nexport default Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/lib/vue-gic-img-preview.vue\n// module id = 2\n// module chunks = 0","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/index.js?minimize!../../node_modules/vue-loader/lib/style-compiler/index.js?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-1e11a38c\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./vue-gic-img-preview.vue\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar update = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\")(\"333acad7\", content, true, {});\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-style-loader!./node_modules/css-loader?minimize!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-1e11a38c\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/lib/vue-gic-img-preview.vue\n// module id = 3\n// module chunks = 0","exports = module.exports = require(\"../../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \".image-view-contain[data-v-1e11a38c]{position:relative;width:100%}.image-view-body[data-v-1e11a38c]{position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:5000;display:-webkit-flex;display:flex;justify-content:center;align-items:center;padding:24px;background:#fff;text-align:center;border-radius:4px;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.15);box-shadow:0 4px 12px rgba(0,0,0,.15);overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.el-icon-close[data-v-1e11a38c]{position:absolute;top:10px;right:10px;font-size:14px;color:#909399;cursor:pointer}.image-view-body img[data-v-1e11a38c]{max-width:452px;max-height:452px}.image-view-mask[data-v-1e11a38c]{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:2000}\", \"\"]);\n\n// exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/css-loader?minimize!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-1e11a38c\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/lib/vue-gic-img-preview.vue\n// module id = 4\n// module chunks = 0","/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\nmodule.exports = function(useSourceMap) {\n\tvar list = [];\n\n\t// return the list of modules as css string\n\tlist.toString = function toString() {\n\t\treturn this.map(function (item) {\n\t\t\tvar content = cssWithMappingToString(item, useSourceMap);\n\t\t\tif(item[2]) {\n\t\t\t\treturn \"@media \" + item[2] + \"{\" + content + \"}\";\n\t\t\t} else {\n\t\t\t\treturn content;\n\t\t\t}\n\t\t}).join(\"\");\n\t};\n\n\t// import a list of modules into the list\n\tlist.i = function(modules, mediaQuery) {\n\t\tif(typeof modules === \"string\")\n\t\t\tmodules = [[null, modules, \"\"]];\n\t\tvar alreadyImportedModules = {};\n\t\tfor(var i = 0; i < this.length; i++) {\n\t\t\tvar id = this[i][0];\n\t\t\tif(typeof id === \"number\")\n\t\t\t\talreadyImportedModules[id] = true;\n\t\t}\n\t\tfor(i = 0; i < modules.length; i++) {\n\t\t\tvar item = modules[i];\n\t\t\t// skip already imported module\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\n\t\t\t// when a module is imported multiple times with different media queries.\n\t\t\t// I hope this will never occur (Hey this way we have smaller bundles)\n\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\n\t\t\t\tif(mediaQuery && !item[2]) {\n\t\t\t\t\titem[2] = mediaQuery;\n\t\t\t\t} else if(mediaQuery) {\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\n\t\t\t\t}\n\t\t\t\tlist.push(item);\n\t\t\t}\n\t\t}\n\t};\n\treturn list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n\tvar content = item[1] || '';\n\tvar cssMapping = item[3];\n\tif (!cssMapping) {\n\t\treturn content;\n\t}\n\n\tif (useSourceMap && typeof btoa === 'function') {\n\t\tvar sourceMapping = toComment(cssMapping);\n\t\tvar sourceURLs = cssMapping.sources.map(function (source) {\n\t\t\treturn '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'\n\t\t});\n\n\t\treturn [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n\t}\n\n\treturn [content].join('\\n');\n}\n\n// Adapted from convert-source-map (MIT)\nfunction toComment(sourceMap) {\n\t// eslint-disable-next-line no-undef\n\tvar base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n\tvar data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;\n\n\treturn '/*# ' + data + ' */';\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/css-loader/lib/css-base.js\n// module id = 5\n// module chunks = 0","/*\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n Modified by Evan You @yyx990803\n*/\n\nvar hasDocument = typeof document !== 'undefined'\n\nif (typeof DEBUG !== 'undefined' && DEBUG) {\n if (!hasDocument) {\n throw new Error(\n 'vue-style-loader cannot be used in a non-browser environment. ' +\n \"Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.\"\n ) }\n}\n\nvar listToStyles = require('./listToStyles')\n\n/*\ntype StyleObject = {\n id: number;\n parts: Array<StyleObjectPart>\n}\n\ntype StyleObjectPart = {\n css: string;\n media: string;\n sourceMap: ?string\n}\n*/\n\nvar stylesInDom = {/*\n [id: number]: {\n id: number,\n refs: number,\n parts: Array<(obj?: StyleObjectPart) => void>\n }\n*/}\n\nvar head = hasDocument && (document.head || document.getElementsByTagName('head')[0])\nvar singletonElement = null\nvar singletonCounter = 0\nvar isProduction = false\nvar noop = function () {}\nvar options = null\nvar ssrIdKey = 'data-vue-ssr-id'\n\n// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>\n// tags it will allow on a page\nvar isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase())\n\nmodule.exports = function (parentId, list, _isProduction, _options) {\n isProduction = _isProduction\n\n options = _options || {}\n\n var styles = listToStyles(parentId, list)\n addStylesToDom(styles)\n\n return function update (newList) {\n var mayRemove = []\n for (var i = 0; i < styles.length; i++) {\n var item = styles[i]\n var domStyle = stylesInDom[item.id]\n domStyle.refs--\n mayRemove.push(domStyle)\n }\n if (newList) {\n styles = listToStyles(parentId, newList)\n addStylesToDom(styles)\n } else {\n styles = []\n }\n for (var i = 0; i < mayRemove.length; i++) {\n var domStyle = mayRemove[i]\n if (domStyle.refs === 0) {\n for (var j = 0; j < domStyle.parts.length; j++) {\n domStyle.parts[j]()\n }\n delete stylesInDom[domStyle.id]\n }\n }\n }\n}\n\nfunction addStylesToDom (styles /* Array<StyleObject> */) {\n for (var i = 0; i < styles.length; i++) {\n var item = styles[i]\n var domStyle = stylesInDom[item.id]\n if (domStyle) {\n domStyle.refs++\n for (var j = 0; j < domStyle.parts.length; j++) {\n domStyle.parts[j](item.parts[j])\n }\n for (; j < item.parts.length; j++) {\n domStyle.parts.push(addStyle(item.parts[j]))\n }\n if (domStyle.parts.length > item.parts.length) {\n domStyle.parts.length = item.parts.length\n }\n } else {\n var parts = []\n for (var j = 0; j < item.parts.length; j++) {\n parts.push(addStyle(item.parts[j]))\n }\n stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }\n }\n }\n}\n\nfunction createStyleElement () {\n var styleElement = document.createElement('style')\n styleElement.type = 'text/css'\n head.appendChild(styleElement)\n return styleElement\n}\n\nfunction addStyle (obj /* StyleObjectPart */) {\n var update, remove\n var styleElement = document.querySelector('style[' + ssrIdKey + '~=\"' + obj.id + '\"]')\n\n if (styleElement) {\n if (isProduction) {\n // has SSR styles and in production mode.\n // simply do nothing.\n return noop\n } else {\n // has SSR styles but in dev mode.\n // for some reason Chrome can't handle source map in server-rendered\n // style tags - source maps in <style> only works if the style tag is\n // created and inserted dynamically. So we remove the server rendered\n // styles and inject new ones.\n styleElement.parentNode.removeChild(styleElement)\n }\n }\n\n if (isOldIE) {\n // use singleton mode for IE9.\n var styleIndex = singletonCounter++\n styleElement = singletonElement || (singletonElement = createStyleElement())\n update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)\n remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)\n } else {\n // use multi-style-tag mode in all other cases\n styleElement = createStyleElement()\n update = applyToTag.bind(null, styleElement)\n remove = function () {\n styleElement.parentNode.removeChild(styleElement)\n }\n }\n\n update(obj)\n\n return function updateStyle (newObj /* StyleObjectPart */) {\n if (newObj) {\n if (newObj.css === obj.css &&\n newObj.media === obj.media &&\n newObj.sourceMap === obj.sourceMap) {\n return\n }\n update(obj = newObj)\n } else {\n remove()\n }\n }\n}\n\nvar replaceText = (function () {\n var textStore = []\n\n return function (index, replacement) {\n textStore[index] = replacement\n return textStore.filter(Boolean).join('\\n')\n }\n})()\n\nfunction applyToSingletonTag (styleElement, index, remove, obj) {\n var css = remove ? '' : obj.css\n\n if (styleElement.styleSheet) {\n styleElement.styleSheet.cssText = replaceText(index, css)\n } else {\n var cssNode = document.createTextNode(css)\n var childNodes = styleElement.childNodes\n if (childNodes[index]) styleElement.removeChild(childNodes[index])\n if (childNodes.length) {\n styleElement.insertBefore(cssNode, childNodes[index])\n } else {\n styleElement.appendChild(cssNode)\n }\n }\n}\n\nfunction applyToTag (styleElement, obj) {\n var css = obj.css\n var media = obj.media\n var sourceMap = obj.sourceMap\n\n if (media) {\n styleElement.setAttribute('media', media)\n }\n if (options.ssrId) {\n styleElement.setAttribute(ssrIdKey, obj.id)\n }\n\n if (sourceMap) {\n // https://developer.chrome.com/devtools/docs/javascript-debugging\n // this makes source maps inside style tags work properly in Chrome\n css += '\\n/*# sourceURL=' + sourceMap.sources[0] + ' */'\n // http://stackoverflow.com/a/26603875\n css += '\\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'\n }\n\n if (styleElement.styleSheet) {\n styleElement.styleSheet.cssText = css\n } else {\n while (styleElement.firstChild) {\n styleElement.removeChild(styleElement.firstChild)\n }\n styleElement.appendChild(document.createTextNode(css))\n }\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-style-loader/lib/addStylesClient.js\n// module id = 6\n// module chunks = 0","/**\n * Translates the list format produced by css-loader into something\n * easier to manipulate.\n */\nmodule.exports = function listToStyles (parentId, list) {\n var styles = []\n var newStyles = {}\n for (var i = 0; i < list.length; i++) {\n var item = list[i]\n var id = item[0]\n var css = item[1]\n var media = item[2]\n var sourceMap = item[3]\n var part = {\n id: parentId + ':' + i,\n css: css,\n media: media,\n sourceMap: sourceMap\n }\n if (!newStyles[id]) {\n styles.push(newStyles[id] = { id: id, parts: [part] })\n } else {\n newStyles[id].parts.push(part)\n }\n }\n return styles\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-style-loader/lib/listToStyles.js\n// module id = 7\n// module chunks = 0","/* globals __VUE_SSR_CONTEXT__ */\n\n// IMPORTANT: Do NOT use ES2015 features in this file.\n// This module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle.\n\nmodule.exports = function normalizeComponent (\n rawScriptExports,\n compiledTemplate,\n functionalTemplate,\n injectStyles,\n scopeId,\n moduleIdentifier /* server only */\n) {\n var esModule\n var scriptExports = rawScriptExports = rawScriptExports || {}\n\n // ES6 modules interop\n var type = typeof rawScriptExports.default\n if (type === 'object' || type === 'function') {\n esModule = rawScriptExports\n scriptExports = rawScriptExports.default\n }\n\n // Vue.extend constructor export interop\n var options = typeof scriptExports === 'function'\n ? scriptExports.options\n : scriptExports\n\n // render functions\n if (compiledTemplate) {\n options.render = compiledTemplate.render\n options.staticRenderFns = compiledTemplate.staticRenderFns\n options._compiled = true\n }\n\n // functional template\n if (functionalTemplate) {\n options.functional = true\n }\n\n // scopedId\n if (scopeId) {\n options._scopeId = scopeId\n }\n\n var hook\n if (moduleIdentifier) { // server build\n hook = function (context) {\n // 2.3 injection\n context =\n context || // cached call\n (this.$vnode && this.$vnode.ssrContext) || // stateful\n (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional\n // 2.2 with runInNewContext: true\n if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\n context = __VUE_SSR_CONTEXT__\n }\n // inject component styles\n if (injectStyles) {\n injectStyles.call(this, context)\n }\n // register component module identifier for async chunk inferrence\n if (context && context._registeredComponents) {\n context._registeredComponents.add(moduleIdentifier)\n }\n }\n // used by ssr in case component is cached and beforeCreate\n // never gets called\n options._ssrRegister = hook\n } else if (injectStyles) {\n hook = injectStyles\n }\n\n if (hook) {\n var functional = options.functional\n var existing = functional\n ? options.render\n : options.beforeCreate\n\n if (!functional) {\n // inject component registration as beforeCreate hook\n options.beforeCreate = existing\n ? [].concat(existing, hook)\n : [hook]\n } else {\n // for template-only hot-reload because in that case the render fn doesn't\n // go through the normalizer\n options._injectStyles = hook\n // register for functioal component in vue file\n options.render = function renderWithStyleInjection (h, context) {\n hook.call(context)\n return existing(h, context)\n }\n }\n }\n\n return {\n esModule: esModule,\n exports: scriptExports,\n options: options\n }\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/component-normalizer.js\n// module id = 8\n// module chunks = 0","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.showFlag)?_c('div',{staticClass:\"image-view-contain\"},[_c('transition',{attrs:{\"name\":\"fade\"}},[_c('div',{staticClass:\"image-view-body\",on:{\"click\":function($event){$event.stopPropagation();return _vm.hideImage($event)}}},[_c('i',{staticClass:\"el-icon-close\"}),_vm._v(\" \"),_c('img',{attrs:{\"src\":_vm.imgSrc,\"alt\":\"\"}})])])],1):_vm._e()}\nvar staticRenderFns = []\nvar esExports = { render: render, staticRenderFns: staticRenderFns }\nexport default esExports\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/vue-loader/lib/template-compiler?{\"id\":\"data-v-1e11a38c\",\"hasScoped\":true,\"buble\":{\"transforms\":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/lib/vue-gic-img-preview.vue\n// module id = 9\n// module chunks = 0"],"sourceRoot":""}
\ No newline at end of file
index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>vue-images-toasts</title>
</head>
<body>
<div id="app"></div>
<!-- <script src="/dist/build.js"></script> -->
<script src="/dist/vue-images-toasts.js"></script>
</body>
</html>
package.json 0 → 100644
{
"name": "@gic-test/vue-gic-img-preview",
"description": "vue-gic-img-preview Plugin",
"version": "1.0.12",
"license": "MIT",
"private": false,
"author": "fairyly",
"main": "dist/vue-gic-img-preview.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
src/App.vue 0 → 100644
<template>
<div id="app">
<vue-gic-img-preview :imgUrl="imgUrl" :imgShowFlag="imgShowFlag" @hideImage="hideImage"></vue-gic-img-preview>
</div>
</template>
<script>
import vueGicImgPreview from './lib/vue-gic-img-preview'
export default {
name: 'app',
data () {
return {
imgShowFlag: false, // 是否弹框显示,true: 显示；false: 不显示
imgUrl: '', // 传递的图片 src
}
},
components: {
vueGicImgPreview
},
methods: {
showImage(src) {
var that = this
if(!src || src == ''){
return false;
}
that.imgShowFlag = true;
that.imgUrl = src;
},
hideImage(val) {
var that = this
that.imgShowFlag = val
}
}
}
</script>
<style lang="scss">
* {
margin: 0;
padding: 0;
}
</style>
src/lib/index.js 0 → 100644
import vueGicImgPreview from './vue-gic-img-preview.vue' // 导入组件
const ImgPreview = {
install(Vue, options) {
Vue.component(vueGicImgPreview.name, vueGicImgPreview) // vueImagesToast.name 组件的name属性
// 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已
// Vue.prototype.$xxx // 最终可以在任何地方通过 this.$xxx 调用
// 虽然没有明确规定用$开头 但是大家都默认遵守这个规定
}
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(ImgPreview);
}
export default ImgPreview
// export {
// vueImagesToasts
// }
src/lib/vue-gic-img-preview.vue 0 → 100644
<template>
<div class="image-view-contain" v-if="showFlag">
<!-- <div class="image-view-mask" @click.stop="hideImage"></div> -->
<transition name="fade">
<div class="image-view-body" @click.stop="hideImage">
<i class="el-icon-close"></i>
<img :src="imgSrc" alt=""/>
</div>
</transition>
</div>
</template>
<script>
export default {
name: 'vue-gic-img-preview',
props:{
imgUrl: String,
imgShowFlag: Boolean
},
data () {
return {
showFlag: false,
imgSrc: '',
}
},
methods:{
hideImage() {
var that = this
that.showFlag = false
that.$emit('hideImage',that.showFlag)
},
hidePanel() {
var that = this
if (!!that.showFlag) {
that.hideImage()
}
}
},
watch:{
imgUrl:function(newVal) {
this.imgSrc = newVal
},
imgShowFlag:function(newVal) {
this.showFlag = newVal
},
},
mounted() {
var that = this
that.imgSrc = this.imgUrl;
this.showFlag = that.imgShowFlag;
// 监听点击隐藏弹层
document.addEventListener('click', that.hidePanel, false)
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.image-view-contain {
position: relative;
width: 100%;
}
.image-view-body {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 5000;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
/*width: 520px;
height: 520px;*/
padding: 24px;
background: #fff;
text-align: center;
border-radius: 4px;
-webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.el-icon-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 14px;
color: #909399;
cursor: pointer;
}
.image-view-body img {
/*-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
-o-flex: 1;
flex: 1;*/
max-width: 452px;
max-height: 452px;
}
.image-view-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.5);
z-index: 2000;
}
</style>
src/main.js 0 → 100644
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
webpack.config.js 0 → 100644
var path = require('path')
var webpack = require('webpack')
module.exports = {
// entry: './src/main.js',
entry: './src/lib/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js',
filename: 'vue-gic-img-preview.js',
library: 'vue-gic-img-preview',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment