├── .babelrc ├── .gitignore ├── README.md ├── dist ├── vue-img-loader.common.js └── vue-img-loader.min.js ├── docs ├── assets │ └── images │ │ ├── img_00.jpg │ │ ├── img_00_preview.jpg │ │ ├── img_01.jpg │ │ ├── img_01_preview.jpg │ │ ├── img_02.jpg │ │ ├── img_02_preview.jpg │ │ ├── img_03.jpg │ │ └── img_03_preview.jpg ├── index.html └── vue-img-loader.min.js ├── package.json ├── src ├── VueImgLoader.vue ├── config.js ├── index.js └── lazy.js ├── webpack.as.umd.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## description 2 | 3 | this is a image loader UI component for Vue 2.X. The image will be center positioned after loaded 4 | 5 | ## demo 6 | 7 | [live demo][1] 8 | 9 | ## requirement 10 | 11 | Vue 2.0 12 | 13 | ## install 14 | 15 | by npm 16 | 17 | ```bash 18 | npm i vue-img-loader --save 19 | ``` 20 | 21 | or, directly include dist/vue-img-loader.min.js in your page, VueImgLoader exposed as global variable 22 | 23 | ```html 24 | 7 | 8 | 31 | 32 | 33 |
34 |

This is vue-img-loader demo. Please set Network as Good 3G in devTools and refresh the page.

35 |

preview (cover center)

36 | 37 | 40 |

preview (contain center)

41 | 42 | 46 |

blur preview

47 | 48 | 50 |

transition

51 | 52 | 55 |

background color

56 | 57 | 59 |

customize preview content

