New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
vue-picture-preview
Advanced tools
vue-picture-preview - npm Package Compare versions
Comparing version 1.2.1 to 1.3.0
| { | ||
| "extends": "standard", | ||
| "root": true, | ||
| "parserOptions": { | ||
| "ecmaVersion": 6, | ||
| "sourceType": "module", | ||
| "ecmaFeatures": { | ||
| "experimentalObjectRestSpread": true | ||
| } | ||
| }, | ||
| "env": { | ||
| "node": true, | ||
| "browser": true, | ||
| "es6": true, | ||
| "amd": true | ||
| "es6": true | ||
| }, | ||
| "extends": "eslint:recommended", | ||
| "parser": "vue-eslint-parser", | ||
| "parserOptions": { | ||
| "ecmaVersion": 2018, | ||
| "sourceType": "module" | ||
| }, | ||
| "plugins": ["html", "vue", "standard"], | ||
| "rules": { | ||
| "indent": ["error", 4, { "SwitchCase": 1 }], | ||
| "indent": ["error", 2, { "SwitchCase": 1 }], | ||
| "quotes": ["error", "single"], | ||
@@ -21,0 +17,0 @@ "semi": ["error", "always", { "omitLastInOneLineBlock": true }], |
88
build.js
@@ -1,45 +0,59 @@ | ||
| var rollup = require('rollup'); | ||
| var babel = require('rollup-plugin-babel'); | ||
| var uglify = require('rollup-plugin-uglify'); | ||
| var npm = require('rollup-plugin-node-resolve'); | ||
| var commonjs = require('rollup-plugin-commonjs'); | ||
| var vue = require('rollup-plugin-vue'); | ||
| rollup.rollup({ | ||
| entry: 'index.js', // 打包入口文件 | ||
| /* eslint-disable */ | ||
| const rollup = require('rollup'); | ||
| const babel = require('rollup-plugin-babel'); | ||
| const eslint = require('rollup-plugin-eslint').eslint; | ||
| const resolve = require('rollup-plugin-node-resolve'); | ||
| const commonjs = require('rollup-plugin-commonjs'); | ||
| // const uglify = require('rollup-plugin-uglify'); | ||
| const postcss = require('rollup-plugin-postcss'); | ||
| const vue = require('rollup-plugin-vue'); | ||
| // PostCSS plugins | ||
| const simpleVars = require('postcss-simple-vars'); | ||
| const nested = require('postcss-nested'); | ||
| const presetEnv = require('postcss-preset-env'); | ||
| const cssnano = require('cssnano'); | ||
| rollup | ||
| .rollup({ | ||
| input: 'src/index.js', // 打包入口文件 | ||
| plugins: [ | ||
| vue(), | ||
| npm({ jsnext: true, main: true }), | ||
| uglify(), // 压缩代码 | ||
| commonjs(), // 支持CommonJS模块语法 | ||
| babel({ // babel配置 | ||
| exclude: 'node_modules/**', | ||
| presets: [ 'es2015-rollup' ] | ||
| }) | ||
| postcss({ | ||
| plugins: [ | ||
| simpleVars(), | ||
| nested(), | ||
| presetEnv(), | ||
| cssnano({ | ||
| autoprefixer: false, | ||
| 'postcss-zindex': false | ||
| }) | ||
| ], | ||
| extensions: ['.css'] | ||
| }), | ||
| vue(), | ||
| resolve(), | ||
| commonjs(), // 支持CommonJS模块语法 | ||
| eslint({ | ||
| exclude: ['src/css/**'] | ||
| }), | ||
| babel({ | ||
| exclude: 'node_modules/**' | ||
| }) | ||
| ], | ||
| external: [ // 不被打包的库，比如在项目中会被引入 | ||
| 'vue' | ||
| external: [ | ||
| // 不被打包的库，比如在项目中会被引入 | ||
| 'vue' | ||
| ] | ||
| }).then(function(bundle) { | ||
| }) | ||
| .then(function(bundle) { | ||
| bundle.write({ | ||
| // output format - 'amd', 'cjs', 'es6', 'iife', 'umd' | ||
| // amd – 使用像requirejs一样的银木块定义 | ||
| // cjs – CommonJS，适用于node和browserify / Webpack | ||
| // es6 (default) – 保持ES6的格式 | ||
| // iife – 使用于<script> 标签引用的方式 | ||
| // umd – 适用于CommonJs和AMD风格通用模式 | ||
| format: 'cjs', // 指定要打包成什么格式 | ||
| dest: 'dist/vue-picture-preview.js' // 编译完的文件需要被存放的路径 | ||
| format: 'cjs', // 指定要打包成什么格式 | ||
| file: 'dist/vue-picture-preview.js' // 编译完的文件需要被存放的路径 | ||
| }); | ||
| bundle.write({ | ||
| // output format - 'amd', 'cjs', 'es6', 'iife', 'umd' | ||
| // amd – 使用像requirejs一样的银木块定义 | ||
| // cjs – CommonJS，适用于node和browserify / Webpack | ||
| // es6 (default) – 保持ES6的格式 | ||
| // iife – 使用于<script> 标签引用的方式 | ||
| // umd – 适用于CommonJs和AMD风格通用模式 | ||
| moduleName: 'vuePicturePreview', | ||
| format: 'iife', // 指定要打包成什么格式 | ||
| dest: 'dist/vue-picture-preview.min.js' // 编译完的文件需要被存放的路径 | ||
| name: 'vuePicturePreview', | ||
| format: 'iife', // 指定要打包成什么格式 | ||
| file: 'dist/vue-picture-preview.min.js' // 编译完的文件需要被存放的路径 | ||
| }); | ||
| }); | ||
| }); |
@@ -1,1 +0,438 @@ | ||
| "use strict";function normalizeComponent(e,n,i,t,r,a,A,o,s,l){"boolean"!=typeof A&&(s=o,o=A,A=!1);var v="function"==typeof i?i.options:i;e&&e.render&&(v.render=e.render,v.staticRenderFns=e.staticRenderFns,v._compiled=!0,r&&(v.functional=!0)),t&&(v._scopeId=t);var p;if(a?(p=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__),n&&n.call(this,s(e)),e&&e._registeredComponents&&e._registeredComponents.add(a)},v._ssrRegister=p):n&&(p=A?function(){n.call(this,l(this.$root.$options.shadowRoot))}:function(e){n.call(this,o(e))}),p)if(v.functional){var d=v.render;v.render=function(e,n){return p.call(n),d(e,n)}}else{var c=v.beforeCreate;v.beforeCreate=c?[].concat(c,p):[p]}return i}function createInjector(e){return function(e,n){return addStyle(e,n)}}function addStyle(e,n){var i=isOldIE?n.media||"default":e,t=styles[i]||(styles[i]={ids:new Set,styles:[]});if(!t.ids.has(e)){t.ids.add(e);var r=n.source;if(n.map&&(r+="\n/*# sourceURL="+n.map.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),t.element||(t.element=document.createElement("style"),t.element.type="text/css",n.media&&t.element.setAttribute("media",n.media),HEAD.appendChild(t.element)),"styleSheet"in t.element)t.styles.push(r),t.element.styleSheet.cssText=t.styles.filter(Boolean).join("\n");else{var a=t.ids.size-1,A=document.createTextNode(r),o=t.element.childNodes;o[a]&&t.element.removeChild(o[a]),o.length?t.element.insertBefore(A,o[a]):t.element.appendChild(A)}}}var script={name:"Preview",computed:{preview:function(){return window.LOGIC_EVENT_BUS.LOGIC_PREVIEW}},methods:{leave:function(e){this.preview.show&&0!==e.target.className.indexOf("lg-preview-nav-arrow")&&this.close()},close:function(){this.preview.show=!1},preAction:function(){this.preview.loading=!0;var e=this.preview.list.indexOf(this.preview.current);if(0===e)return void(this.preview.loading=!1);e--,this.preview.current=this.preview.list[e];var n=new window.Image;n.src=this.preview.current.src,n.onload=function(){setTimeout(function(){LOGIC_EVENT_BUS.LOGIC_PREVIEW.loading=!1},500)}},nextAction:function(){this.preview.loading=!0;var e=this.preview.list.indexOf(this.preview.current);if(e===this.preview.list.length-1)return void(this.preview.loading=!1);e++,this.preview.current=this.preview.list[e];var n=new window.Image;n.src=this.preview.current.src,n.onload=function(){setTimeout(function(){LOGIC_EVENT_BUS.LOGIC_PREVIEW.loading=!1},500)}}}},normalizeComponent_1$1=normalizeComponent,isOldIE="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()),HEAD=document.head||document.getElementsByTagName("head")[0],styles={},browser=createInjector,__vue_script__=script,__vue_render__=function(){var e=this,n=e.$createElement,i=e._self._c||n;return i("transition",{attrs:{name:"fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.preview.show,expression:"preview.show"}],staticClass:"lg-preview-wrapper",on:{click:e.leave,touchmove:function(e){e.preventDefault()}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.preview.loading,expression:"preview.loading"}],staticClass:"lg-preview-loading"},[i("div")]),e._v(" "),e.preview.current.src?i("img",{directives:[{name:"show",rawName:"v-show",value:!e.preview.loading,expression:"!preview.loading"}],staticClass:"lg-preview-img",attrs:{src:e.preview.current.src,alt:e.preview.current.title}}):e._e(),e._v(" "),e.preview.isTitleEnable&&e.preview.current.title?i("div",{directives:[{name:"show",rawName:"v-show",value:!e.preview.loading,expression:"!preview.loading"}],staticClass:"lg-preview-title"},[e._v("\n "+e._s(e.preview.current.title)+"\n ")]):e._e(),e._v(" "),e.preview.isHorizontalNavEnable?i("div",{directives:[{name:"show",rawName:"v-show",value:!e.preview.loading,expression:"!preview.loading"}],staticClass:"lg-preview-nav-left"},[i("span",{staticClass:"lg-preview-nav-arrow",on:{click:function(n){return n.stopPropagation(),e.preAction(n)}}})]):e._e(),e._v(" "),e.preview.isHorizontalNavEnable?i("div",{directives:[{name:"show",rawName:"v-show",value:!e.preview.loading,expression:"!preview.loading"}],staticClass:"lg-preview-nav-right"},[i("span",{staticClass:"lg-preview-nav-arrow",on:{click:function(n){return n.stopPropagation(),e.nextAction(n)}}})]):e._e()])])},__vue_staticRenderFns__=[];__vue_render__._withStripped=!0;var __vue_inject_styles__=function(e){e&&e("data-v-f1c51966_0",{source:"\n.fade-enter-active[data-v-f1c51966], .fade-leave-active[data-v-f1c51966] {\n transition: opacity .5s\n}\n.fade-enter[data-v-f1c51966], .fade-leave-active[data-v-f1c51966] {\n opacity: 0\n}\n.lg-preview-wrapper[data-v-f1c51966] {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n box-sizing: border-box;\n background: rgba(0, 0, 0, 0.9);\n z-index: 10000;\n}\n.lg-preview-loading[data-v-f1c51966] {\n position: absolute;\n width: 30px;\n height: 35px;\n top: 50%;\n left: 50%;\n margin-top: -17.5px;\n margin-left: -15px;\n}\n.lg-preview-loading > div[data-v-f1c51966] {\n display: inline-block;\n height: 25px;\n width: 25px;\n background: transparent;\n border-radius: 100%;\n border: 2px solid #fff;\n border-bottom-color: transparent;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-animation: rotate-data-v-f1c51966 0.75s 0s linear infinite;\n animation: rotate-data-v-f1c51966 0.75s 0s linear infinite;\n}\n@keyframes rotate-data-v-f1c51966 {\n0% {\n -webkit-transform: rotate(0deg) scale(1);\n transform: rotate(0deg) scale(1);\n}\n50% {\n -webkit-transform: rotate(180deg) scale(0.6);\n transform: rotate(180deg) scale(0.6);\n}\n100% {\n -webkit-transform: rotate(360deg) scale(1);\n transform: rotate(360deg) scale(1);\n}\n}\n.lg-preview-img[data-v-f1c51966] {\n max-width: 100%;\n max-height: 100%;\n display: block;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n margin: auto;\n}\n.lg-preview-nav-arrow[data-v-f1c51966] {\n position: absolute;\n top: 50%;\n margin-top: -15px;\n background: rgba(0, 0, 0, 0);\n line-height: 40px;\n width: 20px;\n height: 20px;\n border-top: 2px solid #fff;\n border-left: 2px solid #fff;\n}\n.lg-preview-nav-left[data-v-f1c51966],\n.lg-preview-nav-right[data-v-f1c51966] {\n position: absolute;\n height: 100%;\n margin: 0 5px;\n width: 200px;\n top: 0;\n color: #fff;\n transition: opacity .2s;\n}\n.lg-preview-nav-left[data-v-f1c51966] {\n left: 0;\n}\n.lg-preview-nav-left .lg-preview-nav-arrow[data-v-f1c51966] {\n left: 0;\n margin-left: 40px;\n transform: rotate(-45deg);\n}\n.lg-preview-nav-right[data-v-f1c51966] {\n right: 0;\n}\n.lg-preview-nav-right .lg-preview-nav-arrow[data-v-f1c51966] {\n right: 0;\n margin-right: 40px;\n transform: rotate(135deg);\n}\n.lg-preview-title[data-v-f1c51966] {\n position: absolute;\n left: 0;\n bottom: 0;\n text-align: center;\n width: 100%;\n color: #fff;\n background: rgba(0, 0, 0, .5);\n box-sizing: border-box;\n font-size: 16px;\n height: 40px;\n line-height: 40px;\n}\n@media all and (max-width: 768px) {\n.lg-preview-nav-left[data-v-f1c51966],\n .lg-preview-nav-right[data-v-f1c51966] {\n width: 100px;\n}\n.lg-preview-nav-left .lg-preview-nav-arrow[data-v-f1c51966] {\n margin-left: 20px;\n}\n.lg-preview-nav-right .lg-preview-nav-arrow[data-v-f1c51966] {\n margin-right: 20px;\n}\n}\n",map:{version:3,sources:["/Users/xlogic/code/vue-picture-preview/vue-picture-preview.vue"],names:[],mappings:";AAgFA;IACA;AACA;AAEA;IACA;AACA;AAEA;IACA,eAAA;IACA,MAAA;IACA,OAAA;IACA,WAAA;IACA,YAAA;IACA,kBAAA;IACA,sBAAA;IACA,8BAAA;IACA,cAAA;AACA;AAEA;IACA,kBAAA;IACA,WAAA;IACA,YAAA;IACA,QAAA;IACA,SAAA;IACA,mBAAA;IACA,kBAAA;AACA;AAEA;IACA,qBAAA;IACA,YAAA;IACA,WAAA;IACA,uBAAA;IACA,mBAAA;IACA,sBAAA;IACA,gCAAA;IACA,iCAAA;IACA,yBAAA;IACA,kEAAA;IACA,0DAAA;AACA;AAEA;AACA;QACA,wCAAA;QACA,gCAAA;AACA;AAEA;QACA,4CAAA;QACA,oCAAA;AACA;AAEA;QACA,0CAAA;QACA,kCAAA;AACA;AACA;AAEA;IACA,eAAA;IACA,gBAAA;IACA,cAAA;IACA,kBAAA;IACA,OAAA;IACA,MAAA;IACA,SAAA;IACA,QAAA;IACA,YAAA;AACA;AAEA;IACA,kBAAA;IACA,QAAA;IACA,iBAAA;IACA,4BAAA;IACA,iBAAA;IACA,WAAA;IACA,YAAA;IACA,0BAAA;IACA,2BAAA;AAEA;AAEA;;IAEA,kBAAA;IACA,YAAA;IACA,aAAA;IACA,YAAA;IACA,MAAA;IACA,WAAA;IACA,uBAAA;AACA;AAEA;IACA,OAAA;AACA;AAEA;IACA,OAAA;IACA,iBAAA;IACA,yBAAA;AACA;AAEA;IACA,QAAA;AACA;AAEA;IACA,QAAA;IACA,kBAAA;IACA,yBAAA;AACA;AAEA;IACA,kBAAA;IACA,OAAA;IACA,SAAA;IACA,kBAAA;IACA,WAAA;IACA,WAAA;IACA,6BAAA;IACA,sBAAA;IACA,eAAA;IACA,YAAA;IACA,iBAAA;AACA;AAEA;AACA;;QAEA,YAAA;AACA;AAEA;QACA,iBAAA;AACA;AAEA;QACA,kBAAA;AACA;AACA",file:"vue-picture-preview.vue",sourcesContent:['<template>\n <transition name="fade">\n <div class="lg-preview-wrapper" v-show="preview.show" @click="leave" @touchmove.prevent>\n <div class="lg-preview-loading" v-show="preview.loading"><div></div></div>\n <img\n class="lg-preview-img"\n v-if="preview.current.src"\n :src="preview.current.src"\n :alt="preview.current.title"\n v-show="!preview.loading"\n >\n <div class="lg-preview-title" v-if="preview.isTitleEnable&&preview.current.title" v-show="!preview.loading">\n {{preview.current.title}}\n </div>\n <div class="lg-preview-nav-left" v-if="preview.isHorizontalNavEnable" v-show="!preview.loading">\n <span class="lg-preview-nav-arrow" @click.stop="preAction" ></span>\n </div>\n <div class="lg-preview-nav-right" v-if="preview.isHorizontalNavEnable" v-show="!preview.loading">\n <span class="lg-preview-nav-arrow" @click.stop="nextAction"></span>\n </div>\n </div>\n </transition>\n</template>\n\n<script>\nexport default {\n name: \'Preview\',\n computed: {\n preview () {\n return window.LOGIC_EVENT_BUS.LOGIC_PREVIEW;\n }\n },\n methods: {\n leave (e) {\n if ((this.preview.show)&&(e.target.className.indexOf(\'lg-preview-nav-arrow\') !== 0)){\n this.close();\n }\n },\n close () {\n this.preview.show = false;\n },\n preAction () {\n this.preview.loading = true;\n var index = this.preview.list.indexOf(this.preview.current);\n if (index === 0) {\n this.preview.loading = false;\n return;\n }\n index--;\n this.preview.current = this.preview.list[index];\n var img = new window.Image();\n img.src = this.preview.current.src;\n img.onload = function () {\n setTimeout(function () {\n LOGIC_EVENT_BUS.LOGIC_PREVIEW.loading = false;\n }, 500);\n }\n },\n nextAction () {\n this.preview.loading = true;\n var index = this.preview.list.indexOf(this.preview.current);\n if (index === this.preview.list.length - 1) {\n this.preview.loading = false;\n return;\n }\n index++;\n this.preview.current = this.preview.list[index];\n var img = new window.Image();\n img.src = this.preview.current.src;\n img.onload = function () {\n setTimeout(function () {\n LOGIC_EVENT_BUS.LOGIC_PREVIEW.loading = false;\n }, 500);\n }\n },\n }\n}\n<\/script>\n\n<style scoped>\n.fade-enter-active, .fade-leave-active {\n transition: opacity .5s\n}\n\n.fade-enter, .fade-leave-active {\n opacity: 0\n}\n\n.lg-preview-wrapper {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n box-sizing: border-box;\n background: rgba(0, 0, 0, 0.9);\n z-index: 10000;\n}\n\n.lg-preview-loading {\n position: absolute;\n width: 30px;\n height: 35px;\n top: 50%;\n left: 50%;\n margin-top: -17.5px;\n margin-left: -15px;\n}\n\n.lg-preview-loading > div {\n display: inline-block;\n height: 25px;\n width: 25px;\n background: transparent;\n border-radius: 100%;\n border: 2px solid #fff;\n border-bottom-color: transparent;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-animation: rotate 0.75s 0s linear infinite;\n animation: rotate 0.75s 0s linear infinite;\n}\n\n@keyframes rotate {\n 0% {\n -webkit-transform: rotate(0deg) scale(1);\n transform: rotate(0deg) scale(1);\n }\n\n 50% {\n -webkit-transform: rotate(180deg) scale(0.6);\n transform: rotate(180deg) scale(0.6);\n }\n\n 100% {\n -webkit-transform: rotate(360deg) scale(1);\n transform: rotate(360deg) scale(1);\n }\n}\n\n.lg-preview-img {\n max-width: 100%;\n max-height: 100%;\n display: block;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n margin: auto;\n}\n\n.lg-preview-nav-arrow {\n position: absolute;\n top: 50%;\n margin-top: -15px;\n background: rgba(0, 0, 0, 0);\n line-height: 40px;\n width: 20px;\n height: 20px;\n border-top: 2px solid #fff;\n border-left: 2px solid #fff;\n\n}\n\n.lg-preview-nav-left,\n.lg-preview-nav-right {\n position: absolute;\n height: 100%;\n margin: 0 5px;\n width: 200px;\n top: 0;\n color: #fff;\n transition: opacity .2s;\n}\n\n.lg-preview-nav-left {\n left: 0;\n}\n\n.lg-preview-nav-left .lg-preview-nav-arrow {\n left: 0;\n margin-left: 40px;\n transform: rotate(-45deg);\n}\n\n.lg-preview-nav-right {\n right: 0;\n}\n\n.lg-preview-nav-right .lg-preview-nav-arrow {\n right: 0;\n margin-right: 40px;\n transform: rotate(135deg);\n}\n\n.lg-preview-title {\n position: absolute;\n left: 0;\n bottom: 0;\n text-align: center;\n width: 100%;\n color: #fff;\n background: rgba(0, 0, 0, .5);\n box-sizing: border-box;\n font-size: 16px;\n height: 40px;\n line-height: 40px;\n}\n\n@media all and (max-width: 768px) {\n .lg-preview-nav-left,\n .lg-preview-nav-right {\n width: 100px;\n }\n\n .lg-preview-nav-left .lg-preview-nav-arrow {\n margin-left: 20px;\n }\n\n .lg-preview-nav-right .lg-preview-nav-arrow {\n margin-right: 20px;\n }\n}\n</style>\n']},media:void 0})},__vue_scope_id__="data-v-f1c51966",__vue_module_identifier__=void 0,__vue_is_functional_template__=!1,lgPreview=normalizeComponent_1$1({render:__vue_render__,staticRenderFns:__vue_staticRenderFns__},__vue_inject_styles__,__vue_script__,__vue_scope_id__,__vue_is_functional_template__,__vue_module_identifier__,browser,void 0),index={install:function(e,n){function i(e,n){var i=new window.Image;i.src=e,i.onload=function(){n.naturalHeight=i.naturalHeight,n.naturalWidth=i.naturalWidth,setTimeout(function(){t.LOGIC_PREVIEW.loading=!1},500)},i.error=function(e){console.error(e)}}var t=new e({data:function(){return{LOGIC_PREVIEW:{isTitleEnable:!0,isHorizontalNavEnable:!0,show:!1,loading:!0,current:{title:"",src:""},list:[]}}}});window.LOGIC_EVENT_BUS=t,e.component("lg-preview",lgPreview);var r=function(e){e.forEach(function(e,n){e.index=n+1})};e.directive("preview",{bind:function(e,n){var a={title:e.alt||"",el:e,index:0,src:n.value};t.LOGIC_PREVIEW.list.push(a),r(t.LOGIC_PREVIEW.list),e.addEventListener("click",function(n){n.stopPropagation(),t.LOGIC_PREVIEW.isTitleEnable="false"!=e.getAttribute("preview-title-enable"),t.LOGIC_PREVIEW.isHorizontalNavEnable="false"!=e.getAttribute("preview-nav-enable"),t.LOGIC_PREVIEW.show=!0,t.LOGIC_PREVIEW.loading=!0,t.LOGIC_PREVIEW.current=a,i(a.src,a)})},update:function(e,n){var i=t.LOGIC_PREVIEW.list.find(function(n){return n.el===e});i&&(i.src=n.value,i.title=e.alt)},unbind:function(e){e&&t.LOGIC_PREVIEW.list.forEach(function(n,i){e===n.el&&t.LOGIC_PREVIEW.list.splice(i,1)}),r(t.LOGIC_PREVIEW.list)}})}};module.exports=index; | ||
| 'use strict'; | ||
| function styleInject(css, ref) { | ||
| if ( ref === void 0 ) ref = {}; | ||
| var insertAt = ref.insertAt; | ||
| if (!css || typeof document === 'undefined') { return; } | ||
| var head = document.head || document.getElementsByTagName('head')[0]; | ||
| var style = document.createElement('style'); | ||
| style.type = 'text/css'; | ||
| if (insertAt === 'top') { | ||
| if (head.firstChild) { | ||
| head.insertBefore(style, head.firstChild); | ||
| } else { | ||
| head.appendChild(style); | ||
| } | ||
| } else { | ||
| head.appendChild(style); | ||
| } | ||
| if (style.styleSheet) { | ||
| style.styleSheet.cssText = css; | ||
| } else { | ||
| style.appendChild(document.createTextNode(css)); | ||
| } | ||
| } | ||
| var css = ".lg-preview-fade-enter-active,.lg-preview-fade-leave-active{-webkit-transition:opacity .5s;transition:opacity .5s}.lg-preview-fade-enter,.lg-preview-fade-leave-active{opacity:0}.lg-preview-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;box-sizing:border-box;background:rgba(0,0,0,.9);z-index:10000}.lg-preview-wrapper .lg-preview-loading{position:absolute;width:30px;height:35px;top:50%;left:50%;margin-top:-17.5px;margin-left:-15px}.lg-preview-wrapper .lg-preview-loading>div{display:inline-block;height:25px;width:25px;background:transparent;border-radius:100%;border:2px solid;border-color:#fff #fff transparent;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:lg-preview-loading-rotate .75s linear 0s infinite;animation:lg-preview-loading-rotate .75s linear 0s infinite}@-webkit-keyframes lg-preview-loading-rotate{0%{-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6)}to{-webkit-transform:rotate(1turn) scale(1);transform:rotate(1turn) scale(1)}}@keyframes lg-preview-loading-rotate{0%{-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6)}to{-webkit-transform:rotate(1turn) scale(1);transform:rotate(1turn) scale(1)}}.lg-preview-wrapper .lg-preview-img{max-width:100%;max-height:100%;display:block;position:absolute;left:0;top:0;bottom:0;right:0;margin:auto}.lg-preview-wrapper .lg-preview-nav-arrow{position:absolute;top:50%;margin-top:-15px;background:transparent;line-height:40px;width:20px;height:20px;border-top:2px solid #fff;border-left:2px solid #fff}.lg-preview-wrapper .lg-preview-nav-left,.lg-preview-wrapper .lg-preview-nav-right{position:absolute;height:100%;margin:0 5px;width:200px;top:0;color:#fff;-webkit-transition:opacity .2s;transition:opacity .2s}.lg-preview-wrapper .lg-preview-nav-left{left:0}.lg-preview-wrapper .lg-preview-nav-left .lg-preview-nav-arrow{left:0;margin-left:40px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.lg-preview-wrapper .lg-preview-nav-right{right:0}.lg-preview-wrapper .lg-preview-nav-right .lg-preview-nav-arrow{right:0;margin-right:40px;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.lg-preview-wrapper .lg-preview-title{position:absolute;left:0;bottom:0;text-align:center;width:100%;color:#fff;background:rgba(0,0,0,.5);box-sizing:border-box;font-size:16px;height:40px;line-height:40px}@media (max-width:768px){.lg-preview-wrapper .lg-preview-nav-left,.lg-preview-wrapper .lg-preview-nav-right{width:100px}.lg-preview-wrapper .lg-preview-nav-left .lg-preview-nav-arrow{margin-left:20px}.lg-preview-wrapper .lg-preview-nav-right .lg-preview-nav-arrow{margin-right:20px}}"; | ||
| styleInject(css); | ||
| // | ||
| var script = { | ||
| name: 'Preview', | ||
| computed: { | ||
| preview: function preview() { | ||
| return window.LOGIC_EVENT_BUS.LOGIC_PREVIEW; | ||
| } | ||
| }, | ||
| watch: { | ||
| $route: function $route() { | ||
| this.preview.show = false; | ||
| } | ||
| }, | ||
| methods: { | ||
| leave: function leave(e) { | ||
| if (this.preview.show && e.target.className.indexOf('lg-preview-nav-arrow') !== 0) { | ||
| this.close(); | ||
| } | ||
| }, | ||
| close: function close() { | ||
| this.preview.show = false; | ||
| }, | ||
| preAction: function preAction() { | ||
| this.preview.loading = true; | ||
| var index = this.preview.list.indexOf(this.preview.current); | ||
| if (index === 0) { | ||
| this.preview.loading = false; | ||
| return; | ||
| } | ||
| index--; | ||
| this.preview.current = this.preview.list[index]; | ||
| var img = new window.Image(); | ||
| img.src = this.preview.current.src; | ||
| img.onload = function () { | ||
| setTimeout(function () { | ||
| window.LOGIC_EVENT_BUS.LOGIC_PREVIEW.loading = false; | ||
| }, 500); | ||
| }; | ||
| }, | ||
| nextAction: function nextAction() { | ||
| this.preview.loading = true; | ||
| var index = this.preview.list.indexOf(this.preview.current); | ||
| if (index === this.preview.list.length - 1) { | ||
| this.preview.loading = false; | ||
| return; | ||
| } | ||
| index++; | ||
| this.preview.current = this.preview.list[index]; | ||
| var img = new window.Image(); | ||
| img.src = this.preview.current.src; | ||
| img.onload = function () { | ||
| setTimeout(function () { | ||
| window.LOGIC_EVENT_BUS.LOGIC_PREVIEW.loading = false; | ||
| }, 500); | ||
| }; | ||
| } | ||
| } | ||
| }; | ||
| function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier | ||
| /* server only */ | ||
| , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { | ||
| if (typeof shadowMode !== 'boolean') { | ||
| createInjectorSSR = createInjector; | ||
| createInjector = shadowMode; | ||
| shadowMode = false; | ||
| } // Vue.extend constructor export interop. | ||
| var options = typeof script === 'function' ? script.options : script; // render functions | ||
| if (template && template.render) { | ||
| options.render = template.render; | ||
| options.staticRenderFns = template.staticRenderFns; | ||
| options._compiled = true; // functional template | ||
| if (isFunctionalTemplate) { | ||
| options.functional = true; | ||
| } | ||
| } // scopedId | ||
| if (scopeId) { | ||
| options._scopeId = scopeId; | ||
| } | ||
| var hook; | ||
| if (moduleIdentifier) { | ||
| // server build | ||
| hook = function hook(context) { | ||
| // 2.3 injection | ||
| context = context || // cached call | ||
| this.$vnode && this.$vnode.ssrContext || // stateful | ||
| this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional | ||
| // 2.2 with runInNewContext: true | ||
| if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { | ||
| context = __VUE_SSR_CONTEXT__; | ||
| } // inject component styles | ||
| if (style) { | ||
| style.call(this, createInjectorSSR(context)); | ||
| } // register component module identifier for async chunk inference | ||
| if (context && context._registeredComponents) { | ||
| context._registeredComponents.add(moduleIdentifier); | ||
| } | ||
| }; // used by ssr in case component is cached and beforeCreate | ||
| // never gets called | ||
| options._ssrRegister = hook; | ||
| } else if (style) { | ||
| hook = shadowMode ? function () { | ||
| style.call(this, createInjectorShadow(this.$root.$options.shadowRoot)); | ||
| } : function (context) { | ||
| style.call(this, createInjector(context)); | ||
| }; | ||
| } | ||
| if (hook) { | ||
| if (options.functional) { | ||
| // register for functional component in vue file | ||
| var originalRender = options.render; | ||
| options.render = function renderWithStyleInjection(h, context) { | ||
| hook.call(context); | ||
| return originalRender(h, context); | ||
| }; | ||
| } else { | ||
| // inject component registration as beforeCreate hook | ||
| var existing = options.beforeCreate; | ||
| options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; | ||
| } | ||
| } | ||
| return script; | ||
| } | ||
| var normalizeComponent_1 = normalizeComponent; | ||
| /* script */ | ||
| const __vue_script__ = script; | ||
| /* template */ | ||
| var __vue_render__ = function() { | ||
| var _vm = this; | ||
| var _h = _vm.$createElement; | ||
| var _c = _vm._self._c || _h; | ||
| return _c("transition", { attrs: { name: "lg-preview-fade" } }, [ | ||
| _vm.preview.show | ||
| ? _c( | ||
| "div", | ||
| { | ||
| staticClass: "lg-preview-wrapper", | ||
| on: { | ||
| click: _vm.leave, | ||
| touchmove: function($event) { | ||
| $event.preventDefault(); | ||
| } | ||
| } | ||
| }, | ||
| [ | ||
| _c( | ||
| "div", | ||
| { | ||
| directives: [ | ||
| { | ||
| name: "show", | ||
| rawName: "v-show", | ||
| value: _vm.preview.loading, | ||
| expression: "preview.loading" | ||
| } | ||
| ], | ||
| staticClass: "lg-preview-loading" | ||
| }, | ||
| [_c("div")] | ||
| ), | ||
| _vm._v(" "), | ||
| _vm.preview.current.src | ||
| ? _c("img", { | ||
| directives: [ | ||
| { | ||
| name: "show", | ||
| rawName: "v-show", | ||
| value: !_vm.preview.loading, | ||
| expression: "!preview.loading" | ||
| } | ||
| ], | ||
| staticClass: "lg-preview-img", | ||
| attrs: { | ||
| src: _vm.preview.current.src, | ||
| alt: _vm.preview.current.title | ||
| } | ||
| }) | ||
| : _vm._e(), | ||
| _vm._v(" "), | ||
| _vm.preview.isTitleEnable && _vm.preview.current.title | ||
| ? _c( | ||
| "div", | ||
| { | ||
| directives: [ | ||
| { | ||
| name: "show", | ||
| rawName: "v-show", | ||
| value: !_vm.preview.loading, | ||
| expression: "!preview.loading" | ||
| } | ||
| ], | ||
| staticClass: "lg-preview-title" | ||
| }, | ||
| [ | ||
| _vm._v( | ||
| "\n " + _vm._s(_vm.preview.current.title) + "\n " | ||
| ) | ||
| ] | ||
| ) | ||
| : _vm._e(), | ||
| _vm._v(" "), | ||
| _vm.preview.isHorizontalNavEnable | ||
| ? _c( | ||
| "div", | ||
| { | ||
| directives: [ | ||
| { | ||
| name: "show", | ||
| rawName: "v-show", | ||
| value: !_vm.preview.loading, | ||
| expression: "!preview.loading" | ||
| } | ||
| ], | ||
| staticClass: "lg-preview-nav-left" | ||
| }, | ||
| [ | ||
| _c("span", { | ||
| staticClass: "lg-preview-nav-arrow", | ||
| on: { | ||
| click: function($event) { | ||
| $event.stopPropagation(); | ||
| return _vm.preAction($event) | ||
| } | ||
| } | ||
| }) | ||
| ] | ||
| ) | ||
| : _vm._e(), | ||
| _vm._v(" "), | ||
| _vm.preview.isHorizontalNavEnable | ||
| ? _c( | ||
| "div", | ||
| { | ||
| directives: [ | ||
| { | ||
| name: "show", | ||
| rawName: "v-show", | ||
| value: !_vm.preview.loading, | ||
| expression: "!preview.loading" | ||
| } | ||
| ], | ||
| staticClass: "lg-preview-nav-right" | ||
| }, | ||
| [ | ||
| _c("span", { | ||
| staticClass: "lg-preview-nav-arrow", | ||
| on: { | ||
| click: function($event) { | ||
| $event.stopPropagation(); | ||
| return _vm.nextAction($event) | ||
| } | ||
| } | ||
| }) | ||
| ] | ||
| ) | ||
| : _vm._e() | ||
| ] | ||
| ) | ||
| : _vm._e() | ||
| ]) | ||
| }; | ||
| var __vue_staticRenderFns__ = []; | ||
| __vue_render__._withStripped = true; | ||
| /* style */ | ||
| const __vue_inject_styles__ = undefined; | ||
| /* scoped */ | ||
| const __vue_scope_id__ = undefined; | ||
| /* module identifier */ | ||
| const __vue_module_identifier__ = undefined; | ||
| /* functional template */ | ||
| const __vue_is_functional_template__ = false; | ||
| /* style inject */ | ||
| /* style inject SSR */ | ||
| var lgPreview = normalizeComponent_1( | ||
| { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, | ||
| __vue_inject_styles__, | ||
| __vue_script__, | ||
| __vue_scope_id__, | ||
| __vue_is_functional_template__, | ||
| __vue_module_identifier__, | ||
| undefined, | ||
| undefined | ||
| ); | ||
| var index = { | ||
| install: function install(Vue) { | ||
| // 添加的内容写在这个函数里面 | ||
| var LOGIC_EVENT_BUS = new Vue({ | ||
| data: function data() { | ||
| return { | ||
| LOGIC_PREVIEW: { | ||
| isTitleEnable: true, | ||
| isHorizontalNavEnable: true, | ||
| show: false, | ||
| loading: true, | ||
| current: { | ||
| title: '', | ||
| src: '' | ||
| }, | ||
| list: [] | ||
| } | ||
| }; | ||
| } | ||
| }); | ||
| window.LOGIC_EVENT_BUS = LOGIC_EVENT_BUS; | ||
| Vue.component('lg-preview', lgPreview); | ||
| var updateIndex = function updateIndex(list) { | ||
| list.forEach(function (item, index) { | ||
| item.index = index + 1; | ||
| }); | ||
| }; | ||
| var getImage = function getImage(src, previewItem) { | ||
| var img = new window.Image(); | ||
| img.src = src; | ||
| img.onload = function () { | ||
| previewItem['naturalHeight'] = img.naturalHeight; | ||
| previewItem['naturalWidth'] = img.naturalWidth; | ||
| setTimeout(function () { | ||
| LOGIC_EVENT_BUS.LOGIC_PREVIEW.loading = false; | ||
| }, 500); | ||
| }; | ||
| img.error = function (e) { | ||
| console.error(e); | ||
| }; | ||
| }; | ||
| Vue.directive('preview', { | ||
| bind: function bind(el, binding) { | ||
| var previewItem = { | ||
| title: el.alt || '', | ||
| el: el, | ||
| index: 0, | ||
| src: binding.value | ||
| }; | ||
| LOGIC_EVENT_BUS.LOGIC_PREVIEW.list.push(previewItem); | ||
| updateIndex(LOGIC_EVENT_BUS.LOGIC_PREVIEW.list); | ||
| el.addEventListener('click', function (e) { | ||
| e.stopPropagation(); | ||
| LOGIC_EVENT_BUS.LOGIC_PREVIEW.isTitleEnable = el.getAttribute('preview-title-enable') == 'false' ? false : true; | ||
| LOGIC_EVENT_BUS.LOGIC_PREVIEW.isHorizontalNavEnable = el.getAttribute('preview-nav-enable') == 'false' ? false : true; | ||
| LOGIC_EVENT_BUS.LOGIC_PREVIEW.show = true; | ||
| LOGIC_EVENT_BUS.LOGIC_PREVIEW.loading = true; | ||
| LOGIC_EVENT_BUS.LOGIC_PREVIEW.current = previewItem; | ||
| getImage(previewItem.src, previewItem); | ||
| }); | ||
| }, | ||
| update: function update(el, oldValue) { | ||
| var previewItem = LOGIC_EVENT_BUS.LOGIC_PREVIEW.list.find(function (item) { | ||
| return item.el === el; | ||
| }); | ||
| if (!previewItem) return; | ||
| previewItem.src = oldValue.value; | ||
| previewItem.title = el.alt; | ||
| }, | ||
| unbind: function unbind(el) { | ||
| if (el) { | ||
| LOGIC_EVENT_BUS.LOGIC_PREVIEW.list.forEach(function (item, index) { | ||
| if (el === item.el) { | ||
| LOGIC_EVENT_BUS.LOGIC_PREVIEW.list.splice(index, 1); | ||
| } | ||
| }); | ||
| } | ||
| updateIndex(LOGIC_EVENT_BUS.LOGIC_PREVIEW.list); | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
| module.exports = index; |
@@ -1,1 +0,441 @@ | ||
| var vuePicturePreview=function(){"use strict";function e(e,n,i,t,r,a,A,o,s,l){"boolean"!=typeof A&&(s=o,o=A,A=!1);var v="function"==typeof i?i.options:i;e&&e.render&&(v.render=e.render,v.staticRenderFns=e.staticRenderFns,v._compiled=!0,r&&(v.functional=!0)),t&&(v._scopeId=t);var p;if(a?(p=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__),n&&n.call(this,s(e)),e&&e._registeredComponents&&e._registeredComponents.add(a)},v._ssrRegister=p):n&&(p=A?function(){n.call(this,l(this.$root.$options.shadowRoot))}:function(e){n.call(this,o(e))}),p)if(v.functional){var d=v.render;v.render=function(e,n){return p.call(n),d(e,n)}}else{var c=v.beforeCreate;v.beforeCreate=c?[].concat(c,p):[p]}return i}function n(e){return function(e,n){return i(e,n)}}function i(e,n){var i=a?n.media||"default":e,t=o[i]||(o[i]={ids:new Set,styles:[]});if(!t.ids.has(e)){t.ids.add(e);var r=n.source;if(n.map&&(r+="\n/*# sourceURL="+n.map.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),t.element||(t.element=document.createElement("style"),t.element.type="text/css",n.media&&t.element.setAttribute("media",n.media),A.appendChild(t.element)),"styleSheet"in t.element)t.styles.push(r),t.element.styleSheet.cssText=t.styles.filter(Boolean).join("\n");else{var s=t.ids.size-1,l=document.createTextNode(r),v=t.element.childNodes;v[s]&&t.element.removeChild(v[s]),v.length?t.element.insertBefore(l,v[s]):t.element.appendChild(l)}}}var t={name:"Preview",computed:{preview:function(){return window.LOGIC_EVENT_BUS.LOGIC_PREVIEW}},methods:{leave:function(e){this.preview.show&&0!==e.target.className.indexOf("lg-preview-nav-arrow")&&this.close()},close:function(){this.preview.show=!1},preAction:function(){this.preview.loading=!0;var e=this.preview.list.indexOf(this.preview.current);if(0===e)return void(this.preview.loading=!1);e--,this.preview.current=this.preview.list[e];var n=new window.Image;n.src=this.preview.current.src,n.onload=function(){setTimeout(function(){LOGIC_EVENT_BUS.LOGIC_PREVIEW.loading=!1},500)}},nextAction:function(){this.preview.loading=!0;var e=this.preview.list.indexOf(this.preview.current);if(e===this.preview.list.length-1)return void(this.preview.loading=!1);e++,this.preview.current=this.preview.list[e];var n=new window.Image;n.src=this.preview.current.src,n.onload=function(){setTimeout(function(){LOGIC_EVENT_BUS.LOGIC_PREVIEW.loading=!1},500)}}}},r=e,a="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()),A=document.head||document.getElementsByTagName("head")[0],o={},s=n,l=t,v=function(){var e=this,n=e.$createElement,i=e._self._c||n;return i("transition",{attrs:{name:"fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.preview.show,expression:"preview.show"}],staticClass:"lg-preview-wrapper",on:{click:e.leave,touchmove:function(e){e.preventDefault()}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.preview.loading,expression:"preview.loading"}],staticClass:"lg-preview-loading"},[i("div")]),e._v(" "),e.preview.current.src?i("img",{directives:[{name:"show",rawName:"v-show",value:!e.preview.loading,expression:"!preview.loading"}],staticClass:"lg-preview-img",attrs:{src:e.preview.current.src,alt:e.preview.current.title}}):e._e(),e._v(" "),e.preview.isTitleEnable&&e.preview.current.title?i("div",{directives:[{name:"show",rawName:"v-show",value:!e.preview.loading,expression:"!preview.loading"}],staticClass:"lg-preview-title"},[e._v("\n "+e._s(e.preview.current.title)+"\n ")]):e._e(),e._v(" "),e.preview.isHorizontalNavEnable?i("div",{directives:[{name:"show",rawName:"v-show",value:!e.preview.loading,expression:"!preview.loading"}],staticClass:"lg-preview-nav-left"},[i("span",{staticClass:"lg-preview-nav-arrow",on:{click:function(n){return n.stopPropagation(),e.preAction(n)}}})]):e._e(),e._v(" "),e.preview.isHorizontalNavEnable?i("div",{directives:[{name:"show",rawName:"v-show",value:!e.preview.loading,expression:"!preview.loading"}],staticClass:"lg-preview-nav-right"},[i("span",{staticClass:"lg-preview-nav-arrow",on:{click:function(n){return n.stopPropagation(),e.nextAction(n)}}})]):e._e()])])},p=[];v._withStripped=!0;var d=function(e){e&&e("data-v-f1c51966_0",{source:"\n.fade-enter-active[data-v-f1c51966], .fade-leave-active[data-v-f1c51966] {\n transition: opacity .5s\n}\n.fade-enter[data-v-f1c51966], .fade-leave-active[data-v-f1c51966] {\n opacity: 0\n}\n.lg-preview-wrapper[data-v-f1c51966] {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n box-sizing: border-box;\n background: rgba(0, 0, 0, 0.9);\n z-index: 10000;\n}\n.lg-preview-loading[data-v-f1c51966] {\n position: absolute;\n width: 30px;\n height: 35px;\n top: 50%;\n left: 50%;\n margin-top: -17.5px;\n margin-left: -15px;\n}\n.lg-preview-loading > div[data-v-f1c51966] {\n display: inline-block;\n height: 25px;\n width: 25px;\n background: transparent;\n border-radius: 100%;\n border: 2px solid #fff;\n border-bottom-color: transparent;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-animation: rotate-data-v-f1c51966 0.75s 0s linear infinite;\n animation: rotate-data-v-f1c51966 0.75s 0s linear infinite;\n}\n@keyframes rotate-data-v-f1c51966 {\n0% {\n -webkit-transform: rotate(0deg) scale(1);\n transform: rotate(0deg) scale(1);\n}\n50% {\n -webkit-transform: rotate(180deg) scale(0.6);\n transform: rotate(180deg) scale(0.6);\n}\n100% {\n -webkit-transform: rotate(360deg) scale(1);\n transform: rotate(360deg) scale(1);\n}\n}\n.lg-preview-img[data-v-f1c51966] {\n max-width: 100%;\n max-height: 100%;\n display: block;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n margin: auto;\n}\n.lg-preview-nav-arrow[data-v-f1c51966] {\n position: absolute;\n top: 50%;\n margin-top: -15px;\n background: rgba(0, 0, 0, 0);\n line-height: 40px;\n width: 20px;\n height: 20px;\n border-top: 2px solid #fff;\n border-left: 2px solid #fff;\n}\n.lg-preview-nav-left[data-v-f1c51966],\n.lg-preview-nav-right[data-v-f1c51966] {\n position: absolute;\n height: 100%;\n margin: 0 5px;\n width: 200px;\n top: 0;\n color: #fff;\n transition: opacity .2s;\n}\n.lg-preview-nav-left[data-v-f1c51966] {\n left: 0;\n}\n.lg-preview-nav-left .lg-preview-nav-arrow[data-v-f1c51966] {\n left: 0;\n margin-left: 40px;\n transform: rotate(-45deg);\n}\n.lg-preview-nav-right[data-v-f1c51966] {\n right: 0;\n}\n.lg-preview-nav-right .lg-preview-nav-arrow[data-v-f1c51966] {\n right: 0;\n margin-right: 40px;\n transform: rotate(135deg);\n}\n.lg-preview-title[data-v-f1c51966] {\n position: absolute;\n left: 0;\n bottom: 0;\n text-align: center;\n width: 100%;\n color: #fff;\n background: rgba(0, 0, 0, .5);\n box-sizing: border-box;\n font-size: 16px;\n height: 40px;\n line-height: 40px;\n}\n@media all and (max-width: 768px) {\n.lg-preview-nav-left[data-v-f1c51966],\n .lg-preview-nav-right[data-v-f1c51966] {\n width: 100px;\n}\n.lg-preview-nav-left .lg-preview-nav-arrow[data-v-f1c51966] {\n margin-left: 20px;\n}\n.lg-preview-nav-right .lg-preview-nav-arrow[data-v-f1c51966] {\n margin-right: 20px;\n}\n}\n",map:{version:3,sources:["/Users/xlogic/code/vue-picture-preview/vue-picture-preview.vue"],names:[],mappings:";AAgFA;IACA;AACA;AAEA;IACA;AACA;AAEA;IACA,eAAA;IACA,MAAA;IACA,OAAA;IACA,WAAA;IACA,YAAA;IACA,kBAAA;IACA,sBAAA;IACA,8BAAA;IACA,cAAA;AACA;AAEA;IACA,kBAAA;IACA,WAAA;IACA,YAAA;IACA,QAAA;IACA,SAAA;IACA,mBAAA;IACA,kBAAA;AACA;AAEA;IACA,qBAAA;IACA,YAAA;IACA,WAAA;IACA,uBAAA;IACA,mBAAA;IACA,sBAAA;IACA,gCAAA;IACA,iCAAA;IACA,yBAAA;IACA,kEAAA;IACA,0DAAA;AACA;AAEA;AACA;QACA,wCAAA;QACA,gCAAA;AACA;AAEA;QACA,4CAAA;QACA,oCAAA;AACA;AAEA;QACA,0CAAA;QACA,kCAAA;AACA;AACA;AAEA;IACA,eAAA;IACA,gBAAA;IACA,cAAA;IACA,kBAAA;IACA,OAAA;IACA,MAAA;IACA,SAAA;IACA,QAAA;IACA,YAAA;AACA;AAEA;IACA,kBAAA;IACA,QAAA;IACA,iBAAA;IACA,4BAAA;IACA,iBAAA;IACA,WAAA;IACA,YAAA;IACA,0BAAA;IACA,2BAAA;AAEA;AAEA;;IAEA,kBAAA;IACA,YAAA;IACA,aAAA;IACA,YAAA;IACA,MAAA;IACA,WAAA;IACA,uBAAA;AACA;AAEA;IACA,OAAA;AACA;AAEA;IACA,OAAA;IACA,iBAAA;IACA,yBAAA;AACA;AAEA;IACA,QAAA;AACA;AAEA;IACA,QAAA;IACA,kBAAA;IACA,yBAAA;AACA;AAEA;IACA,kBAAA;IACA,OAAA;IACA,SAAA;IACA,kBAAA;IACA,WAAA;IACA,WAAA;IACA,6BAAA;IACA,sBAAA;IACA,eAAA;IACA,YAAA;IACA,iBAAA;AACA;AAEA;AACA;;QAEA,YAAA;AACA;AAEA;QACA,iBAAA;AACA;AAEA;QACA,kBAAA;AACA;AACA",file:"vue-picture-preview.vue",sourcesContent:['<template>\n <transition name="fade">\n <div class="lg-preview-wrapper" v-show="preview.show" @click="leave" @touchmove.prevent>\n <div class="lg-preview-loading" v-show="preview.loading"><div></div></div>\n <img\n class="lg-preview-img"\n v-if="preview.current.src"\n :src="preview.current.src"\n :alt="preview.current.title"\n v-show="!preview.loading"\n >\n <div class="lg-preview-title" v-if="preview.isTitleEnable&&preview.current.title" v-show="!preview.loading">\n {{preview.current.title}}\n </div>\n <div class="lg-preview-nav-left" v-if="preview.isHorizontalNavEnable" v-show="!preview.loading">\n <span class="lg-preview-nav-arrow" @click.stop="preAction" ></span>\n </div>\n <div class="lg-preview-nav-right" v-if="preview.isHorizontalNavEnable" v-show="!preview.loading">\n <span class="lg-preview-nav-arrow" @click.stop="nextAction"></span>\n </div>\n </div>\n </transition>\n</template>\n\n<script>\nexport default {\n name: \'Preview\',\n computed: {\n preview () {\n return window.LOGIC_EVENT_BUS.LOGIC_PREVIEW;\n }\n },\n methods: {\n leave (e) {\n if ((this.preview.show)&&(e.target.className.indexOf(\'lg-preview-nav-arrow\') !== 0)){\n this.close();\n }\n },\n close () {\n this.preview.show = false;\n },\n preAction () {\n this.preview.loading = true;\n var index = this.preview.list.indexOf(this.preview.current);\n if (index === 0) {\n this.preview.loading = false;\n return;\n }\n index--;\n this.preview.current = this.preview.list[index];\n var img = new window.Image();\n img.src = this.preview.current.src;\n img.onload = function () {\n setTimeout(function () {\n LOGIC_EVENT_BUS.LOGIC_PREVIEW.loading = false;\n }, 500);\n }\n },\n nextAction () {\n this.preview.loading = true;\n var index = this.preview.list.indexOf(this.preview.current);\n if (index === this.preview.list.length - 1) {\n this.preview.loading = false;\n return;\n }\n index++;\n this.preview.current = this.preview.list[index];\n var img = new window.Image();\n img.src = this.preview.current.src;\n img.onload = function () {\n setTimeout(function () {\n LOGIC_EVENT_BUS.LOGIC_PREVIEW.loading = false;\n }, 500);\n }\n },\n }\n}\n<\/script>\n\n<style scoped>\n.fade-enter-active, .fade-leave-active {\n transition: opacity .5s\n}\n\n.fade-enter, .fade-leave-active {\n opacity: 0\n}\n\n.lg-preview-wrapper {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n box-sizing: border-box;\n background: rgba(0, 0, 0, 0.9);\n z-index: 10000;\n}\n\n.lg-preview-loading {\n position: absolute;\n width: 30px;\n height: 35px;\n top: 50%;\n left: 50%;\n margin-top: -17.5px;\n margin-left: -15px;\n}\n\n.lg-preview-loading > div {\n display: inline-block;\n height: 25px;\n width: 25px;\n background: transparent;\n border-radius: 100%;\n border: 2px solid #fff;\n border-bottom-color: transparent;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-animation: rotate 0.75s 0s linear infinite;\n animation: rotate 0.75s 0s linear infinite;\n}\n\n@keyframes rotate {\n 0% {\n -webkit-transform: rotate(0deg) scale(1);\n transform: rotate(0deg) scale(1);\n }\n\n 50% {\n -webkit-transform: rotate(180deg) scale(0.6);\n transform: rotate(180deg) scale(0.6);\n }\n\n 100% {\n -webkit-transform: rotate(360deg) scale(1);\n transform: rotate(360deg) scale(1);\n }\n}\n\n.lg-preview-img {\n max-width: 100%;\n max-height: 100%;\n display: block;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n margin: auto;\n}\n\n.lg-preview-nav-arrow {\n position: absolute;\n top: 50%;\n margin-top: -15px;\n background: rgba(0, 0, 0, 0);\n line-height: 40px;\n width: 20px;\n height: 20px;\n border-top: 2px solid #fff;\n border-left: 2px solid #fff;\n\n}\n\n.lg-preview-nav-left,\n.lg-preview-nav-right {\n position: absolute;\n height: 100%;\n margin: 0 5px;\n width: 200px;\n top: 0;\n color: #fff;\n transition: opacity .2s;\n}\n\n.lg-preview-nav-left {\n left: 0;\n}\n\n.lg-preview-nav-left .lg-preview-nav-arrow {\n left: 0;\n margin-left: 40px;\n transform: rotate(-45deg);\n}\n\n.lg-preview-nav-right {\n right: 0;\n}\n\n.lg-preview-nav-right .lg-preview-nav-arrow {\n right: 0;\n margin-right: 40px;\n transform: rotate(135deg);\n}\n\n.lg-preview-title {\n position: absolute;\n left: 0;\n bottom: 0;\n text-align: center;\n width: 100%;\n color: #fff;\n background: rgba(0, 0, 0, .5);\n box-sizing: border-box;\n font-size: 16px;\n height: 40px;\n line-height: 40px;\n}\n\n@media all and (max-width: 768px) {\n .lg-preview-nav-left,\n .lg-preview-nav-right {\n width: 100px;\n }\n\n .lg-preview-nav-left .lg-preview-nav-arrow {\n margin-left: 20px;\n }\n\n .lg-preview-nav-right .lg-preview-nav-arrow {\n margin-right: 20px;\n }\n}\n</style>\n']},media:void 0})},c=r({render:v,staticRenderFns:p},d,l,"data-v-f1c51966",!1,void 0,s,void 0);return{install:function(e,n){function i(e,n){var i=new window.Image;i.src=e,i.onload=function(){n.naturalHeight=i.naturalHeight,n.naturalWidth=i.naturalWidth,setTimeout(function(){t.LOGIC_PREVIEW.loading=!1},500)},i.error=function(e){console.error(e)}}var t=new e({data:function(){return{LOGIC_PREVIEW:{isTitleEnable:!0,isHorizontalNavEnable:!0,show:!1,loading:!0,current:{title:"",src:""},list:[]}}}});window.LOGIC_EVENT_BUS=t,e.component("lg-preview",c);var r=function(e){e.forEach(function(e,n){e.index=n+1})};e.directive("preview",{bind:function(e,n){var a={title:e.alt||"",el:e,index:0,src:n.value};t.LOGIC_PREVIEW.list.push(a),r(t.LOGIC_PREVIEW.list),e.addEventListener("click",function(n){n.stopPropagation(),t.LOGIC_PREVIEW.isTitleEnable="false"!=e.getAttribute("preview-title-enable"),t.LOGIC_PREVIEW.isHorizontalNavEnable="false"!=e.getAttribute("preview-nav-enable"),t.LOGIC_PREVIEW.show=!0,t.LOGIC_PREVIEW.loading=!0,t.LOGIC_PREVIEW.current=a,i(a.src,a)})},update:function(e,n){var i=t.LOGIC_PREVIEW.list.find(function(n){return n.el===e});i&&(i.src=n.value,i.title=e.alt)},unbind:function(e){e&&t.LOGIC_PREVIEW.list.forEach(function(n,i){e===n.el&&t.LOGIC_PREVIEW.list.splice(i,1)}),r(t.LOGIC_PREVIEW.list)}})}}}(); | ||
| var vuePicturePreview = (function () { | ||
| 'use strict'; | ||
| function styleInject(css, ref) { | ||
| if ( ref === void 0 ) ref = {}; | ||
| var insertAt = ref.insertAt; | ||
| if (!css || typeof document === 'undefined') { return; } | ||
| var head = document.head || document.getElementsByTagName('head')[0]; | ||
| var style = document.createElement('style'); | ||
| style.type = 'text/css'; | ||
| if (insertAt === 'top') { | ||
| if (head.firstChild) { | ||
| head.insertBefore(style, head.firstChild); | ||
| } else { | ||
| head.appendChild(style); | ||
| } | ||
| } else { | ||
| head.appendChild(style); | ||
| } | ||
| if (style.styleSheet) { | ||
| style.styleSheet.cssText = css; | ||
| } else { | ||
| style.appendChild(document.createTextNode(css)); | ||
| } | ||
| } | ||
| var css = ".lg-preview-fade-enter-active,.lg-preview-fade-leave-active{-webkit-transition:opacity .5s;transition:opacity .5s}.lg-preview-fade-enter,.lg-preview-fade-leave-active{opacity:0}.lg-preview-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;box-sizing:border-box;background:rgba(0,0,0,.9);z-index:10000}.lg-preview-wrapper .lg-preview-loading{position:absolute;width:30px;height:35px;top:50%;left:50%;margin-top:-17.5px;margin-left:-15px}.lg-preview-wrapper .lg-preview-loading>div{display:inline-block;height:25px;width:25px;background:transparent;border-radius:100%;border:2px solid;border-color:#fff #fff transparent;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:lg-preview-loading-rotate .75s linear 0s infinite;animation:lg-preview-loading-rotate .75s linear 0s infinite}@-webkit-keyframes lg-preview-loading-rotate{0%{-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6)}to{-webkit-transform:rotate(1turn) scale(1);transform:rotate(1turn) scale(1)}}@keyframes lg-preview-loading-rotate{0%{-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6)}to{-webkit-transform:rotate(1turn) scale(1);transform:rotate(1turn) scale(1)}}.lg-preview-wrapper .lg-preview-img{max-width:100%;max-height:100%;display:block;position:absolute;left:0;top:0;bottom:0;right:0;margin:auto}.lg-preview-wrapper .lg-preview-nav-arrow{position:absolute;top:50%;margin-top:-15px;background:transparent;line-height:40px;width:20px;height:20px;border-top:2px solid #fff;border-left:2px solid #fff}.lg-preview-wrapper .lg-preview-nav-left,.lg-preview-wrapper .lg-preview-nav-right{position:absolute;height:100%;margin:0 5px;width:200px;top:0;color:#fff;-webkit-transition:opacity .2s;transition:opacity .2s}.lg-preview-wrapper .lg-preview-nav-left{left:0}.lg-preview-wrapper .lg-preview-nav-left .lg-preview-nav-arrow{left:0;margin-left:40px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.lg-preview-wrapper .lg-preview-nav-right{right:0}.lg-preview-wrapper .lg-preview-nav-right .lg-preview-nav-arrow{right:0;margin-right:40px;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.lg-preview-wrapper .lg-preview-title{position:absolute;left:0;bottom:0;text-align:center;width:100%;color:#fff;background:rgba(0,0,0,.5);box-sizing:border-box;font-size:16px;height:40px;line-height:40px}@media (max-width:768px){.lg-preview-wrapper .lg-preview-nav-left,.lg-preview-wrapper .lg-preview-nav-right{width:100px}.lg-preview-wrapper .lg-preview-nav-left .lg-preview-nav-arrow{margin-left:20px}.lg-preview-wrapper .lg-preview-nav-right .lg-preview-nav-arrow{margin-right:20px}}"; | ||
| styleInject(css); | ||
| // | ||
| var script = { | ||
| name: 'Preview', | ||
| computed: { | ||
| preview: function preview() { | ||
| return window.LOGIC_EVENT_BUS.LOGIC_PREVIEW; | ||
| } | ||
| }, | ||
| watch: { | ||
| $route: function $route() { | ||
| this.preview.show = false; | ||
| } | ||
| }, | ||
| methods: { | ||
| leave: function leave(e) { | ||
| if (this.preview.show && e.target.className.indexOf('lg-preview-nav-arrow') !== 0) { | ||
| this.close(); | ||
| } | ||
| }, | ||
| close: function close() { | ||
| this.preview.show = false; | ||
| }, | ||
| preAction: function preAction() { | ||
| this.preview.loading = true; | ||
| var index = this.preview.list.indexOf(this.preview.current); | ||
| if (index === 0) { | ||
| this.preview.loading = false; | ||
| return; | ||
| } | ||
| index--; | ||
| this.preview.current = this.preview.list[index]; | ||
| var img = new window.Image(); | ||
| img.src = this.preview.current.src; | ||
| img.onload = function () { | ||
| setTimeout(function () { | ||
| window.LOGIC_EVENT_BUS.LOGIC_PREVIEW.loading = false; | ||
| }, 500); | ||
| }; | ||
| }, | ||
| nextAction: function nextAction() { | ||
| this.preview.loading = true; | ||
| var index = this.preview.list.indexOf(this.preview.current); | ||
| if (index === this.preview.list.length - 1) { | ||
| this.preview.loading = false; | ||
| return; | ||
| } | ||
| index++; | ||
| this.preview.current = this.preview.list[index]; | ||
| var img = new window.Image(); | ||
| img.src = this.preview.current.src; | ||
| img.onload = function () { | ||
| setTimeout(function () { | ||
| window.LOGIC_EVENT_BUS.LOGIC_PREVIEW.loading = false; | ||
| }, 500); | ||
| }; | ||
| } | ||
| } | ||
| }; | ||
| function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier | ||
| /* server only */ | ||
| , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { | ||
| if (typeof shadowMode !== 'boolean') { | ||
| createInjectorSSR = createInjector; | ||
| createInjector = shadowMode; | ||
| shadowMode = false; | ||
| } // Vue.extend constructor export interop. | ||
| var options = typeof script === 'function' ? script.options : script; // render functions | ||
| if (template && template.render) { | ||
| options.render = template.render; | ||
| options.staticRenderFns = template.staticRenderFns; | ||
| options._compiled = true; // functional template | ||
| if (isFunctionalTemplate) { | ||
| options.functional = true; | ||
| } | ||
| } // scopedId | ||
| if (scopeId) { | ||
| options._scopeId = scopeId; | ||
| } | ||
| var hook; | ||
| if (moduleIdentifier) { | ||
| // server build | ||
| hook = function hook(context) { | ||
| // 2.3 injection | ||
| context = context || // cached call | ||
| this.$vnode && this.$vnode.ssrContext || // stateful | ||
| this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional | ||
| // 2.2 with runInNewContext: true | ||
| if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { | ||
| context = __VUE_SSR_CONTEXT__; | ||
| } // inject component styles | ||
| if (style) { | ||
| style.call(this, createInjectorSSR(context)); | ||
| } // register component module identifier for async chunk inference | ||
| if (context && context._registeredComponents) { | ||
| context._registeredComponents.add(moduleIdentifier); | ||
| } | ||
| }; // used by ssr in case component is cached and beforeCreate | ||
| // never gets called | ||
| options._ssrRegister = hook; | ||
| } else if (style) { | ||
| hook = shadowMode ? function () { | ||
| style.call(this, createInjectorShadow(this.$root.$options.shadowRoot)); | ||
| } : function (context) { | ||
| style.call(this, createInjector(context)); | ||
| }; | ||
| } | ||
| if (hook) { | ||
| if (options.functional) { | ||
| // register for functional component in vue file | ||
| var originalRender = options.render; | ||
| options.render = function renderWithStyleInjection(h, context) { | ||
| hook.call(context); | ||
| return originalRender(h, context); | ||
| }; | ||
| } else { | ||
| // inject component registration as beforeCreate hook | ||
| var existing = options.beforeCreate; | ||
| options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; | ||
| } | ||
| } | ||
| return script; | ||
| } | ||
| var normalizeComponent_1 = normalizeComponent; | ||
| /* script */ | ||
| const __vue_script__ = script; | ||
| /* template */ | ||
| var __vue_render__ = function() { | ||
| var _vm = this; | ||
| var _h = _vm.$createElement; | ||
| var _c = _vm._self._c || _h; | ||
| return _c("transition", { attrs: { name: "lg-preview-fade" } }, [ | ||
| _vm.preview.show | ||
| ? _c( | ||
| "div", | ||
| { | ||
| staticClass: "lg-preview-wrapper", | ||
| on: { | ||
| click: _vm.leave, | ||
| touchmove: function($event) { | ||
| $event.preventDefault(); | ||
| } | ||
| } | ||
| }, | ||
| [ | ||
| _c( | ||
| "div", | ||
| { | ||
| directives: [ | ||
| { | ||
| name: "show", | ||
| rawName: "v-show", | ||
| value: _vm.preview.loading, | ||
| expression: "preview.loading" | ||
| } | ||
| ], | ||
| staticClass: "lg-preview-loading" | ||
| }, | ||
| [_c("div")] | ||
| ), | ||
| _vm._v(" "), | ||
| _vm.preview.current.src | ||
| ? _c("img", { | ||
| directives: [ | ||
| { | ||
| name: "show", | ||
| rawName: "v-show", | ||
| value: !_vm.preview.loading, | ||
| expression: "!preview.loading" | ||
| } | ||
| ], | ||
| staticClass: "lg-preview-img", | ||
| attrs: { | ||
| src: _vm.preview.current.src, | ||
| alt: _vm.preview.current.title | ||
| } | ||
| }) | ||
| : _vm._e(), | ||
| _vm._v(" "), | ||
| _vm.preview.isTitleEnable && _vm.preview.current.title | ||
| ? _c( | ||
| "div", | ||
| { | ||
| directives: [ | ||
| { | ||
| name: "show", | ||
| rawName: "v-show", | ||
| value: !_vm.preview.loading, | ||
| expression: "!preview.loading" | ||
| } | ||
| ], | ||
| staticClass: "lg-preview-title" | ||
| }, | ||
| [ | ||
| _vm._v( | ||
| "\n " + _vm._s(_vm.preview.current.title) + "\n " | ||
| ) | ||
| ] | ||
| ) | ||
| : _vm._e(), | ||
| _vm._v(" "), | ||
| _vm.preview.isHorizontalNavEnable | ||
| ? _c( | ||
| "div", | ||
| { | ||
| directives: [ | ||
| { | ||
| name: "show", | ||
| rawName: "v-show", | ||
| value: !_vm.preview.loading, | ||
| expression: "!preview.loading" | ||
| } | ||
| ], | ||
| staticClass: "lg-preview-nav-left" | ||
| }, | ||
| [ | ||
| _c("span", { | ||
| staticClass: "lg-preview-nav-arrow", | ||
| on: { | ||
| click: function($event) { | ||
| $event.stopPropagation(); | ||
| return _vm.preAction($event) | ||
| } | ||
| } | ||
| }) | ||
| ] | ||
| ) | ||
| : _vm._e(), | ||
| _vm._v(" "), | ||
| _vm.preview.isHorizontalNavEnable | ||
| ? _c( | ||
| "div", | ||
| { | ||
| directives: [ | ||
| { | ||
| name: "show", | ||
| rawName: "v-show", | ||
| value: !_vm.preview.loading, | ||
| expression: "!preview.loading" | ||
| } | ||
| ], | ||
| staticClass: "lg-preview-nav-right" | ||
| }, | ||
| [ | ||
| _c("span", { | ||
| staticClass: "lg-preview-nav-arrow", | ||
| on: { | ||
| click: function($event) { | ||
| $event.stopPropagation(); | ||
| return _vm.nextAction($event) | ||
| } | ||
| } | ||
| }) | ||
| ] | ||
| ) | ||
| : _vm._e() | ||
| ] | ||
| ) | ||
| : _vm._e() | ||
| ]) | ||
| }; | ||
| var __vue_staticRenderFns__ = []; | ||
| __vue_render__._withStripped = true; | ||
| /* style */ | ||
| const __vue_inject_styles__ = undefined; | ||
| /* scoped */ | ||
| const __vue_scope_id__ = undefined; | ||
| /* module identifier */ | ||
| const __vue_module_identifier__ = undefined; | ||
| /* functional template */ | ||
| const __vue_is_functional_template__ = false; | ||
| /* style inject */ | ||
| /* style inject SSR */ | ||
| var lgPreview = normalizeComponent_1( | ||
| { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, | ||
| __vue_inject_styles__, | ||
| __vue_script__, | ||
| __vue_scope_id__, | ||
| __vue_is_functional_template__, | ||
| __vue_module_identifier__, | ||
| undefined, | ||
| undefined | ||
| ); | ||
| var index = { | ||
| install: function install(Vue) { | ||
| // 添加的内容写在这个函数里面 | ||
| var LOGIC_EVENT_BUS = new Vue({ | ||
| data: function data() { | ||
| return { | ||
| LOGIC_PREVIEW: { | ||
| isTitleEnable: true, | ||
| isHorizontalNavEnable: true, | ||
| show: false, | ||
| loading: true, | ||
| current: { | ||
| title: '', | ||
| src: '' | ||
| }, | ||
| list: [] | ||
| } | ||
| }; | ||
| } | ||
| }); | ||
| window.LOGIC_EVENT_BUS = LOGIC_EVENT_BUS; | ||
| Vue.component('lg-preview', lgPreview); | ||
| var updateIndex = function updateIndex(list) { | ||
| list.forEach(function (item, index) { | ||
| item.index = index + 1; | ||
| }); | ||
| }; | ||
| var getImage = function getImage(src, previewItem) { | ||
| var img = new window.Image(); | ||
| img.src = src; | ||
| img.onload = function () { | ||
| previewItem['naturalHeight'] = img.naturalHeight; | ||
| previewItem['naturalWidth'] = img.naturalWidth; | ||
| setTimeout(function () { | ||
| LOGIC_EVENT_BUS.LOGIC_PREVIEW.loading = false; | ||
| }, 500); | ||
| }; | ||
| img.error = function (e) { | ||
| console.error(e); | ||
| }; | ||
| }; | ||
| Vue.directive('preview', { | ||
| bind: function bind(el, binding) { | ||
| var previewItem = { | ||
| title: el.alt || '', | ||
| el: el, | ||
| index: 0, | ||
| src: binding.value | ||
| }; | ||
| LOGIC_EVENT_BUS.LOGIC_PREVIEW.list.push(previewItem); | ||
| updateIndex(LOGIC_EVENT_BUS.LOGIC_PREVIEW.list); | ||
| el.addEventListener('click', function (e) { | ||
| e.stopPropagation(); | ||
| LOGIC_EVENT_BUS.LOGIC_PREVIEW.isTitleEnable = el.getAttribute('preview-title-enable') == 'false' ? false : true; | ||
| LOGIC_EVENT_BUS.LOGIC_PREVIEW.isHorizontalNavEnable = el.getAttribute('preview-nav-enable') == 'false' ? false : true; | ||
| LOGIC_EVENT_BUS.LOGIC_PREVIEW.show = true; | ||
| LOGIC_EVENT_BUS.LOGIC_PREVIEW.loading = true; | ||
| LOGIC_EVENT_BUS.LOGIC_PREVIEW.current = previewItem; | ||
| getImage(previewItem.src, previewItem); | ||
| }); | ||
| }, | ||
| update: function update(el, oldValue) { | ||
| var previewItem = LOGIC_EVENT_BUS.LOGIC_PREVIEW.list.find(function (item) { | ||
| return item.el === el; | ||
| }); | ||
| if (!previewItem) return; | ||
| previewItem.src = oldValue.value; | ||
| previewItem.title = el.alt; | ||
| }, | ||
| unbind: function unbind(el) { | ||
| if (el) { | ||
| LOGIC_EVENT_BUS.LOGIC_PREVIEW.list.forEach(function (item, index) { | ||
| if (el === item.el) { | ||
| LOGIC_EVENT_BUS.LOGIC_PREVIEW.list.splice(index, 1); | ||
| } | ||
| }); | ||
| } | ||
| updateIndex(LOGIC_EVENT_BUS.LOGIC_PREVIEW.list); | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
| return index; | ||
| }()); |
| { | ||
| "name": "vue-picture-preview", | ||
| "version": "1.2.1", | ||
| "version": "1.3.0", | ||
| "description": "移动端Vue.js图片预览插件 | Mobile-friendly picture file preview Vue.js plugin with horizontal nav and bottom title.", | ||
@@ -28,12 +28,26 @@ "main": "dist/vue-picture-preview.js", | ||
| "devDependencies": { | ||
| "babel-core": "^6.22.1", | ||
| "babel-preset-es2015-rollup": "^3.0.0", | ||
| "rollup": "^0.41.4", | ||
| "rollup-plugin-babel": "^2.7.1", | ||
| "rollup-plugin-commonjs": "^7.0.0", | ||
| "rollup-plugin-node-resolve": "^2.0.0", | ||
| "rollup-plugin-uglify": "^1.0.1", | ||
| "@babel/core": "^7.5.4", | ||
| "@babel/preset-env": "^7.5.4", | ||
| "cssnano": "^4.1.10", | ||
| "eslint-plugin-html": "^6.0.0", | ||
| "eslint-plugin-standard": "^4.0.0", | ||
| "eslint-plugin-vue": "^5.2.3", | ||
| "postcss-nested": "^4.1.2", | ||
| "postcss-preset-env": "^6.7.0", | ||
| "postcss-simple-vars": "^5.0.2", | ||
| "rollup": "^1.0.0", | ||
| "rollup-plugin-babel": "^4.3.3", | ||
| "rollup-plugin-commonjs": "^9.2.0", | ||
| "rollup-plugin-eslint": "^7.0.0", | ||
| "rollup-plugin-node-resolve": "^4.0.0", | ||
| "rollup-plugin-postcss": "^2.0.3", | ||
| "rollup-plugin-replace": "^2.2.0", | ||
| "rollup-plugin-uglify": "^6.0.2", | ||
| "rollup-plugin-vue": "^4.7.2", | ||
| "vue-template-compiler": "^2.6.7" | ||
| } | ||
| }, | ||
| "browserslist": [ | ||
| "iOS >= 7", | ||
| "Android >= 4" | ||
| ] | ||
| } |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by22.22%
11
- Lines of code
- increased by302.57%
1095
Worsened metrics
- Total package byte prevSize
- decreased by-4.01%
46745
- Dev dependency count
- increased by111.11%
19
No dependency changes