60 | 61 | 62 |
loading...
63 | 64 |
65 | 66 | 67 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /docs/vue-img-loader.min.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(); 4 | else if(typeof define === 'function' && define.amd) 5 | define([], factory); 6 | else if(typeof exports === 'object') 7 | exports["VueImgLoader"] = factory(); 8 | else 9 | root["VueImgLoader"] = factory(); 10 | })(this, function() { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) 20 | /******/ return installedModules[moduleId].exports; 21 | 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ exports: {}, 25 | /******/ id: moduleId, 26 | /******/ loaded: false 27 | /******/ }; 28 | 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | 32 | /******/ // Flag the module as loaded 33 | /******/ module.loaded = true; 34 | 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | 39 | 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | 46 | /******/ // __webpack_public_path__ 47 | /******/ __webpack_require__.p = ""; 48 | 49 | /******/ // Load entry module and return exports 50 | /******/ return __webpack_require__(0); 51 | /******/ }) 52 | /************************************************************************/ 53 | /******/ ([ 54 | /* 0 */ 55 | /***/ function(module, exports, __webpack_require__) { 56 | 57 | 'use strict'; 58 | 59 | var _VueImgLoader = __webpack_require__(1); 60 | 61 | var _VueImgLoader2 = _interopRequireDefault(_VueImgLoader); 62 | 63 | var _config = __webpack_require__(9); 64 | 65 | var _config2 = _interopRequireDefault(_config); 66 | 67 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 68 | 69 | _VueImgLoader2.default.config = _config2.default; 70 | _VueImgLoader2.default.version = '0.1.1'; 71 | 72 | module.exports = _VueImgLoader2.default; 73 | 74 | /***/ }, 75 | /* 1 */ 76 | /***/ function(module, exports, __webpack_require__) { 77 | 78 | var __vue_exports__, __vue_options__ 79 | 80 | /* styles */ 81 | __webpack_require__(2) 82 | 83 | /* script */ 84 | __vue_exports__ = __webpack_require__(6) 85 | 86 | /* template */ 87 | var __vue_template__ = __webpack_require__(10) 88 | __vue_options__ = __vue_exports__ = __vue_exports__ || {} 89 | if ( 90 | typeof __vue_exports__.default === "object" || 91 | typeof __vue_exports__.default === "function" 92 | ) { 93 | if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")} 94 | __vue_options__ = __vue_exports__ = __vue_exports__.default 95 | } 96 | if (typeof __vue_options__ === "function") { 97 | __vue_options__ = __vue_options__.options 98 | } 99 | __vue_options__.__file = "/Users/Jack/Work/vue-img-loader/src/VueImgLoader.vue" 100 | __vue_options__.render = __vue_template__.render 101 | __vue_options__.staticRenderFns = __vue_template__.staticRenderFns 102 | __vue_options__._scopeId = "data-v-5d001430" 103 | 104 | /* hot reload */ 105 | if (false) {(function () { 106 | var hotAPI = require("vue-hot-reload-api") 107 | hotAPI.install(require("vue"), false) 108 | if (!hotAPI.compatible) return 109 | module.hot.accept() 110 | if (!module.hot.data) { 111 | hotAPI.createRecord("data-v-5d001430", __vue_options__) 112 | } else { 113 | hotAPI.reload("data-v-5d001430", __vue_options__) 114 | } 115 | })()} 116 | if (__vue_options__.functional) {console.error("[vue-loader] VueImgLoader.vue: functional components are not supported and should be defined in plain js files using render functions.")} 117 | 118 | module.exports = __vue_exports__ 119 | 120 | 121 | /***/ }, 122 | /* 2 */ 123 | /***/ function(module, exports, __webpack_require__) { 124 | 125 | // style-loader: Adds some css to the DOM by adding a 18 | 19 | 31 | 32 | 209 | -------------------------------------------------------------------------------- /src/config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | blurPreview: true, 3 | blurRadius: 20, 4 | blurAlphaChannel: false, 5 | width: 0, 6 | height: 0, 7 | lazy: false, 8 | backgroundColor: '', 9 | transition: '', 10 | centerType: 'cover' 11 | } 12 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import VueImgLoader from './VueImgLoader.vue'; 2 | import config from './config'; 3 | 4 | VueImgLoader.config = config; 5 | VueImgLoader.version = '0.1.1'; 6 | 7 | module.exports = VueImgLoader; 8 | -------------------------------------------------------------------------------- /src/lazy.js: -------------------------------------------------------------------------------- 1 | function checkInView (element, viewRect) { 2 | let rect = element.getBoundingClientRect(); 3 | 4 | if (!viewRect) { 5 | viewRect = {top: 0, right: window.innerWidth, bottom: window.innerHeight, left: 0}; 6 | } 7 | 8 | return !(rect.bottom < viewRect.top 9 | || rect.right < viewRect.left 10 | || rect.top > viewRect.bottom 11 | || rect.left > viewRect.rigth); 12 | } 13 | -------------------------------------------------------------------------------- /webpack.as.umd.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var webpack = require('webpack'); 3 | var path = require('path'); 4 | 5 | module.exports = { 6 | entry: { 7 | 'vue-img-loader': './src/index.js' 8 | }, 9 | output: { 10 | path: path.resolve(__dirname, './dist'), 11 | filename: '[name].min.js', 12 | library: 'VueImgLoader', 13 | libraryTarget: 'umd' 14 | }, 15 | module: { 16 | loaders: [{ 17 | test: /\.vue$/, 18 | loader: 'vue' 19 | }, { 20 | test: /\.js$/, 21 | loader: 'babel' 22 | }, { 23 | test: /\.css$/, 24 | loader: "style!css" 25 | }] 26 | }, 27 | plugins: [ 28 | /*new webpack.optimize.UglifyJsPlugin({ 29 | minimize: true, 30 | compress: { 31 | warnings: false 32 | } 33 | })*/ 34 | ] 35 | }; 36 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var webpack = require('webpack'); 3 | var path = require('path'); 4 | 5 | module.exports = { 6 | entry: { 7 | 'vue-img-loader': './src/index.js' 8 | }, 9 | output: { 10 | path: path.resolve(__dirname, './dist'), 11 | filename: '[name].common.js', 12 | library: 'VueImgLoader', 13 | libraryTarget: 'commonjs2' 14 | }, 15 | module: { 16 | loaders: [{ 17 | test: /\.vue$/, 18 | loader: 'vue' 19 | }, { 20 | test: /\.js$/, 21 | loader: 'babel' 22 | }, { 23 | test: /\.css$/, 24 | loader: "style!css" 25 | }] 26 | }, 27 | plugins: [ 28 | new webpack.optimize.UglifyJsPlugin({ 29 | minimize: true, 30 | compress: { 31 | warnings: false 32 | } 33 | }) 34 | ] 35 | }; 36 | --------------------------------------------------------------------------------