├── .gitattributes ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── .gitignore ├── cover.jpg ├── demo ├── assets │ ├── logo.png │ ├── images │ │ └── bg1.jpg │ ├── img │ │ ├── bg-funs.gif │ │ ├── bg-per.gif │ │ ├── bg-tit.png │ │ ├── bg-wrap.jpg │ │ ├── ic_vip.png │ │ ├── ico-min.png │ │ ├── pic-rec.png │ │ ├── spr-acc.png │ │ ├── spr-d1.png │ │ ├── spr-d3.png │ │ ├── spr-fav.png │ │ ├── spr-jw.png │ │ ├── spr-nav.png │ │ ├── spr-per.png │ │ ├── spr-pop.png │ │ ├── spr-vip.png │ │ ├── timg.jpeg │ │ ├── bg-intro.jpg │ │ ├── bg-jiuwo.jpg │ │ ├── bg-jiuwo.png │ │ ├── ico-from.png │ │ ├── ico-live.png │ │ ├── ico-logo.png │ │ ├── ico-play.gif │ │ ├── ico-play.png │ │ ├── ico-type.png │ │ ├── spr-badge.png │ │ ├── spr-blank.png │ │ ├── spr-emoji.png │ │ ├── spr-game.png │ │ ├── spr-icon.png │ │ ├── spr-index.png │ │ ├── spr-level.png │ │ ├── spr-load.png │ │ ├── spr-page.png │ │ ├── spr-tips.png │ │ ├── bg-jiuwo-2.png │ │ ├── jiuwo │ │ │ ├── iczb.png │ │ │ ├── spr-jw.png │ │ │ └── giftPop.png │ │ ├── spr-nav-d2.png │ │ ├── spr-page-1.png │ │ ├── spr-player.png │ │ ├── spr-praise.png │ │ ├── jinrong │ │ │ ├── spr-jr.png │ │ │ └── spr-jr-ani.png │ │ └── jinrong.css │ ├── font │ │ ├── dincond-webfont.woff │ │ └── dincond-webfont.woff2 │ └── css │ │ ├── load.css │ │ ├── icon.css │ │ └── load-sec.css ├── dist │ ├── static │ │ ├── img │ │ │ ├── bg1.ecd0b69.jpg │ │ │ ├── spr-d3.068dda5.png │ │ │ ├── bg-intro.9ded910.jpg │ │ │ ├── bg-wrap.d9355d7.jpg │ │ │ ├── giftPop.e895731.png │ │ │ ├── spr-acc.95971c0.png │ │ │ ├── spr-emoji.9ac75cc.png │ │ │ ├── spr-fav.bfa6869.png │ │ │ ├── spr-index.0ccc261.png │ │ │ ├── spr-nav.3bd1f10.png │ │ │ └── spr-tips.9925165.png │ │ ├── fonts │ │ │ ├── dincond-webfont.12646c0.woff2 │ │ │ └── dincond-webfont.b3eb146.woff │ │ └── js │ │ │ ├── manifest.08b3988500ea166cfe66.js │ │ │ ├── 11.64f212a22e288139402c.js │ │ │ ├── 12.dfa0e2443a587c28ecd2.js │ │ │ ├── app.26d28d9a8b22b3019f9c.js │ │ │ ├── 5.ea4391f15177dc336534.js │ │ │ ├── 11.64f212a22e288139402c.js.map │ │ │ ├── manifest.08b3988500ea166cfe66.js.map │ │ │ └── 9.e3b86fd5919f6dbaae27.js │ └── index.html ├── index.html ├── main.js ├── components │ ├── MsgItemSkeleton.vue │ ├── StSeriesSohuSkeleton.vue │ ├── StMoJinSkeleton.vue │ ├── StMovieQqSkeleton.vue │ ├── MsgItem.vue │ ├── StLiveSkeleton.vue │ ├── StNiuxSkeleton.vue │ ├── StSeriesSohu.vue │ ├── StMovieQq.vue │ └── StMoJin.vue ├── router │ └── index.js ├── views │ ├── Timeout.vue │ ├── LargePage.vue │ ├── SpecificViewport.vue │ ├── CustomTransition.vue │ ├── LargePageChunks.vue │ └── LargePageNotLazy.vue └── App.vue ├── .babelrc ├── .editorconfig ├── src ├── transition.css ├── vue-lazy-component.js └── VueLazyComponent.vue ├── LICENSE ├── package.json ├── CHANGELOG.md ├── README.md ├── README.en.md └── dist └── vue-lazy-component.js /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js linguist-language=Vue 2 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | package-lock.json 5 | -------------------------------------------------------------------------------- /cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/cover.jpg -------------------------------------------------------------------------------- /demo/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/logo.png -------------------------------------------------------------------------------- /demo/assets/images/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/images/bg1.jpg -------------------------------------------------------------------------------- /demo/assets/img/bg-funs.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/bg-funs.gif -------------------------------------------------------------------------------- /demo/assets/img/bg-per.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/bg-per.gif -------------------------------------------------------------------------------- /demo/assets/img/bg-tit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/bg-tit.png -------------------------------------------------------------------------------- /demo/assets/img/bg-wrap.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/bg-wrap.jpg -------------------------------------------------------------------------------- /demo/assets/img/ic_vip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/ic_vip.png -------------------------------------------------------------------------------- /demo/assets/img/ico-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/ico-min.png -------------------------------------------------------------------------------- /demo/assets/img/pic-rec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/pic-rec.png -------------------------------------------------------------------------------- /demo/assets/img/spr-acc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-acc.png -------------------------------------------------------------------------------- /demo/assets/img/spr-d1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-d1.png -------------------------------------------------------------------------------- /demo/assets/img/spr-d3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-d3.png -------------------------------------------------------------------------------- /demo/assets/img/spr-fav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-fav.png -------------------------------------------------------------------------------- /demo/assets/img/spr-jw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-jw.png -------------------------------------------------------------------------------- /demo/assets/img/spr-nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-nav.png -------------------------------------------------------------------------------- /demo/assets/img/spr-per.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-per.png -------------------------------------------------------------------------------- /demo/assets/img/spr-pop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-pop.png -------------------------------------------------------------------------------- /demo/assets/img/spr-vip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-vip.png -------------------------------------------------------------------------------- /demo/assets/img/timg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/timg.jpeg -------------------------------------------------------------------------------- /demo/assets/img/bg-intro.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/bg-intro.jpg -------------------------------------------------------------------------------- /demo/assets/img/bg-jiuwo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/bg-jiuwo.jpg -------------------------------------------------------------------------------- /demo/assets/img/bg-jiuwo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/bg-jiuwo.png -------------------------------------------------------------------------------- /demo/assets/img/ico-from.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/ico-from.png -------------------------------------------------------------------------------- /demo/assets/img/ico-live.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/ico-live.png -------------------------------------------------------------------------------- /demo/assets/img/ico-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/ico-logo.png -------------------------------------------------------------------------------- /demo/assets/img/ico-play.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/ico-play.gif -------------------------------------------------------------------------------- /demo/assets/img/ico-play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/ico-play.png -------------------------------------------------------------------------------- /demo/assets/img/ico-type.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/ico-type.png -------------------------------------------------------------------------------- /demo/assets/img/spr-badge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-badge.png -------------------------------------------------------------------------------- /demo/assets/img/spr-blank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-blank.png -------------------------------------------------------------------------------- /demo/assets/img/spr-emoji.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-emoji.png -------------------------------------------------------------------------------- /demo/assets/img/spr-game.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-game.png -------------------------------------------------------------------------------- /demo/assets/img/spr-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-icon.png -------------------------------------------------------------------------------- /demo/assets/img/spr-index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-index.png -------------------------------------------------------------------------------- /demo/assets/img/spr-level.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-level.png -------------------------------------------------------------------------------- /demo/assets/img/spr-load.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-load.png -------------------------------------------------------------------------------- /demo/assets/img/spr-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-page.png -------------------------------------------------------------------------------- /demo/assets/img/spr-tips.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-tips.png -------------------------------------------------------------------------------- /demo/assets/img/bg-jiuwo-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/bg-jiuwo-2.png -------------------------------------------------------------------------------- /demo/assets/img/jiuwo/iczb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/jiuwo/iczb.png -------------------------------------------------------------------------------- /demo/assets/img/jiuwo/spr-jw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/jiuwo/spr-jw.png -------------------------------------------------------------------------------- /demo/assets/img/spr-nav-d2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-nav-d2.png -------------------------------------------------------------------------------- /demo/assets/img/spr-page-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-page-1.png -------------------------------------------------------------------------------- /demo/assets/img/spr-player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-player.png -------------------------------------------------------------------------------- /demo/assets/img/spr-praise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/spr-praise.png -------------------------------------------------------------------------------- /demo/assets/img/jinrong/spr-jr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/jinrong/spr-jr.png -------------------------------------------------------------------------------- /demo/assets/img/jiuwo/giftPop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/jiuwo/giftPop.png -------------------------------------------------------------------------------- /demo/assets/font/dincond-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/font/dincond-webfont.woff -------------------------------------------------------------------------------- /demo/dist/static/img/bg1.ecd0b69.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/dist/static/img/bg1.ecd0b69.jpg -------------------------------------------------------------------------------- /demo/assets/font/dincond-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/font/dincond-webfont.woff2 -------------------------------------------------------------------------------- /demo/assets/img/jinrong/spr-jr-ani.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/assets/img/jinrong/spr-jr-ani.png -------------------------------------------------------------------------------- /demo/dist/static/img/spr-d3.068dda5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/dist/static/img/spr-d3.068dda5.png -------------------------------------------------------------------------------- /demo/dist/static/img/bg-intro.9ded910.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/dist/static/img/bg-intro.9ded910.jpg -------------------------------------------------------------------------------- /demo/dist/static/img/bg-wrap.d9355d7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/dist/static/img/bg-wrap.d9355d7.jpg -------------------------------------------------------------------------------- /demo/dist/static/img/giftPop.e895731.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/dist/static/img/giftPop.e895731.png -------------------------------------------------------------------------------- /demo/dist/static/img/spr-acc.95971c0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/dist/static/img/spr-acc.95971c0.png -------------------------------------------------------------------------------- /demo/dist/static/img/spr-emoji.9ac75cc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/dist/static/img/spr-emoji.9ac75cc.png -------------------------------------------------------------------------------- /demo/dist/static/img/spr-fav.bfa6869.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/dist/static/img/spr-fav.bfa6869.png -------------------------------------------------------------------------------- /demo/dist/static/img/spr-index.0ccc261.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/dist/static/img/spr-index.0ccc261.png -------------------------------------------------------------------------------- /demo/dist/static/img/spr-nav.3bd1f10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/dist/static/img/spr-nav.3bd1f10.png -------------------------------------------------------------------------------- /demo/dist/static/img/spr-tips.9925165.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/dist/static/img/spr-tips.9925165.png -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "targets": { 5 | "browsers": ["cover 99.5%"] 6 | } 7 | }] 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /demo/dist/static/fonts/dincond-webfont.12646c0.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/dist/static/fonts/dincond-webfont.12646c0.woff2 -------------------------------------------------------------------------------- /demo/dist/static/fonts/dincond-webfont.b3eb146.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/HEAD/demo/dist/static/fonts/dincond-webfont.b3eb146.woff -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /src/transition.css: -------------------------------------------------------------------------------- 1 | .lazy-component-enter { 2 | opacity: 0; 3 | } 4 | 5 | .lazy-component-enter-to { 6 | opacity: 1; 7 | } 8 | 9 | .lazy-component-enter-active { 10 | transition: opacity 0.3s 0.2s; 11 | position: absolute; 12 | top: 0; 13 | width: 100%; 14 | } 15 | 16 | .lazy-component-leave { 17 | opacity: 1; 18 | } 19 | 20 | .lazy-component-leave-to { 21 | opacity: 0; 22 | } 23 | 24 | .lazy-component-leave-active { 25 | transition: opacity 0.5s; 26 | } 27 | -------------------------------------------------------------------------------- /src/vue-lazy-component.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vue-lazy-component 3 | * (c) 2017 赵兵 4 | * @license MIT 5 | */ 6 | const VueLazyComponent = require('./VueLazyComponent.vue') 7 | const vueLazyComponent = {} 8 | 9 | /** 10 | * Plugin API 11 | */ 12 | vueLazyComponent.install = function (Vue, options) { 13 | Vue.component(VueLazyComponent.name, VueLazyComponent) 14 | } 15 | 16 | vueLazyComponent.component = VueLazyComponent 17 | 18 | /** 19 | * Auto install 20 | */ 21 | if (typeof window !== 'undefined' && window.Vue) { 22 | window.Vue.use(vueLazyComponent) 23 | } 24 | 25 | module.exports = vueLazyComponent 26 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | demo 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /demo/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | 7 | const vueLazyComponent = process.env.NODE_ENV === 'development' 8 | ? require('../src/vue-lazy-component.js') 9 | : require('../dist/vue-lazy-component.js') 10 | 11 | Vue.config.productionTip = false 12 | 13 | // Using plugin 14 | Vue.use(vueLazyComponent) 15 | 16 | /* eslint-disable no-new */ 17 | new Vue({ 18 | el: '#app', 19 | router, 20 | template: '', 21 | components: { App } 22 | }) 23 | -------------------------------------------------------------------------------- /demo/dist/index.html: -------------------------------------------------------------------------------- 1 | demo
-------------------------------------------------------------------------------- /demo/components/MsgItemSkeleton.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 30 | -------------------------------------------------------------------------------- /demo/components/StSeriesSohuSkeleton.vue: -------------------------------------------------------------------------------- 1 | 33 | -------------------------------------------------------------------------------- /demo/components/StMoJinSkeleton.vue: -------------------------------------------------------------------------------- 1 | 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 xunlei 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /demo/components/StMovieQqSkeleton.vue: -------------------------------------------------------------------------------- 1 | 43 | -------------------------------------------------------------------------------- /demo/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | Vue.use(Router) 5 | 6 | const router = new Router({ 7 | routes: [ 8 | { 9 | path: '/large-page', 10 | name: 'LargePage', 11 | alias: '/', 12 | component: (resolve) => require(['../views/LargePage'], resolve) 13 | }, 14 | { 15 | path: '/large-page-chunks', 16 | name: 'LargePageChunks', 17 | component: (resolve) => require(['../views/LargePageChunks'], resolve) 18 | }, 19 | { 20 | path: '/large-page-not-lazy', 21 | name: 'LargePageNotLazy', 22 | component: (resolve) => require(['../views/LargePageNotLazy'], resolve) 23 | }, 24 | { 25 | path: '/timeout', 26 | name: 'Timeout', 27 | component: (resolve) => require(['../views/Timeout'], resolve) 28 | }, 29 | { 30 | path: '/custom-transition', 31 | name: 'CustomTransition', 32 | component: (resolve) => require(['../views/CustomTransition'], resolve) 33 | }, 34 | { 35 | path: '/specific-viewport', 36 | name: 'SpecificViewport', 37 | component: (resolve) => require(['../views/SpecificViewport'], resolve) 38 | } 39 | ] 40 | }) 41 | 42 | export default router 43 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../demo/dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../demo/dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: './', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'] 18 | }, 19 | dev: { 20 | env: require('./dev.env'), 21 | port: 8080, 22 | autoOpenBrowser: true, 23 | assetsSubDirectory: 'demo/static', 24 | assetsPublicPath: '/', 25 | proxyTable: {}, 26 | // CSS Sourcemaps off by default because relative paths are "buggy" 27 | // with this option, according to the CSS-Loader README 28 | // (https://github.com/webpack/css-loader#sourcemaps) 29 | // In our experience, they generally work as expected, 30 | // just be aware of this issue when enabling this option. 31 | cssSourceMap: false 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /demo/components/MsgItem.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 48 | 49 | 54 | -------------------------------------------------------------------------------- /demo/dist/static/js/manifest.08b3988500ea166cfe66.js: -------------------------------------------------------------------------------- 1 | !function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,c,a){for(var f,i,u,d=0,s=[];d 2 |
3 |
4 |

迅雷直播

5 |
6 |
7 |
8 |
9 |
10 |
    11 |
  • 12 | 13 |
    14 |
    • 15 |
  • 16 | 17 |
    18 |
    • 19 |
  • 20 | 21 |
    22 |
    • 23 |
  • 24 | 25 |
    26 |
    • 27 |
  • 28 | 29 |
    30 |
    • 31 |
  • 32 | 33 |
    34 |
    • 35 |
  • 36 | 37 |
    38 |
    • 39 |
  • 40 | 41 |
    42 |
    • 43 |
  • 44 | 45 |
    46 |
    • 47 |
  • 48 |
    49 |
      50 |
    • 51 |
    • 52 |
    • 53 |
    • 54 |
    • 55 |
    56 |
    57 |
    • 58 |
59 |
60 |
61 |
62 | 63 | -------------------------------------------------------------------------------- /demo/views/Timeout.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 63 | -------------------------------------------------------------------------------- /demo/components/StNiuxSkeleton.vue: -------------------------------------------------------------------------------- 1 | 71 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xunlei/vue-lazy-component", 3 | "description": "Vue.js 2.0 组件级懒加载方案 Vue.js 2.x component level lazy loading solution", 4 | "version": "1.1.3", 5 | "private": false, 6 | "main": "dist/vue-lazy-component.js", 7 | "files": [ 8 | "dist/*.js", 9 | "src" 10 | ], 11 | "repository": { 12 | "type": "git", 13 | "url": "git@github.com:xunleif2e/vue-lazy-component.git" 14 | }, 15 | "unpkg": "dist/vue-lazy-component.js", 16 | "keywords": [ 17 | "vue.js", 18 | "vue-plugin", 19 | "vue-component" 20 | ], 21 | "author": "赵兵", 22 | "license": "MIT", 23 | "homepage": "https://zhaobing.site", 24 | "scripts": { 25 | "dev": "node build/dev-server.js", 26 | "build": "npm run build:library && npm run build:demo", 27 | "build:demo": "node build/build.js", 28 | "build:library": "webpack --config build/webpack.lib.conf.js", 29 | "commit": "git-cz", 30 | "prepublish": "npm run build", 31 | "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0" 32 | }, 33 | "devDependencies": { 34 | "autoprefixer": "^6.7.2", 35 | "babel-cli": "^6.14.0", 36 | "babel-core": "^6.22.1", 37 | "babel-loader": "^6.2.10", 38 | "babel-plugin-external-helpers": "^6.22.0", 39 | "babel-plugin-transform-runtime": "^6.22.0", 40 | "babel-polyfill": "^6.13.0", 41 | "babel-preset-env": "^1.7.0", 42 | "babel-preset-es2015": "^6.22.0", 43 | "babel-preset-es2015-rollup": "^1.2.0", 44 | "babel-preset-stage-2": "^6.22.0", 45 | "babel-register": "^6.22.0", 46 | "chalk": "^1.1.3", 47 | "commitizen": "^2.9.6", 48 | "connect-history-api-fallback": "^1.3.0", 49 | "conventional-changelog-cli": "^1.3.3", 50 | "copy-webpack-plugin": "^4.0.1", 51 | "css-loader": "^0.28.0", 52 | "cz-conventional-changelog": "^2.0.0", 53 | "eventsource-polyfill": "^0.9.6", 54 | "express": "^4.14.1", 55 | "extract-text-webpack-plugin": "^2.0.0", 56 | "file-loader": "^0.11.1", 57 | "friendly-errors-webpack-plugin": "^1.1.3", 58 | "html-webpack-plugin": "^2.28.0", 59 | "http-proxy-middleware": "^0.17.3", 60 | "opn": "^4.0.2", 61 | "optimize-css-assets-webpack-plugin": "^1.3.0", 62 | "ora": "^1.2.0", 63 | "rimraf": "^2.6.0", 64 | "rollup": "^0.35.10", 65 | "rollup-plugin-babel": "^2.6.1", 66 | "rollup-plugin-uglify": "^1.0.1", 67 | "semver": "^5.3.0", 68 | "shelljs": "^0.7.6", 69 | "url-loader": "^0.5.8", 70 | "vue": "^2.3.3", 71 | "vue-loader": "^12.1.0", 72 | "vue-router": "^2.3.1", 73 | "vue-style-loader": "^3.0.1", 74 | "vue-template-compiler": "^2.3.3", 75 | "webpack": "^2.6.1", 76 | "webpack-dev-middleware": "^1.10.0", 77 | "webpack-hot-middleware": "^2.18.0", 78 | "webpack-merge": "^4.1.0" 79 | }, 80 | "engines": { 81 | "node": ">= 4.0.0", 82 | "npm": ">= 3.0.0" 83 | }, 84 | "browserslist": [ 85 | "> 1%", 86 | "last 2 versions", 87 | "not ie <= 8" 88 | ], 89 | "config": { 90 | "commitizen": { 91 | "path": "./node_modules/cz-conventional-changelog" 92 | } 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /demo/assets/img/jinrong.css: -------------------------------------------------------------------------------- 1 | .side-jr{position: fixed;right: 0;bottom:70px;right: 0;cursor: pointer;z-index: 99} 2 | .ani-jr{width: 66px;height: 62px;background: url(../img/jinrong/spr-jr-ani.png) no-repeat;display: block;} 3 | .drop-jr{width: 214px;height: 182px;background: #fff;z-index: 9;position: absolute;right: 66px;top: 50%;margin-top: -142px;display: none;} 4 | .side-jr-ban{height: 60px;background: url(../img/jinrong/spr-jr.png) no-repeat;} 5 | .side-jr-main{color: #333;} 6 | .drop-jr:after{content: '';width: 0;height: 0;border-style: dashed;border-color: transparent;border-left-style:solid;border-left-color: #fff;position: absolute;right: -16px;border-width: 7px 8px;top: 50%;margin-top: 52px; } 7 | .side-jr-ban h3{font-size: 18px;color: #fff;text-align: center;line-height: 60px;} 8 | .btn-side-jr{width: 108px;height: 30px;line-height: 30px;background: #f52f3e;border-radius: 15px;color: #fff;display: block;margin: 0 auto;text-align: center;font-size: 14px;transition: background .2s} 9 | .btn-side-jr:hover{background: #fd3f4e;} 10 | .fc-jr{color: #f52f3e;} 11 | .txt-jr{padding: 16px 0;font-size: 14px;text-align: center;} 12 | .ani-jr{animation: a01 .8s steps(14) both, a02 .5s .8s steps(14) infinite;} 13 | .side-jr:hover .ani-jr{animation: a03 1.4s steps(19) both, a04 1s 1.4s steps(10) infinite;} 14 | .jr-tips{position: absolute;top: -39px;width: 51px;height: 45px;background: url(../img/jinrong/spr-jr.png) 0 -60px no-repeat;right: 12px;padding: 5px;box-sizing: border-box;text-align: center;line-height: 1.2;color: #666;animation: tipsShow .3s .4s both;transform-origin: 32px 42px;} 15 | .side-jr:hover .drop-jr{display: block;animation: drop .2s both;} 16 | .side-jr:hover .jr-tips{animation: tipsHide .6s both} 17 | .tips-get{display: none} 18 | .side-jr.jr-get .tips-get{display: block;} 19 | .side-jr.jr-get .ani-jr{animation: a05 .5s steps(14) infinite;} 20 | .side-jr.jr-get:hover .ani-jr{animation: a06 .3s steps(6), a07 .4s .3s steps(11) infinite;} 21 | .main-af{display: none;} 22 | .side-jr.jr-get .main-af{display: block;} 23 | .side-jr.jr-get .main-bf{display: none;} 24 | 25 | @keyframes drop{ 26 | 0%{opacity:0;transform:scale(.3)} 27 | 100%{opacity:1;transform:scale(1)} 28 | } 29 | @keyframes tipsShow{ 30 | 0%{opacity:0;transform:scale(.3)} 31 | 100%{transform:scale(1)} 32 | } 33 | @keyframes tipsHide{ 34 | 0%{opacity:1;transform:scale(1)} 35 | 100%{opacity:0;transform:scale(0)} 36 | } 37 | 38 | @keyframes a01{ 39 | 0%{background-position: 0 0;} 40 | 100%{background-position: -924px 0;} 41 | } 42 | @keyframes a02{ 43 | 0%{background-position: 0 -62px;} 44 | 100%{background-position: -924px -62px;} 45 | } 46 | 47 | @keyframes a03{ 48 | 0%{background-position: 0 -124px;} 49 | 100%{background-position: -1254px -124px;} 50 | } 51 | @keyframes a04{ 52 | 0%{background-position: 0 -186px;} 53 | 100%{background-position: -660px -186px;} 54 | } 55 | @keyframes a05{ 56 | 0%{background-position: 0 -248px;} 57 | 100%{background-position: -924px -248px;} 58 | } 59 | @keyframes a06{ 60 | 0%{background-position: 0 -310px;} 61 | 100%{background-position: -396px -310px;} 62 | } 63 | @keyframes a07{ 64 | 0%{background-position: 0 -372px;} 65 | 100%{background-position: -726px -372px;} 66 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 2 | ## [1.1.3](https://github.com/xunleif2e/vue-lazy-component/compare/v1.1.2...v1.1.3) (2018-05-24) 3 | 4 | 5 | ### Bug Fixes 6 | 7 | * **build:** 修复库输出的入口文件dist/vue-lazy-component.js包含const关键字的问题 ([7b852e8](https://github.com/xunleif2e/vue-lazy-component/commit/7b852e8)), closes [#10](https://github.com/xunleif2e/vue-lazy-component/issues/10) 8 | 9 | 10 | 11 | 12 | # [1.1.0](https://github.com/xunleif2e/vue-lazy-component/compare/v1.0.10...v1.1.0) (2017-10-18) 13 | 14 | 15 | ### Code Refactoring 16 | 17 | * **ssr:** support ssr ([848f0c6](https://github.com/xunleif2e/vue-lazy-component/commit/848f0c6)) 18 | 19 | 20 | ### BREAKING CHANGES 21 | 22 | * **ssr:** transition style should require '@xunlei/vue-lazy-component/src/transition.css' 23 | 24 | 25 | 26 | 27 | ## [1.0.10](https://github.com/xunleif2e/vue-lazy-component/compare/v1.0.9...v1.0.10) (2017-10-17) 28 | 29 | 30 | ### Features 31 | 32 | * **ssr:** suport ssr ([b682fae](https://github.com/xunleif2e/vue-lazy-component/commit/b682fae)) 33 | 34 | 35 | 36 | 37 | ## [1.0.6](https://github.com/xunleif2e/vue-lazy-component/compare/v1.0.5...v1.0.6) (2017-09-14) 38 | 39 | 40 | ### Features 41 | 42 | * **component:** make prop viewport working ([5a1db8a](https://github.com/xunleif2e/vue-lazy-component/commit/5a1db8a)) 43 | 44 | 45 | 46 | 47 | ## [1.0.5](https://github.com/xunleif2e/vue-lazy-component/compare/v1.0.4...v1.0.5) (2017-09-13) 48 | 49 | 50 | ### Bug Fixes 51 | 52 | * **observer:** make observer more sensitive ([c7fa734](https://github.com/xunleif2e/vue-lazy-component/commit/c7fa734)) 53 | 54 | 55 | 56 | 57 | ## [1.0.4](https://github.com/xunleif2e/vue-lazy-component/compare/v1.0.3...v1.0.4) (2017-09-13) 58 | 59 | 60 | ### Bug Fixes 61 | 62 | * **observer:** fix observer callback didn't exec ([d67f15e](https://github.com/xunleif2e/vue-lazy-component/commit/d67f15e)) 63 | 64 | 65 | 66 | 67 | ## [1.0.3](https://github.com/xunleif2e/vue-lazy-component/compare/v1.0.2...v1.0.3) (2017-09-13) 68 | 69 | 70 | ### Bug Fixes 71 | 72 | * **observer:** no isIntersecting bug ([5e7c349](https://github.com/xunleif2e/vue-lazy-component/commit/5e7c349)) 73 | 74 | 75 | 76 | 77 | ## [1.0.2](https://github.com/xunleif2e/vue-lazy-component/compare/v1.0.1...v1.0.2) (2017-09-12) 78 | 79 | 80 | 81 | 82 | ## [1.0.1](https://github.com/xunleif2e/vue-lazy-component/compare/4738b55...v1.0.1) (2017-09-12) 83 | 84 | 85 | ### Bug Fixes 86 | 87 | * **demo:** fix demo highlight bug ([7b67c74](https://github.com/xunleif2e/vue-lazy-component/commit/7b67c74)) 88 | * **demo:** rebuild demo page ([9868912](https://github.com/xunleif2e/vue-lazy-component/commit/9868912)) 89 | * **observer:** fix observer bug ([9fa8a45](https://github.com/xunleif2e/vue-lazy-component/commit/9fa8a45)) 90 | 91 | 92 | ### Features 93 | 94 | * **main:** Add chunks example ([3518f4e](https://github.com/xunleif2e/vue-lazy-component/commit/3518f4e)) 95 | * **main:** first version ([4738b55](https://github.com/xunleif2e/vue-lazy-component/commit/4738b55)) 96 | 97 | 98 | ### BREAKING CHANGES 99 | 100 | * **main:** 支持 组可见或即将可见时懒加载 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /demo/views/LargePage.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 104 | -------------------------------------------------------------------------------- /demo/App.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 54 | 55 | 115 | 116 | -------------------------------------------------------------------------------- /demo/dist/static/js/11.64f212a22e288139402c.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([11],{39:function(t,s,a){var c=a(4)(null,a(41),null,null,null);t.exports=c.exports},41:function(t,s){t.exports={render:function(){var t=this,s=t.$createElement;t._self._c;return t._m(0)},staticRenderFns:[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"module-box"},[a("div",{staticClass:"title"},[a("h3",[t._v("热门美剧")]),t._v(" "),a("div",{staticClass:"tit-box"},[a("a",{staticClass:"link-com",attrs:{href:"http://tv.sohu.com/drama/us/",target:"_blank"}},[t._v("\n 更多\n "),a("span",{staticClass:"text-arrow"},[t._v(">")])])])]),t._v(" "),a("div",{staticClass:"module-main"},[a("div",{staticClass:"tv-list"},[a("ul",[a("li",{staticClass:"big"},[a("a",{staticClass:"pic",attrs:{target:"_blank",href:"http://tv.sohu.com/20161222/n476690521.shtml"}},[a("img",{attrs:{src:"http://photocdn.sohu.com/20161221/vrsa_hor9271114.jpg",alt:"隔离死城第1季第13集"}}),t._v(" "),a("span",{staticClass:"ico-player"})]),t._v(" "),a("div",{staticClass:"tv-list-con"},[a("p",{staticClass:"txt-update"},[t._v("更新至13集")]),t._v(" "),a("p",{staticClass:"tv-name"},[t._v("隔离死城第1季第13集")])])]),t._v(" "),a("li",{},[a("a",{staticClass:"pic",attrs:{target:"_blank",href:"http://tv.sohu.com/20161109/n472747423.shtml"}},[a("img",{attrs:{src:"http://photocdn.sohu.com/20161111/vrsa_hor_1478837546216_9229258.jpg",alt:"破产姐妹第5季第22集"}}),t._v(" "),a("span",{staticClass:"ico-player"})]),t._v(" "),a("div",{staticClass:"tv-list-con"},[a("p",{staticClass:"txt-update"},[t._v("更新至22集")]),t._v(" "),a("p",{staticClass:"tv-name"},[t._v("破产姐妹第5季第22集")])])]),t._v(" "),a("li",{},[a("a",{staticClass:"pic",attrs:{target:"_blank",href:"http://tv.sohu.com/20170319/n483857612.shtml"}},[a("img",{attrs:{src:"http://photocdn.sohu.com/20170310/vrsa_hor_1489115711827_9281609.jpg",alt:"胡迪尼与道尔第1季第10集"}}),t._v(" "),a("span",{staticClass:"ico-player"})]),t._v(" "),a("div",{staticClass:"tv-list-con"},[a("p",{staticClass:"txt-update"},[t._v("更新至10集")]),t._v(" "),a("p",{staticClass:"tv-name"},[t._v("胡迪尼与道尔第1季第10集")])])]),t._v(" "),a("li",{},[a("a",{staticClass:"pic",attrs:{target:"_blank",href:"http://tv.sohu.com/20170317/n483733204.shtml"}},[a("img",{attrs:{src:"http://photocdn.sohu.com/20170310/vrsa_hor9313039.jpg",alt:"盘中兽第1季第10集"}}),t._v(" "),a("span",{staticClass:"ico-player"})]),t._v(" "),a("div",{staticClass:"tv-list-con"},[a("p",{staticClass:"txt-update"},[t._v("更新至10集")]),t._v(" "),a("p",{staticClass:"tv-name"},[t._v("盘中兽第1季第10集")])])]),t._v(" "),a("li",{},[a("a",{staticClass:"pic",attrs:{target:"_blank",href:"http://tv.sohu.com/20170121/n479313300.shtml"}},[a("img",{attrs:{src:"http://photocdn.sohu.com/20170117/vrsa_hor9291436.jpg",alt:"亿万富翁第1季第12集"}}),t._v(" "),a("span",{staticClass:"ico-player"})]),t._v(" "),a("div",{staticClass:"tv-list-con"},[a("p",{staticClass:"txt-update"},[t._v("更新至12集")]),t._v(" "),a("p",{staticClass:"tv-name"},[t._v("亿万富翁第1季第12集")])])]),t._v(" "),a("li",{},[a("a",{staticClass:"pic",attrs:{target:"_blank",href:"http://tv.sohu.com/20170131/n479749763.shtml"}},[a("img",{attrs:{src:"http://photocdn.sohu.com/20161226/vrsa_hor_1482745708059_8388904.jpg",alt:"美国罪恶第1季第11集"}}),t._v(" "),a("span",{staticClass:"ico-player"})]),t._v(" "),a("div",{staticClass:"tv-list-con"},[a("p",{staticClass:"txt-update"},[t._v("更新至11集")]),t._v(" "),a("p",{staticClass:"tv-name"},[t._v("美国罪恶第1季第11集")])])]),t._v(" "),a("li",{},[a("a",{staticClass:"pic",attrs:{target:"_blank",href:"http://tv.sohu.com/20170321/n484142953.shtml"}},[a("img",{attrs:{src:"http://photocdn.sohu.com/20170310/vrsa_hor9313037.jpg",alt:"罪第1季第10集"}}),t._v(" "),a("span",{staticClass:"ico-player"})]),t._v(" "),a("div",{staticClass:"tv-list-con"},[a("p",{staticClass:"txt-update"},[t._v("更新至10集")]),t._v(" "),a("p",{staticClass:"tv-name"},[t._v("罪第1季第10集")])])])])])])])}]}}}); 2 | //# sourceMappingURL=11.64f212a22e288139402c.js.map -------------------------------------------------------------------------------- /demo/components/StSeriesSohu.vue: -------------------------------------------------------------------------------- 1 | 83 | -------------------------------------------------------------------------------- /src/VueLazyComponent.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 146 | 147 | -------------------------------------------------------------------------------- /demo/assets/css/load.css: -------------------------------------------------------------------------------- 1 | body{--colorLoad:#d9e5ef} 2 | .load-main{ width: var(--mask-width);height: var(--mask-height);position: relative;} 3 | .load-part-1{width: var(--widthVideo); background: #fff;height: var(--heightVideo);display: flex;align-items: center;justify-content: center;} 4 | .load-part-1:after{content:'';display: block;} 5 | .ico-load-player{width: 70px;height: 70px;background:var(--colorLoad);border-radius: 50%;display: block;position: relative;} 6 | .ico-load-player:after{content: '';width: 0;height: 0;border-style: dashed;border-color: transparent;overflow: hidden;font-size: 0;border-left-color:#fff;border-left-style: solid;position: absolute; border-width: 9px 16px;left: 50%;top: 50%;margin: -7px 0 0 -6px;} 7 | .load-part-2{width: calc(100% - var(--widthVideo));background: #e8f2fa;position: absolute;left:var(--widthVideo);top:0;height: var(--heightVideo);--colorLoad:#d0dee9;} 8 | .part-top{padding: 20px;box-sizing: border-box;height: 170px;background: #f6fbff;} 9 | .load-info{display: flex;align-items: center;margin: 0 0 24px;} 10 | .load-info:before{width: 45px;height: 45px;background: var(--colorLoad);border-radius: 50%;content:''} 11 | .part-top .load-info:after{height: 16px;width: 98px;background: var(--colorLoad);margin: 0 0 0 10px;content:''} 12 | .ph{background: var(--colorLoad);height: 12px;} 13 | .ph1{margin: 0 0 11px 0} 14 | .ph2{width: 22%;} 15 | .ph3{margin: 0 0 8px;} 16 | .ph4{width: 56%} 17 | .ph5{width: 40%} 18 | .part-main{padding: 40px 20px 0;box-sizing: border-box;position: relative} 19 | .part-main::before{content: '';width: 0;height: 0;border-style: dashed;border-color: transparent;overflow: hidden;font-size: 0;border-bottom-style: solid;border-bottom-color: #e8f2fa;border-width: 8px 6px;position: absolute;top: -16px;left: 24px;} 20 | .part-main .load-info:before{width: 32px;height: 32px;} 21 | .part-main .ph{height: 10px;} 22 | .part-main li{margin: 0 0 20px;} 23 | .ph-wp{width: calc(100% - 40px);margin: 0 0 0 12px;} 24 | .part-main:after{height: 30px;background: #fff;content:'';display: block;} 25 | .load-part-3{position: absolute;bottom: 1px;left: 0;width: 100%;height: var(--heightList);overflow: hidden;} 26 | .load-part-3 ul{display: flex;} 27 | .load-part-3 li{width: 265px;background: #fff;height: var(--heightList);margin:0 12px 0 0;position: relative;} 28 | .load-part-3 .ph{position: absolute;bottom: 15px;width: calc(100% - 24px);left: 12px;} 29 | .load-part-3 .ph:before{width: 65px;height: 20px;background: linear-gradient(to right,var(--colorLoad),rgba(255,255,255,0));border-radius: 10px 0 0 10px;content:'';position: absolute;bottom: 23px;} 30 | .load-part-3 li:nth-child(4){margin: 0;width: 267px;} 31 | .load-part-3 .ico-load-player{transform: scale(.7);margin: 30px auto;} 32 | 33 | @media only screen and (min-width: 1041px) and (max-width:1215px) , only screen and (min-height: 671px) and (max-height: 795px){ 34 | .part-top{height: 140px;} 35 | .part-main{padding: 30px 20px 0;} 36 | .load-info{margin: 0 0 15px;} 37 | .load-part-3 .ico-load-player{margin: 20px auto;} 38 | } 39 | 40 | @media only screen and (min-width: 931px) and (max-width:1040px) , only screen and (min-height: 601px) and (max-height: 670px){ 41 | .part-top{height: 120px;} 42 | .load-info{margin: 0 0 10px;} 43 | .load-info:before{width: 34px;height: 34px;} 44 | .part-main{padding: 20px;} 45 | .part-main li{margin: 0 0 18px;} 46 | .ico-load-player{width: 60px;height: 60px;} 47 | .load-part-3 .ico-load-player{margin: 20px auto;} 48 | .load-part-3 .ph:before{height: 16px;bottom: 20px;width: 50px;} 49 | } 50 | 51 | @media only screen and (max-width:930px) , only screen and (max-height: 600px){ 52 | .part-top{height: 110px;} 53 | .load-info{margin: 0 0 10px;} 54 | .load-info:before{width: 28px;height: 28px;} 55 | .part-main{padding: 20px;} 56 | .part-main li{margin: 0 0 18px;} 57 | .ico-load-player{width: 60px;height: 60px;} 58 | .ph{height: 10px;} 59 | .part-main .load-info:before{width: 25px;height: 25px;} 60 | .load-part-3 .ico-load-player{transform: scale(.6);margin: 15px auto;} 61 | .load-part-3 .ph{bottom: 10px;} 62 | .load-part-3 .ph:before{height: 15px;bottom: 16px;width: 45px;} 63 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Lazy Component 2 | 3 | [![npm](https://img.shields.io/npm/v/@xunlei/vue-lazy-component.svg)](https://www.npmjs.com/package/@xunlei/vue-lazy-component) 4 | [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) 5 | [![Git flow work flow](https://img.shields.io/badge/git--flow-workflow-brightgreen.svg)](https://github.com/nvie/gitflow/) 6 | [![GitHub stars](https://img.shields.io/github/stars/xunleif2e/vue-lazy-component.svg)](https://github.com/xunleif2e/vue-lazy-component/stargazers) 7 | [![GitHub issues](https://img.shields.io/github/issues/xunleif2e/vue-lazy-component.svg)](https://github.com/xunleif2e/vue-lazy-component/issues) 8 | [![GitHub forks](https://img.shields.io/github/forks/xunleif2e/vue-lazy-component.svg)](https://github.com/xunleif2e/vue-lazy-component/network) 9 | [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/master/LICENSE) 10 | 11 | > 🐌 Vue.js 2.x 组件级懒加载方案 12 | 13 | ## [English version documentation](README.en.md) 14 | 15 | 16 | ## 特性 17 | 18 | - 支持 组件可见或即将可见时懒加载 19 | - 支持 组件延时加载 20 | - 支持 加载真实组件前展示骨架组件，提高用户体验 21 | - 支持 真实组件代码分包异步加载 22 | 23 | ## 安装 / Installation 24 | 25 | ``` 26 | npm install @xunlei/vue-lazy-component 27 | ``` 28 | 29 | ## 在线demo / Online demo 30 | 31 | https://xunleif2e.github.io/vue-lazy-component/demo/dist/index.html 32 | 33 | ## 使用 34 | 35 | ### 1. 注册组件 36 | 37 | #### 方式1 利用插件方式全局注册 38 | 39 | ```javascript 40 | import VueLazyComponent from '@xunlei/vue-lazy-component' 41 | import Vue from 'vue' 42 | 43 | Vue.use(VueLazyComponent) 44 | ``` 45 | 46 | #### 方式2 局部注册 47 | 48 | ```javascript 49 | import { component as VueLazyComponent } from '@xunlei/vue-lazy-component' 50 | 51 | export default { 52 | // ... 53 | components: { 54 | 'vue-lazy-component': VueLazyComponent 55 | } 56 | } 57 | ``` 58 | 59 | #### 方式3 独立版本引入，自动全局注册 60 | 61 | > 前提是 vue 也是独立版本通过script标签引入 62 | 63 | ```html 64 | 65 | ``` 66 | 67 | ### 2. 模版语法 68 | 69 | ```html 70 | 74 | 75 | 76 | 77 | 78 | 79 | ``` 80 | 81 | ## Props 82 | 83 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 84 | |-------------------------|-------|------|--------|--------| 85 | | viewport | 组件所在的视口，如果组件是在页面容器内滚动，视口就是该容器 | HTMLElement | true | `null`，代表视窗 | 86 | | direction | 视口的滚动方向, `vertical`代表垂直方向，`horizontal`代表水平方向 | String | true | `vertical` | 87 | | threshold | 预加载阈值, css单位 | String | true | `0px` | 88 | | tagName | 包裹组件的外层容器的标签名 | String | true | `div` | 89 | | timeout | 等待时间，如果指定了时间，不论可见与否，在指定时间之后自动加载 | Number | true | - | 90 | 91 | ## Events 92 | 93 | | 事件名 | 说明 | 事件参数 94 | |-------------------------|-------|------| 95 | | before-init | 模块可见或延时截止导致准备开始加载懒加载模块 | - | 96 | | init | 开始加载懒加载模块，此时骨架组件开始消失 | - | 97 | | before-enter | 懒加载模块开始进入 | el | 98 | | before-leave | 骨架组件开始离开 | el | 99 | | after-leave | 骨架组件已经离开 | el | 100 | | after-enter | 懒加载模快已经进入 | el | 101 | | after-init | 初始化完成 | - | 102 | 103 | ## 注意 / Notes 104 | 105 | > 1. 该项目依赖 [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)，如需在较低版本浏览器运行，需要引入 **IntersectionObserver API polyfill** 106 | 107 | ### IntersectionObserver API polyfill 108 | 109 | https://github.com/w3c/IntersectionObserver/tree/master/polyfill 110 | 111 | 112 | > 2. webpack 分包异步加载方式依赖 `Scoped Component Slots`, 需要 Vue 版本大于2.1.0 113 | 114 | 115 | - https://cn.vuejs.org/v2/guide/components.html#作用域插槽 116 | 117 | ## Development Setup 118 | 119 | ``` bash 120 | # install deps 121 | npm install 122 | 123 | # serve demo at localhost:8080 124 | npm run dev 125 | 126 | # build library and demo 127 | npm run build 128 | 129 | # build library 130 | npm run build:library 131 | 132 | # build demo 133 | npm run build:demo 134 | 135 | # commit use commitizen 136 | npm run commit 137 | 138 | # pre publish 139 | npm run prepublish 140 | 141 | # generate changelog 142 | npm run changelog 143 | ``` 144 | 145 | ## Roadmap 146 | 147 | - [x] SSR 支持 @ v1.1.0 148 | 149 | - [ ] UI单元测试 @ v1.2.0 150 | 151 | - [ ] 减少性能开销 @ v1.3.0 152 | 153 | ## License 154 | 155 | [MIT](http://opensource.org/licenses/MIT) 156 | 157 | Copyright (c) 2017 XunleiF2E 158 | -------------------------------------------------------------------------------- /demo/views/SpecificViewport.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 132 | 133 | 148 | 149 | -------------------------------------------------------------------------------- /README.en.md: -------------------------------------------------------------------------------- 1 | # Vue Lazy Component 2 | 3 | 4 | [![npm](https://img.shields.io/npm/v/@xunlei/vue-lazy-component.svg)](https://www.npmjs.com/package/@xunlei/vue-lazy-component) 5 | [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) 6 | [![Git flow work flow](https://img.shields.io/badge/git--flow-workflow-brightgreen.svg)](https://github.com/nvie/gitflow/) 7 | [![GitHub stars](https://img.shields.io/github/stars/xunleif2e/vue-lazy-component.svg)](https://github.com/xunleif2e/vue-lazy-component/stargazers) 8 | [![GitHub issues](https://img.shields.io/github/issues/xunleif2e/vue-lazy-component.svg)](https://github.com/xunleif2e/vue-lazy-component/issues) 9 | [![GitHub forks](https://img.shields.io/github/forks/xunleif2e/vue-lazy-component.svg)](https://github.com/xunleif2e/vue-lazy-component/network) 10 | [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/xunleif2e/vue-lazy-component/master/LICENSE) 11 | 12 | > 🐌 Vue.js 2.x component level lazy loading component 13 | 14 | 15 | ## Features 16 | 17 | - Support load component when componet visible or will soon be visible 18 | - Support load compoent for time delay 19 | - Support load skeleton component before real component load to improve the user experience 20 | - Support code split to load components asynchronously 21 | 22 | ## Installation 23 | ``` 24 | npm install @xunlei/vue-lazy-component 25 | ``` 26 | 27 | ## Online demo 28 | 29 | https://xunleif2e.github.io/vue-lazy-component/demo/dist/index.html 30 | 31 | ## Usage 32 | 33 | ### Registration 34 | 35 | #### Use plugin to register a global component 36 | 37 | ```javascript 38 | import VueLazyComponent from '@xunlei/vue-lazy-component' 39 | import Vue from 'vue' 40 | 41 | Vue.use(VueLazyComponent) 42 | ``` 43 | #### Local Registration 44 | 45 | ```javascript 46 | import { component as VueLazyComponent } from '@xunlei/vue-lazy-component' 47 | 48 | export default { 49 | // ... 50 | components: { 51 | 'vue-lazy-component': VueLazyComponent 52 | } 53 | } 54 | ``` 55 | 56 | #### Direct ` 61 | ``` 62 | 63 | ### Template syntax 64 | ```html 65 | 69 | 70 | 71 | 72 | 73 | 74 | ``` 75 | 76 | ## Props 77 | | Parameter | Description | Type | Optional | Default value | 78 | |-------------------------|-------|------|--------|--------| 79 | | viewport | Viewport where componet is in. Default is the window viewport.| HTMLElement | true | `null` means window viewport | 80 | | direction | Direction of the viewport scolls. `vertical` or `horizontal` | String | true | `vertical` | 81 | | threshold | Threshold of preload, in css synax. | String | true | `0px` | 82 | | tagName | Tag name of the wrapper element. | String | true | `div` | 83 | | timeout | Delay time. If set this, whether visible or not, automatically load after the specified time | Number | true | - | 84 | 85 | ## Events 86 | 87 | | Event Name | Description | Args 88 | |-------------------------|-------|------| 89 | | before-init | Component visible or delayed cut-off caused to begin loading the real component. | - | 90 | | init | Start to load real componet | - | 91 | | before-enter | Real component begin enter | el | 92 | | before-leave | Skeleton component begin leave | el | 93 | | after-leave | Skeleton component leaved | el | 94 | | after-enter | Real component entered | el | 95 | | after-init | Initialization is complete | - | 96 | 97 | ## Notes 98 | 99 | > 1. The project relies on [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). To run in an earlier version of the browser, you need to include **IntersectionObserver API polyfill** 100 | 101 | ### IntersectionObserver API polyfill 102 | 103 | https://github.com/w3c/IntersectionObserver/tree/master/polyfill 104 | 105 | > 2. Using `Scoped Component Slots` require Vue 2.1.0+ 106 | 107 | - https://vuejs.org/v2/guide/components.html#Scoped-Slots 108 | 109 | ## Development Setup 110 | 111 | ``` bash 112 | # install deps 113 | npm install 114 | 115 | # serve demo at localhost:8080 116 | npm run dev 117 | 118 | # build library and demo 119 | npm run build 120 | 121 | # build library 122 | npm run build:library 123 | 124 | # build demo 125 | npm run build:demo 126 | 127 | # commit use commitizen 128 | npm run commit 129 | 130 | # pre publish 131 | npm run prepublish 132 | 133 | # generate changelog 134 | npm run changelog 135 | ``` 136 | ## License 137 | 138 | [MIT](http://opensource.org/licenses/MIT) 139 | 140 | Copyright (c) 2017 XunleiF2E 141 | -------------------------------------------------------------------------------- /demo/views/CustomTransition.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 130 | 131 | 161 | 162 | -------------------------------------------------------------------------------- /demo/views/LargePageChunks.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 152 | -------------------------------------------------------------------------------- /demo/assets/css/icon.css: -------------------------------------------------------------------------------- 1 | /* icon */ 2 | .ico-file{width: 32px;height: 32px;display: inline-block;vertical-align: middle;background: url(../img/spr-icon.png) -384px 0 no-repeat;} 3 | .ico-bt-file{background-position: 0 0} 4 | .ico-bt-link{background-position: -32px 0} 5 | .ico-chm{background-position: -64px 0} 6 | .ico-xls{background-position: -96px 0} 7 | .ico-link{background-position: -128px 0} 8 | .ico-pdf{background-position: -160px 0} 9 | .ico-doc{background-position: -192px 0} 10 | .ico-ppt{background-position: -224px 0} 11 | .ico-txt{background-position: -256px 0} 12 | .ico-word{background-position: -288px 0} 13 | .ico-install{background-position: -320px 0} 14 | .ico-music{background-position: -352px 0} 15 | .ico-unknow{background-position: -384px 0} 16 | .ico-pic{background-position: -416px 0} 17 | .ico-apk{background-position: -448px 0} 18 | .ico-exe{background-position: -480px 0} 19 | .ico-ipa{background-position: -512px 0} 20 | .ico-ipsw{background-position: -544px 0} 21 | .ico-iso{background-position: -576px 0} 22 | .ico-group{background-position: -608px 0} 23 | .ico-video{background-position: -832px 0} 24 | .ico-avi{background-position: -640px 0} 25 | .ico-flv{background-position: -672px 0} 26 | .ico-mkv{background-position: -704px 0} 27 | .ico-mov{background-position: -736px 0} 28 | .ico-mp4{background-position: -768px 0} 29 | .ico-mpg{background-position: -800px 0} 30 | .ico-rm{background-position: -864px 0} 31 | .ico-rmvb{background-position: -896px 0} 32 | .ico-wmv{background-position: -928px 0} 33 | .ico-rar{background-position: -960px 0} 34 | 35 | /* 会员图标 vip */ 36 | .icvip{display:inline-block;width:42px;height:12px;background:url(../img/ic_vip.png) no-repeat 0 999em;overflow:hidden;vertical-align:-1px;margin: 0 0 0 2px;} 37 | .icvip00{width: 36px;background-position: 0 0} .icvip01{background-position: -37px 0} .icvip02{background-position: -80px 0} .icvip03{background-position: -123px 0} .icvip04{background-position: -166px 0} .icvip05{background-position: -209px 0} .icvip06{background-position: -252px 0} .icvip00hui{background-position: 0 -18px} 38 | .icvip00hui{width: 35px;background-position: 0px -18px}.icvip01hui{background-position: -37px -18px} .icvip02hui{background-position: -80px -18px} .icvip03hui{background-position: -123px -18px} .icvip04hui{background-position: -166px -18px} .icvip05hui{background-position: -209px -18px} .icvip06hui{background-position: -252px -18px} 39 | /* gold vip */ 40 | .icgold00{width: 35px;background-position: 0 -36px} .icgold01{background-position: -37px -36px} .icgold02{background-position: -80px -36px} .icgold03{background-position: -123px -36px} .icgold04{background-position: -166px -36px} .icgold05{background-position: -209px -36px} .icgold06{background-position: -252px -36px} .icgold07{background-position: -295px -36px} .icgold00hui{background-position: 0 -54px} 41 | .icgold00hui{width: 35px;background-position: 0px -54px} .icgold01hui{background-position: -37px -54px} .icgold02hui{background-position: -80px -54px} .icgold03hui{background-position: -123px -54px} .icgold04hui{background-position: -166px -54px} .icgold05hui{background-position: -209px -54px} .icgold06hui{background-position: -252px -54px} .icgold07hui{background-position: -295px -54px} 42 | /* super vip */ 43 | .icsuper00{width: 35px;background-position: 0 -72px} .icsuper01{background-position: -37px -72px} .icsuper02{background-position: -80px -72px} .icsuper03{background-position: -123px -72px} .icsuper04{background-position: -166px -72px} .icsuper05{background-position: -209px -72px} .icsuper06{background-position: -252px -72px} .icsuper07{background-position: -295px -72px} .icsuper00hui{background-position: 0 -90px} 44 | .icsuper00hui{width: 35px;background-position: 0px -90px} .icsuper01hui{background-position: -37px -90px} .icsuper02hui{background-position: -80px -90px} .icsuper03hui{background-position: -123px -90px} .icsuper04hui{background-position: -166px -90px} .icsuper05hui{background-position: -209px -90px} 45 | /* another */ 46 | .icnian{width:12px;height:12px; background-position: 0px -108px;} .icnianhui{width:12px;height:12px; background-position: 0px -128px} .icdongjie{width:16px;height:16px; background-position: -19px -109px} 47 | .icdongjiehui{width:16px;height:16px; background-position: -19px -128px} .icshuai{width:16px;height:16px; background-position: -38px -108px} .icshuaihui{width:16px;height:16px; background-position: -38px -128px} 48 | .icqiye{width:16px;height:16px; background-position: -57px -109px} .icqiyehui{width:16px;height:16px; background-position: -57px -128px} 49 | .ichongren{width:16px;height:16px; background-position: -76px -109px} .ichongrenhui{width:16px;height:16px; background-position: -76px -128px} 50 | .icbao{width:16px;height:16px; background-position: -95px -109px} .icbaohui{width:16px;height:16px; background-position: -95px -128px} 51 | .icxun{width:15px;height:16px; background-position: -116px -109px} .icxunhui{width:15px;height:16px; background-position: -116px -128px} 52 | .icgold{width:15px;height:16px; background-position: -136px -109px} .icgoldhui{width:15px;height:14px; background-position: -136px -128px} 53 | .icgrow{width:12px;height:14px; background-position: -155px -109px;} .icdown{width:12px;height:14px; background-position: -155px -128px;} 54 | .ickuainiao{background-position: -338px 0;width: 36px;} 55 | .ickuainiaohui{background-position: -338px -18px} 56 | .icshangxing{background-position: -380px 0;width: 36px} 57 | .icshangxinghui{background-position: -380px -18px;} 58 | 59 | -------------------------------------------------------------------------------- /demo/assets/css/load-sec.css: -------------------------------------------------------------------------------- 1 | 2 | body{--colorLoad:#d9e5ef} 3 | .load-list li,.load-rank{background: #fff;} 4 | .load-rank{overflow: visible;} 5 | .load-list li:before,.load-rank:before{display: none;} 6 | .load-list-con{position: absolute;bottom: 10px;width: 100%;padding: 0 10px;box-sizing: border-box;} 7 | .load-list-con ul{display: block;margin: 0;} 8 | .load-list-con:before,.load-list-con:after{height: 15px;background: var(--colorLoad);margin: 7px 0 0;content: '';display: block;} 9 | .load-list-con:before{width: 32%;} 10 | .load-list-con:after{width: 55%;} 11 | .load-list-con li,.load-list-con li:hover{height: 15px;background: var(--colorLoad);margin: 10px 0 0} 12 | .load-list-con li:nth-child(1){width: 42%} 13 | .load-list-con li:nth-child(2){width: 36%} 14 | .load-list-con li:nth-child(3){width: 68%} 15 | .load-list-con li:nth-child(4){width: 55%} 16 | .load-list-con li:nth-child(5){width: 30%;margin: 10px 0 10px} 17 | .load-label{width: 55px;height: 20px;background: var(--colorLoad);position: absolute;right: 10px;top: 10px;border-radius: 10px;} 18 | .load-list-live .load-list-con:before{display: none;} 19 | .load-list-live .load-list-con:after{width: 65%} 20 | .load-list-live>ul>li{--liLive:260px; height: var(--liLive);} 21 | .load-list-live{height: calc(var(--liLive)*2 + 12px);} 22 | .title .link-com{position: absolute;right: calc(var(--widthList) + 12px);top: 0;} 23 | .tit-box .link-com{position: static;right: 0;} 24 | .load-game-1 .load-list-con{bottom: 60px;} 25 | .load-game-1 .load-list-con:before{height: 20px;} 26 | .load-game-1 .load-list-con:after{width: 80%;} 27 | .game-label{position: absolute;bottom: 10px;left: 10px;right: 10px;width: 33px;height: 20px;background:var(--colorLoad);} 28 | .game-label:before,.game-label:after{content: '';position: absolute;height: 20px;width: 33px;background: var(--colorLoad);} 29 | .game-label:before{left: 37px;} 30 | .game-label:after{left: 74px;} 31 | .load-list-game{--liGame1: 295px;--liGame2:146px;height: calc(var(--liGame1) + var(--liGame2) + 12px);} 32 | .load-game-1 li{height: var(--liGame1);} 33 | .load-game-2 li{height: var(--liGame2);} 34 | .load-game-2 li:after{width: 32%;height: 28px;position: absolute;bottom: 10px;right: 10px;content: '';background: var(--colorLoad);} 35 | .load-game-rank{background: #fff;width: var(--widthList);position: relative} 36 | .load-game-rank .game-rank-tit{position: absolute;top: -36px;left: 0;line-height: 36px;text-align: right;width: 100%;} 37 | .game-rank-tit a{padding: 2px 5px;} 38 | .game-rank-tit .cur{background: rgba(0,0,0,.3);border-radius: 10px;color: #fff;} 39 | .load-game-list{padding: 24px 16px;} 40 | .load-game-list li{margin: 0 0 30px;height: 75px;} 41 | .load-game-list li:nth-last-child(1){margin: 0;} 42 | .load-game-box{--gameWidth:98px; position: relative;background: var(--colorLoad);width: var(--gameWidth);height: 100%;} 43 | .load-game-box:before,.load-game-box:after{position: absolute;content:'';left: calc(var(--gameWidth) + 10px);background: var(--colorLoad);} 44 | .load-game-box:before{width: 50%;height: 15px;top: 30px;} 45 | .load-game-box:after{width: 78px;height: 24px;bottom: 0;} 46 | .tit-mo{position: absolute;top: -36px;line-height: 36px;} 47 | .load-mo{height: 320px;} 48 | .load-mo .module-list{display: flex;justify-content: space-between;height: 100%;} 49 | .load-mo-main{width: calc(var(--widthList)*3 + 24px);height: 100%;} 50 | .load-mo-mid{width: var(--widthList);background: #fff;position: relative;height: 100%;} 51 | .mo-main-1{--moMain:210px; height: var(--moMain);background: #fff;position: relative;} 52 | 53 | .mo-main-2{margin: 12px 0 0;height: 98px;} 54 | .mo-main-2 ul{height: 100%;} 55 | .mo-main-2 li{width: var(--widthList);position: relative;height: 100%;background: #fff;} 56 | .mo-main-2 li:after{width: 85%;position: absolute;content: '';height: 15px;background: var(--colorLoad);left: 10px;right: 10px;bottom: 10px;} 57 | .load-mo .load-rank{height: 100%;} 58 | 59 | @media only screen and (min-width: 1041px) and (max-width:1215px) , only screen and (min-height: 671px) and (max-height: 795px){ 60 | .load-list-live li:nth-last-child(2),.load-list-live li:nth-last-child(3){display: none;} 61 | .load-list-live>ul>li{--liLive:290px;} 62 | .load-list-game{--liGame1:334px;--liGame2:162px;} 63 | .load-game-1 li:nth-child(1){display: none;} 64 | .load-game-box{--gameWidth:123px;} 65 | .load-game-list li{height: 90px;} 66 | .load-mo-mid{display: none;} 67 | } 68 | 69 | @media only screen and (min-width: 931px) and (max-width:1040px) , only screen and (min-height: 601px) and (max-height: 670px){ 70 | .load-list-live li:nth-last-child(2),.load-list-live li:nth-last-child(3){display: none;} 71 | 72 | .load-list-game{--liGame1: 295px;--liGame2:146px;} 73 | .load-game-1 li:nth-child(1){display: none;} 74 | .load-game-box{--gameWidth:98px;} 75 | .load-game-list li{height: 75px;margin: 0 0 30px;} 76 | .load-mo-mid{display: none;} 77 | } 78 | 79 | @media only screen and (max-width:930px) , only screen and (max-height: 600px){ 80 | .load-list-live li:nth-last-child(2),.load-list-live li:nth-last-child(3){display: none;} 81 | .load-list-live>ul>li{--liLive:240px;} 82 | .load-list-game{--liGame1: 276px;--liGame2:130px;} 83 | .load-game-1 li:nth-child(1){display: none;} 84 | .load-game-list li{height: 70px;} 85 | .load-game-box:before{top: 20px;} 86 | .load-game-box{--gameWidth: 76px;} 87 | .load-mo-mid{display: none;} 88 | .load-mo{height: 292px;} 89 | .mo-main-1{height: 190px;} 90 | .mo-main-2{height: 90px;} 91 | } -------------------------------------------------------------------------------- /demo/dist/static/js/12.dfa0e2443a587c28ecd2.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([12],{37:function(t,e,a){var i=a(4)(null,a(44),null,null,null);t.exports=i.exports},44:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement;t._self._c;return t._m(0)},staticRenderFns:[function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"module-box"},[a("div",{staticClass:"title"},[a("h3",[t._v("热门电影")]),t._v(" "),a("div",{staticClass:"tit-box"},[a("a",{staticClass:"link-com",attrs:{href:"http://v.qq.com/movie/",target:"_blank"}},[t._v("\n 更多\n "),a("span",{staticClass:"text-arrow"},[t._v(">")])])])]),t._v(" "),a("div",{staticClass:"module-main"},[a("div",{staticClass:"module-list fl"},[a("ul",{staticClass:"fix"},[a("li",{staticClass:"module-full"},[a("a",{staticClass:"pic",attrs:{href:"http://v.qq.com/x/cover/yx3grrxtr2js1t6.html?ptag=xunlei9.movie.pay",target:"_blank"}},[a("img",{attrs:{src:"http://i.gtimg.cn/qqlive/img/jpgcache/files/qqvideo/y/yx3grrxtr2js1t6_f.jpg",alt:"X特遣队(又名:自杀小队)"}}),t._v(" "),a("span",{staticClass:"ico-player"})]),t._v(" "),a("div",{staticClass:"list-con"},[a("a",{staticClass:"list-name link-com",attrs:{href:"http://v.qq.com/x/cover/yx3grrxtr2js1t6.html?ptag=xunlei9.movie.pay"}},[t._v("\n X特遣队(又名:自杀小队)\n ")]),t._v(" "),a("p",{staticClass:"text-des"},[t._v("史上最坏超级反派集结")])])]),t._v(" "),a("li",{staticClass:"module-full"},[a("a",{staticClass:"pic",attrs:{href:"http://v.qq.com/x/cover/1lhcgag27fvsvpd.html?ptag=xunlei9.movie.pay",target:"_blank"}},[a("img",{attrs:{src:"http://i.gtimg.cn/qqlive/img/jpgcache/files/qqvideo/1/1lhcgag27fvsvpd_f.jpg",alt:"少年"}}),t._v(" "),a("span",{staticClass:"ico-player"})]),t._v(" "),a("div",{staticClass:"list-con"},[a("a",{staticClass:"list-name link-com",attrs:{href:"http://v.qq.com/x/cover/1lhcgag27fvsvpd.html?ptag=xunlei9.movie.pay"}},[t._v("\n 少年\n ")]),t._v(" "),a("p",{staticClass:"text-des"},[t._v("欧豪张译深陷白骨谜案")])])]),t._v(" "),a("li",{staticClass:"module-full"},[a("a",{staticClass:"pic",attrs:{href:"http://v.qq.com/x/cover/b40ff7kummjfp7e.html?ptag=xunlei9.movie.free",target:"_blank"}},[a("img",{attrs:{src:"http://i.gtimg.cn/qqlive/img/jpgcache/files/qqvideo/b/b40ff7kummjfp7e_f.jpg",alt:"澳门风云3"}}),t._v(" "),a("span",{staticClass:"ico-player"})]),t._v(" "),a("div",{staticClass:"list-con"},[a("a",{staticClass:"list-name link-com",attrs:{href:"http://v.qq.com/x/cover/b40ff7kummjfp7e.html?ptag=xunlei9.movie.free"}},[t._v("\n 澳门风云3\n ")]),t._v(" "),a("p",{staticClass:"text-des"},[t._v("周润发刘德华上演王牌合家欢")])])]),t._v(" "),a("li",{staticClass:"module-full"},[a("a",{staticClass:"pic",attrs:{href:"http://v.qq.com/x/cover/c17yx4mna94c9rw.html?ptag=xunlei9.movie.free",target:"_blank"}},[a("img",{attrs:{src:"http://i.gtimg.cn/qqlive/img/jpgcache/files/qqvideo/c/c17yx4mna94c9rw_f.jpg",alt:"捉妖记"}}),t._v(" "),a("span",{staticClass:"ico-player"})]),t._v(" "),a("div",{staticClass:"list-con"},[a("a",{staticClass:"list-name link-com",attrs:{href:"http://v.qq.com/x/cover/c17yx4mna94c9rw.html?ptag=xunlei9.movie.free"}},[t._v("\n 捉妖记\n ")]),t._v(" "),a("p",{staticClass:"text-des"},[t._v("井柏然爆笑产子白百何泼辣捉妖")])])])])]),t._v(" "),a("div",{staticClass:"module-rank fr",staticStyle:{"background-color":"transparent"}},[a("a",{staticClass:"bg-pic",attrs:{target:"_blank",href:"http://xl9.xunlei.com/chrome/client/view/pro/1.0/video_detail.html?movieid=mi1397300&direct=film_banner&entrypage=homepage_d"}},[a("img",{attrs:{src:"http://static-xl9-ssl.xunlei.com/images/201707/4c91d7394c9fbd1af23c7241500908a4.jpg",alt:"湄公河行动"}})]),t._v(" "),a("div",{staticClass:"rank-tit"},[a("h4",[t._v("影视榜")]),t._v(" "),a("p",{staticClass:"score"},[a("span",[t._v("5")]),t._v("分")])]),t._v(" "),a("div",{staticClass:"module-rank-list"},[a("ul",[a("li",{staticClass:"cho"},[a("a",{attrs:{target:"_blank",href:"http://xl9.xunlei.com/chrome/client/view/pro/1.0/video_detail.html?movieid=mi1397300&direct=film_banner&entrypage=homepage_d"}},[t._v("\n 1.湄公河行动\n ")])]),t._v(" "),a("li",{},[a("a",{attrs:{target:"_blank",href:"http://xl9.xunlei.com/chrome/client/view/pro/1.0/video_detail.html?movieid=mi1397297&direct=film_banner&entrypage=homepage_d"}},[t._v("\n 2.我不是潘金莲\n ")])]),t._v(" "),a("li",{},[a("a",{attrs:{target:"_blank",href:"http://xl9.xunlei.com/chrome/client/view/pro/1.0/video_detail.html?movieid=mi1469306&direct=film_banner&entrypage=homepage_d"}},[t._v("\n 3.血战钢锯岭\n ")])]),t._v(" "),a("li",{},[a("a",{attrs:{target:"_blank",href:"http://xl9.xunlei.com/chrome/client/view/pro/1.0/video_detail.html?movieid=mi1443782&direct=film_banner&entrypage=homepage_d"}},[t._v("\n 4.间谍同盟\n ")])]),t._v(" "),a("li",{},[a("a",{attrs:{target:"_blank",href:"http://xl9.xunlei.com/chrome/client/view/pro/1.0/video_detail.html?movieid=mi1469342&direct=film_banner&entrypage=homepage_d"}},[t._v("\n 5.铁道飞虎\n ")])]),t._v(" "),a("li",{},[a("a",{attrs:{target:"_blank",href:"http://xl9.xunlei.com/chrome/client/view/pro/1.0/video_detail.html?movieid=mi1129492&direct=film_banner&entrypage=homepage_d"}},[t._v("\n 6.奇异博士\n ")])]),t._v(" "),a("li",{},[a("a",{attrs:{target:"_blank",href:"http://xl9.xunlei.com/chrome/client/view/pro/1.0/video_detail.html?movieid=mi1333638&direct=film_banner&entrypage=homepage_d"}},[t._v("\n 7.星际迷航3:超越星辰\n ")])]),t._v(" "),a("li",{},[a("a",{attrs:{target:"_blank",href:"http://xl9.xunlei.com/chrome/client/view/pro/1.0/video_detail.html?movieid=mi1304350&direct=film_banner&entrypage=homepage_d"}},[t._v("\n 8.自杀小队\n ")])])])])])])])}]}}}); 2 | //# sourceMappingURL=12.dfa0e2443a587c28ecd2.js.map -------------------------------------------------------------------------------- /demo/views/LargePageNotLazy.vue: -------------------------------------------------------------------------------- 1 | 96 | 97 | 120 | -------------------------------------------------------------------------------- /demo/components/StMovieQq.vue: -------------------------------------------------------------------------------- 1 | 129 | -------------------------------------------------------------------------------- /demo/dist/static/js/app.26d28d9a8b22b3019f9c.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([6],[,function(e,t,n){!function(t,n){e.exports=n()}(0,function(){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},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="",t(t.s=2)}([function(e,t,n){var o=n(3)(n(1),n(4),null,null,null);o.options.__file="/Users/benzhao/Sites/@xunlei/vue-lazy-component/src/VueLazyComponent.vue",o.esModule&&Object.keys(o.esModule).some(function(e){return"default"!==e&&"__"!==e.substr(0,2)})&&console.error("named exports are not supported in *.vue files."),o.options.functional&&console.error("[vue-loader] VueLazyComponent.vue: functional components are not supported with templates, they should use render functions."),e.exports=o.exports},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"VueLazyComponent",props:{timeout:{type:Number},tagName:{type:String,default:"div"},viewport:{type:"undefined"!=typeof window?window.HTMLElement:Object,default:function(){return null}},threshold:{type:String,default:"0px"},direction:{type:String,default:"vertical"},maxWaitingTime:{type:Number,default:50}},data:function(){return{isInit:!1,timer:null,io:null,loading:!1}},created:function(){var e=this;this.timeout&&(this.timer=setTimeout(function(){e.init()},this.timeout))},mounted:function(){if(!this.timeout){var e=void 0;switch(this.direction){case"vertical":e=this.threshold+" 0px";break;case"horizontal":e="0px "+this.threshold}this.io=new window.IntersectionObserver(this.intersectionHandler,{rootMargin:e,root:this.viewport,threshold:[0,Number.MIN_VALUE,.01]}),this.io.observe(this.$el)}},beforeDestroy:function(){this.io&&this.io.unobserve(this.$el)},methods:{intersectionHandler:function(e){(e[0].isIntersecting||e[0].intersectionRatio)&&(this.init(),this.io.unobserve(this.$el))},init:function(){var e=this;this.$emit("beforeInit"),this.$emit("before-init"),this.loading=!0,this.requestAnimationFrame(function(){e.isInit=!0,e.$emit("init")})},requestAnimationFrame:function(e){var t=this;return setTimeout(function(){t.isInit||e()},this.maxWaitingTime),(window.requestAnimationFrame||function(e){return setTimeout(e,1e3/60)})(e)}}}},function(e,t,n){"use strict";/** 2 | * vue-lazy-component 3 | * (c) 2017 赵兵 4 | * @license MIT 5 | */ 6 | var o=n(0),i={};i.install=function(e,t){e.component(o.name,o)},i.component=o,"undefined"!=typeof window&&window.Vue&&window.Vue.use(i),e.exports=i},function(e,t){e.exports=function(e,t,n,o,i){var r,a=e=e||{},u=typeof e.default;"object"!==u&&"function"!==u||(r=e,a=e.default);var s="function"==typeof a?a.options:a;t&&(s.render=t.render,s.staticRenderFns=t.staticRenderFns),o&&(s._scopeId=o);var c;if(i?(c=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,e),e&&e._registeredComponents&&e._registeredComponents.add(i)},s._ssrRegister=c):n&&(c=n),c){var l=s.functional,f=l?s.render:s.beforeCreate;l?s.render=function(e,t){return c.call(t),f(e,t)}:s.beforeCreate=f?[].concat(f,c):[c]}return{esModule:r,exports:a,options:s}}},function(e,t,n){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition-group",{staticStyle:{position:"relative"},attrs:{tag:e.tagName,name:"lazy-component"},on:{"before-enter":function(t){return e.$emit("before-enter",t)},"before-leave":function(t){return e.$emit("before-leave",t)},"after-enter":function(t){return e.$emit("after-enter",t)},"after-leave":function(t){return e.$emit("after-leave",t)}}},[e.isInit?n("div",{key:"component"},[e._t("default",null,{loading:e.loading})],2):e.$slots.skeleton?n("div",{key:"skeleton"},[e._t("skeleton")],2):n("div",{key:"loading"})])},staticRenderFns:[]},e.exports.render._withStripped=!0}])})},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),r=o(i),a=n(15),u=o(a);r.default.use(u.default);var s=new u.default({routes:[{path:"/large-page",name:"LargePage",alias:"/",component:function(e){return n.e(2).then(function(){var t=[n(21)];e.apply(null,t)}.bind(this)).catch(n.oe)}},{path:"/large-page-chunks",name:"LargePageChunks",component:function(e){return n.e(5).then(function(){var t=[n(22)];e.apply(null,t)}.bind(this)).catch(n.oe)}},{path:"/large-page-not-lazy",name:"LargePageNotLazy",component:function(e){return n.e(3).then(function(){var t=[n(23)];e.apply(null,t)}.bind(this)).catch(n.oe)}},{path:"/timeout",name:"Timeout",component:function(e){return n.e(1).then(function(){var t=[n(25)];e.apply(null,t)}.bind(this)).catch(n.oe)}},{path:"/custom-transition",name:"CustomTransition",component:function(e){return n.e(0).then(function(){var t=[n(20)];e.apply(null,t)}.bind(this)).catch(n.oe)}},{path:"/specific-viewport",name:"SpecificViewport",component:function(e){return n.e(4).then(function(){var t=[n(24)];e.apply(null,t)}.bind(this)).catch(n.oe)}}]});t.default=s},function(e,t,n){function o(e){n(13)}var i=n(4)(n(10),n(14),o,null,null);e.exports=i.exports},,function(e,t){},function(e,t){},function(e,t){},function(e,t){},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}var i=n(0),r=o(i),a=n(3),u=o(a),s=n(2),c=o(s),l=n(1);r.default.config.productionTip=!1,r.default.use(l),new r.default({el:"#app",router:c.default,template:"",components:{App:u.default}})},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),n(12),n(5),n(6),n(11),n(8),n(7);var o=n(0);(function(e){return e&&e.__esModule?e:{default:e}})(o).default.directive("highlightjs",{deep:!0,bind:function(e,t){e.querySelectorAll("code").forEach(function(e){t.value&&(e.textContent=t.value),window.hljs.highlightBlock(e)})},componentUpdated:function(e,t){e.querySelectorAll("code").forEach(function(e){t.value&&(e.textContent=t.value,window.hljs.highlightBlock(e))})}}),t.default={}},function(e,t){},function(e,t){},function(e,t){},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("header",{staticClass:"page-header"},[e._m(0),e._v(" "),n("router-link",{staticClass:"link",attrs:{to:"/large-page"}},[e._v("Demo1: 超长页面懒加载")]),e._v(" "),n("router-link",{staticClass:"link",attrs:{to:"/timeout"}},[e._v("Demo2: 延时加载")]),e._v(" "),n("router-link",{staticClass:"link",attrs:{to:"/custom-transition"}},[e._v("Demo3: 自定义过渡效果")]),e._v(" "),n("router-link",{staticClass:"link",attrs:{to:"/large-page-chunks"}},[e._v("Demo4: 超长页面懒加载（分包）")]),e._v(" "),n("router-link",{staticClass:"link",attrs:{to:"/specific-viewport"}},[e._v("Demo5: 特定视口内懒加载 ")])],1),e._v(" "),n("router-view",{staticClass:"page-container"}),e._v(" "),e._m(1)],1)},staticRenderFns:[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("h1",[e._v("Vue Lazy Component Demos "),n("a",{attrs:{href:"https://badge.fury.io/js/%40xunlei%2Fvue-lazy-component"}},[n("img",{attrs:{src:"https://badge.fury.io/js/%40xunlei%2Fvue-lazy-component.svg",alt:"npm version",height:"18"}})])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("a",{attrs:{href:"https://github.com/xunleif2e/vue-lazy-component",target:"_blank"}},[n("img",{staticStyle:{position:"fixed",top:"0",right:"0",border:"0","z-index":"1000"},attrs:{src:"https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67",alt:"Fork me on GitHub","data-canonical-src":"https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"}})])}]}},,,,,,,,,,,,function(e,t,n){e.exports=n.p+"static/img/spr-d3.068dda5.png"}],[9]); 7 | //# sourceMappingURL=app.26d28d9a8b22b3019f9c.js.map -------------------------------------------------------------------------------- /demo/dist/static/js/5.ea4391f15177dc336534.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([5],{22:function(t,s,l){var e=l(4)(l(61),l(78),null,null,null);t.exports=e.exports},45:function(t,s,l){var e=l(4)(null,l(51),null,null,null);t.exports=e.exports},46:function(t,s,l){var e=l(4)(null,l(50),null,null,null);t.exports=e.exports},47:function(t,s,l){var e=l(4)(null,l(52),null,null,null);t.exports=e.exports},48:function(t,s,l){var e=l(4)(null,l(54),null,null,null);t.exports=e.exports},49:function(t,s,l){var e=l(4)(null,l(53),null,null,null);t.exports=e.exports},50:function(t,s){t.exports={render:function(){var t=this,s=t.$createElement;t._self._c;return t._m(0)},staticRenderFns:[function(){var t=this,s=t.$createElement,l=t._self._c||s;return l("div",{staticClass:"module-box"},[l("div",{staticClass:"title"},[l("h3",[t._v("MO金社")])]),t._v(" "),l("div",{staticClass:"module-main load-mo"},[l("div",{staticClass:"module-list fl"},[l("div",{staticClass:"load-mo-main"},[l("div",{staticClass:"mo-main-1"},[l("div",{staticClass:"load-list-con"})]),t._v(" "),l("div",{staticClass:"mo-main-2"},[l("ul",[l("li"),t._v(" "),l("li"),t._v(" "),l("li")])])]),t._v(" "),l("div",{staticClass:"load-mo-mid"},[l("div",{staticClass:"load-list-con"})])]),t._v(" "),l("div",{staticClass:"module-rank load-rank fr"},[l("h3",{staticClass:"tit-mo"},[t._v("每日MO金")]),t._v(" "),l("div",{staticClass:"load-list-con"},[l("ul",[l("li"),t._v(" "),l("li"),t._v(" "),l("li"),t._v(" "),l("li"),t._v(" "),l("li")])])])])])}]}},51:function(t,s){t.exports={render:function(){var t=this,s=t.$createElement;t._self._c;return t._m(0)},staticRenderFns:[function(){var t=this,s=t.$createElement,l=t._self._c||s;return l("div",{staticClass:"module-box"},[l("div",{staticClass:"title"},[l("h3",[t._v("迅雷直播")]),t._v(" "),l("div",{staticClass:"tit-box"})]),t._v(" "),l("div",{staticClass:"module-main"},[l("div",{staticClass:"module-list load-list-live"},[l("ul",[l("li",[l("span",{staticClass:"load-label"}),t._v(" "),l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("span",{staticClass:"load-label"}),t._v(" "),l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("span",{staticClass:"load-label"}),t._v(" "),l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("span",{staticClass:"load-label"}),t._v(" "),l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("span",{staticClass:"load-label"}),t._v(" "),l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("span",{staticClass:"load-label"}),t._v(" "),l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("span",{staticClass:"load-label"}),t._v(" "),l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("span",{staticClass:"load-label"}),t._v(" "),l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("span",{staticClass:"load-label"}),t._v(" "),l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",{staticClass:"module-rank load-rank"},[l("div",{staticClass:"load-list-con"},[l("ul",[l("li"),t._v(" "),l("li"),t._v(" "),l("li"),t._v(" "),l("li"),t._v(" "),l("li")])])])])])])])}]}},52:function(t,s){t.exports={render:function(){var t=this,s=t.$createElement;t._self._c;return t._m(0)},staticRenderFns:[function(){var t=this,s=t.$createElement,l=t._self._c||s;return l("div",{staticClass:"module-box"},[l("div",{staticClass:"title"},[l("h3",[t._v("热门电影")])]),t._v(" "),l("div",{staticClass:"module-main"},[l("div",{staticClass:"module-list fl"},[l("ul",{staticClass:"load-list"},[l("li",[l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("div",{staticClass:"load-list-con"})])])]),t._v(" "),l("div",{staticClass:"module-rank load-rank fr"},[l("div",{staticClass:"load-list-con"},[l("ul",[l("li"),t._v(" "),l("li"),t._v(" "),l("li"),t._v(" "),l("li"),t._v(" "),l("li")])])])])])}]}},53:function(t,s){t.exports={render:function(){var t=this,s=t.$createElement;t._self._c;return t._m(0)},staticRenderFns:[function(){var t=this,s=t.$createElement,l=t._self._c||s;return l("div",{staticClass:"module-box"},[l("div",{staticClass:"title"},[l("h3",[t._v("热门美剧")])]),t._v(" "),l("div",{staticClass:"tv-list"},[l("ul",{staticClass:"load-list"},[l("li",{staticClass:"big"},[l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("div",{staticClass:"load-list-con"})])])])])}]}},54:function(t,s){t.exports={render:function(){var t=this,s=t.$createElement;t._self._c;return t._m(0)},staticRenderFns:[function(){var t=this,s=t.$createElement,l=t._self._c||s;return l("div",{staticClass:"module-box"},[l("div",{staticClass:"title"},[l("h3",[t._v("游戏专区")])]),t._v(" "),l("div",{staticClass:"module-main"},[l("div",{staticClass:"module-list load-list-game fl"},[l("div",{staticClass:"load-game-1"},[l("ul",[l("li",[l("div",{staticClass:"load-list-con"}),t._v(" "),l("div",{staticClass:"game-label"})]),t._v(" "),l("li",[l("div",{staticClass:"load-list-con"}),t._v(" "),l("div",{staticClass:"game-label"})]),t._v(" "),l("li",[l("div",{staticClass:"load-list-con"}),t._v(" "),l("div",{staticClass:"game-label"})]),t._v(" "),l("li",[l("div",{staticClass:"load-list-con"}),t._v(" "),l("div",{staticClass:"game-label"})])])]),t._v(" "),l("div",{staticClass:"load-game-2"},[l("ul",[l("li",[l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("div",{staticClass:"load-list-con"})]),t._v(" "),l("li",[l("div",{staticClass:"load-list-con"})])])])]),t._v(" "),l("div",{staticClass:"load-game-rank"},[l("div",{staticClass:"game-rank-tit"},[l("a",{staticClass:"cur",attrs:{href:"javascript:;"}},[t._v("我玩过的")]),t._v(" "),l("a",{attrs:{href:"javascript:;"}},[t._v("游戏榜")]),t._v(" "),l("a",{attrs:{href:"javascript:;"}},[t._v("今日新服")])]),t._v(" "),l("div",{staticClass:"load-game-list"},[l("ul",[l("li",[l("div",{staticClass:"load-game-box"})]),t._v(" "),l("li",[l("div",{staticClass:"load-game-box"})]),t._v(" "),l("li",[l("div",{staticClass:"load-game-box"})]),t._v(" "),l("li",[l("div",{staticClass:"load-game-box"})])])])])])])}]}},61:function(t,s,l){"use strict";function e(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(s,"__esModule",{value:!0}),l(5),l(6),l(8),l(7);var i=l(47),a=e(i),n=l(49),o=e(n),c=l(45),v=e(c),d=l(48),u=e(d),r=l(46),_=e(r);s.default={components:{StMovieQqSkeleton:a.default,StSeriesSohuSkeleton:o.default,StLiveSkeleton:v.default,StNiuxSkeleton:u.default,StMoJinSkeleton:_.default,StMovieQq:function(t){l.e(12).then(function(){var s=[l(37)];t.apply(null,s)}.bind(this)).catch(l.oe)},StSeriesSohu:function(t){l.e(11).then(function(){var s=[l(39)];t.apply(null,s)}.bind(this)).catch(l.oe)},StLive:function(t){l.e(8).then(function(){var s=[l(35)];t.apply(null,s)}.bind(this)).catch(l.oe)},StNiux:function(t){l.e(10).then(function(){var s=[l(38)];t.apply(null,s)}.bind(this)).catch(l.oe)},StMoJin:function(t){l.e(9).then(function(){var s=[l(36)];t.apply(null,s)}.bind(this)).catch(l.oe)}},data:function(){return{template:'\n \n \n\n\n\n \n \n\n\n\n \n \n\n\n\n \n \n\n\n\n \n \n',js:" components: {\n StMovieQqSkeleton,\n StSeriesSohuSkeleton,\n StLiveSkeleton,\n StNiuxSkeleton,\n StMoJinSkeleton,\n StMovieQq (resolve) {\n require(['@/components/StMovieQq'], resolve)\n },\n StSeriesSohu (resolve) {\n require(['@/components/StSeriesSohu'], resolve)\n },\n StLive (resolve) {\n require(['@/components/StLive'], resolve)\n },\n StNiux (resolve) {\n require(['@/components/StNiux'], resolve)\n },\n StMoJin (resolve) {\n require(['@/components/StMoJin'], resolve)\n }\n},"}}}},78:function(t,s){t.exports={render:function(){var t=this,s=t.$createElement,l=t._self._c||s;return l("div",{staticStyle:{height:"100%"}},[l("div",{staticClass:"index-d3 switch"},[l("div",{staticClass:"d3-more",staticStyle:{display:"block"}},[l("h2",[t._v("组件即将可见时自动加载，配合 webpack 做到组件代码异步分包载入")]),t._v(" "),l("details",[l("summary",[t._v("查看代码示例")]),t._v(" "),l("h3",[t._v("Template")]),t._v(" "),l("pre",{directives:[{name:"highlightjs",rawName:"v-highlightjs",value:t.template,expression:"template"}]},[l("code",{staticClass:"html"},[t._v(t._s(t.template))])]),t._v(" "),l("h3",[t._v("Script")]),t._v(" "),l("pre",{directives:[{name:"highlightjs",rawName:"v-highlightjs",value:t.js,expression:"js"}]},[l("code",{staticClass:"javascript"},[t._v(t._s(t.js))])])]),t._v(" "),t._l(10,function(s){return[l("vue-lazy-component",{scopedSlots:t._u([{key:"default",fn:function(s){return[s.loading?l("st-series-sohu"):t._e()]}}])},[l("st-series-sohu-skeleton",{slot:"skeleton"})],1),t._v(" "),l("vue-lazy-component",{scopedSlots:t._u([{key:"default",fn:function(s){return[s.loading?l("st-movie-qq"):t._e()]}}])},[l("st-movie-qq-skeleton",{slot:"skeleton"})],1),t._v(" "),l("vue-lazy-component",{scopedSlots:t._u([{key:"default",fn:function(s){return[s.loading?l("st-live"):t._e()]}}])},[l("st-live-skeleton",{slot:"skeleton"})],1),t._v(" "),l("vue-lazy-component",{scopedSlots:t._u([{key:"default",fn:function(s){return[s.loading?l("st-niux"):t._e()]}}])},[l("st-niux-skeleton",{slot:"skeleton"})],1),t._v(" "),l("vue-lazy-component",{scopedSlots:t._u([{key:"default",fn:function(s){return[s.loading?l("st-mo-jin"):t._e()]}}])},[l("st-mo-jin-skeleton",{slot:"skeleton"})],1)]})],2)])])},staticRenderFns:[]}}}); 2 | //# sourceMappingURL=5.ea4391f15177dc336534.js.map -------------------------------------------------------------------------------- /demo/components/StMoJin.vue: -------------------------------------------------------------------------------- 1 | 119 | 120 | 121 | 368 | -------------------------------------------------------------------------------- /dist/vue-lazy-component.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["VueLazyComponent"] = factory(); 8 | else 9 | root["VueLazyComponent"] = 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 | /******/ i: moduleId, 25 | /******/ l: false, 26 | /******/ exports: {} 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.l = 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 | /******/ // identity function for calling harmony imports with the correct context 47 | /******/ __webpack_require__.i = function(value) { return value; }; 48 | /******/ 49 | /******/ // define getter function for harmony exports 50 | /******/ __webpack_require__.d = function(exports, name, getter) { 51 | /******/ if(!__webpack_require__.o(exports, name)) { 52 | /******/ Object.defineProperty(exports, name, { 53 | /******/ configurable: false, 54 | /******/ enumerable: true, 55 | /******/ get: getter 56 | /******/ }); 57 | /******/ } 58 | /******/ }; 59 | /******/ 60 | /******/ // getDefaultExport function for compatibility with non-harmony modules 61 | /******/ __webpack_require__.n = function(module) { 62 | /******/ var getter = module && module.__esModule ? 63 | /******/ function getDefault() { return module['default']; } : 64 | /******/ function getModuleExports() { return module; }; 65 | /******/ __webpack_require__.d(getter, 'a', getter); 66 | /******/ return getter; 67 | /******/ }; 68 | /******/ 69 | /******/ // Object.prototype.hasOwnProperty.call 70 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 71 | /******/ 72 | /******/ // __webpack_public_path__ 73 | /******/ __webpack_require__.p = ""; 74 | /******/ 75 | /******/ // Load entry module and return exports 76 | /******/ return __webpack_require__(__webpack_require__.s = 2); 77 | /******/ }) 78 | /************************************************************************/ 79 | /******/ ([ 80 | /* 0 */ 81 | /***/ (function(module, exports, __webpack_require__) { 82 | 83 | var disposed = false 84 | var Component = __webpack_require__(3)( 85 | /* script */ 86 | __webpack_require__(1), 87 | /* template */ 88 | __webpack_require__(4), 89 | /* styles */ 90 | null, 91 | /* scopeId */ 92 | null, 93 | /* moduleIdentifier (server only) */ 94 | null 95 | ) 96 | Component.options.__file = "/Users/benzhao/Sites/@xunlei/vue-lazy-component/src/VueLazyComponent.vue" 97 | if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key.substr(0, 2) !== "__"})) {console.error("named exports are not supported in *.vue files.")} 98 | if (Component.options.functional) {console.error("[vue-loader] VueLazyComponent.vue: functional components are not supported with templates, they should use render functions.")} 99 | 100 | /* hot reload */ 101 | if (false) {(function () { 102 | var hotAPI = require("vue-hot-reload-api") 103 | hotAPI.install(require("vue"), false) 104 | if (!hotAPI.compatible) return 105 | module.hot.accept() 106 | if (!module.hot.data) { 107 | hotAPI.createRecord("data-v-175ab158", Component.options) 108 | } else { 109 | hotAPI.reload("data-v-175ab158", Component.options) 110 | } 111 | module.hot.dispose(function (data) { 112 | disposed = true 113 | }) 114 | })()} 115 | 116 | module.exports = Component.exports 117 | 118 | 119 | /***/ }), 120 | /* 1 */ 121 | /***/ (function(module, exports, __webpack_require__) { 122 | 123 | "use strict"; 124 | 125 | 126 | Object.defineProperty(exports, "__esModule", { 127 | value: true 128 | }); 129 | // 130 | // 131 | // 132 | // 133 | // 134 | // 135 | // 136 | // 137 | // 138 | // 139 | // 140 | // 141 | // 142 | // 143 | // 144 | // 145 | // 146 | // 147 | 148 | exports.default = { 149 | name: 'VueLazyComponent', 150 | 151 | props: { 152 | timeout: { 153 | type: Number 154 | }, 155 | tagName: { 156 | type: String, 157 | default: 'div' 158 | }, 159 | viewport: { 160 | type: typeof window !== 'undefined' ? window.HTMLElement : Object, 161 | default: function _default() { 162 | return null; 163 | } 164 | }, 165 | threshold: { 166 | type: String, 167 | default: '0px' 168 | }, 169 | direction: { 170 | type: String, 171 | default: 'vertical' 172 | }, 173 | maxWaitingTime: { 174 | type: Number, 175 | default: 50 176 | } 177 | }, 178 | 179 | data: function data() { 180 | return { 181 | isInit: false, 182 | timer: null, 183 | io: null, 184 | loading: false 185 | }; 186 | }, 187 | created: function created() { 188 | var _this = this; 189 | 190 | // 如果指定timeout则无论可见与否都是在timeout之后初始化 191 | if (this.timeout) { 192 | this.timer = setTimeout(function () { 193 | _this.init(); 194 | }, this.timeout); 195 | } 196 | }, 197 | mounted: function mounted() { 198 | if (!this.timeout) { 199 | // 根据滚动方向来构造视口外边距，用于提前加载 200 | var rootMargin = void 0; 201 | switch (this.direction) { 202 | case 'vertical': 203 | rootMargin = this.threshold + ' 0px'; 204 | break; 205 | case 'horizontal': 206 | rootMargin = '0px ' + this.threshold; 207 | break; 208 | } 209 | 210 | // 观察视口与组件容器的交叉情况 211 | this.io = new window.IntersectionObserver(this.intersectionHandler, { 212 | rootMargin: rootMargin, 213 | root: this.viewport, 214 | threshold: [0, Number.MIN_VALUE, 0.01] 215 | }); 216 | this.io.observe(this.$el); 217 | } 218 | }, 219 | beforeDestroy: function beforeDestroy() { 220 | // 在组件销毁前取消观察 221 | if (this.io) { 222 | this.io.unobserve(this.$el); 223 | } 224 | }, 225 | 226 | 227 | methods: { 228 | // 交叉情况变化处理函数 229 | intersectionHandler: function intersectionHandler(entries) { 230 | if ( 231 | // 正在交叉 232 | entries[0].isIntersecting || 233 | // 交叉率大于0 234 | entries[0].intersectionRatio) { 235 | this.init(); 236 | this.io.unobserve(this.$el); 237 | } 238 | }, 239 | 240 | 241 | // 处理组件和骨架组件的切换 242 | init: function init() { 243 | var _this2 = this; 244 | 245 | // 此时说明骨架组件即将被切换 246 | this.$emit('beforeInit'); 247 | this.$emit('before-init'); 248 | 249 | // 此时可以准备加载懒加载组件的资源 250 | this.loading = true; 251 | 252 | // 由于函数会在主线程中执行，加载懒加载组件非常耗时，容易卡顿 253 | // 所以在requestAnimationFrame回调中延后执行 254 | this.requestAnimationFrame(function () { 255 | _this2.isInit = true; 256 | _this2.$emit('init'); 257 | }); 258 | }, 259 | requestAnimationFrame: function requestAnimationFrame(callback) { 260 | var _this3 = this; 261 | 262 | // 防止等待太久没有执行回调 263 | // 设置最大等待时间 264 | setTimeout(function () { 265 | if (_this3.isInit) return; 266 | callback(); 267 | }, this.maxWaitingTime); 268 | 269 | // 兼容不支持requestAnimationFrame 的浏览器 270 | return (window.requestAnimationFrame || function (callback) { 271 | return setTimeout(callback, 1000 / 60); 272 | })(callback); 273 | } 274 | } 275 | }; 276 | 277 | /***/ }), 278 | /* 2 */ 279 | /***/ (function(module, exports, __webpack_require__) { 280 | 281 | "use strict"; 282 | 283 | 284 | /** 285 | * vue-lazy-component 286 | * (c) 2017 赵兵 287 | * @license MIT 288 | */ 289 | var VueLazyComponent = __webpack_require__(0); 290 | var vueLazyComponent = {}; 291 | 292 | /** 293 | * Plugin API 294 | */ 295 | vueLazyComponent.install = function (Vue, options) { 296 | Vue.component(VueLazyComponent.name, VueLazyComponent); 297 | }; 298 | 299 | vueLazyComponent.component = VueLazyComponent; 300 | 301 | /** 302 | * Auto install 303 | */ 304 | if (typeof window !== 'undefined' && window.Vue) { 305 | window.Vue.use(vueLazyComponent); 306 | } 307 | 308 | module.exports = vueLazyComponent; 309 | 310 | /***/ }), 311 | /* 3 */ 312 | /***/ (function(module, exports) { 313 | 314 | /* globals __VUE_SSR_CONTEXT__ */ 315 | 316 | // this module is a runtime utility for cleaner component module output and will 317 | // be included in the final webpack user bundle 318 | 319 | module.exports = function normalizeComponent ( 320 | rawScriptExports, 321 | compiledTemplate, 322 | injectStyles, 323 | scopeId, 324 | moduleIdentifier /* server only */ 325 | ) { 326 | var esModule 327 | var scriptExports = rawScriptExports = rawScriptExports || {} 328 | 329 | // ES6 modules interop 330 | var type = typeof rawScriptExports.default 331 | if (type === 'object' || type === 'function') { 332 | esModule = rawScriptExports 333 | scriptExports = rawScriptExports.default 334 | } 335 | 336 | // Vue.extend constructor export interop 337 | var options = typeof scriptExports === 'function' 338 | ? scriptExports.options 339 | : scriptExports 340 | 341 | // render functions 342 | if (compiledTemplate) { 343 | options.render = compiledTemplate.render 344 | options.staticRenderFns = compiledTemplate.staticRenderFns 345 | } 346 | 347 | // scopedId 348 | if (scopeId) { 349 | options._scopeId = scopeId 350 | } 351 | 352 | var hook 353 | if (moduleIdentifier) { // server build 354 | hook = function (context) { 355 | // 2.3 injection 356 | context = 357 | context || // cached call 358 | (this.$vnode && this.$vnode.ssrContext) || // stateful 359 | (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional 360 | // 2.2 with runInNewContext: true 361 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { 362 | context = __VUE_SSR_CONTEXT__ 363 | } 364 | // inject component styles 365 | if (injectStyles) { 366 | injectStyles.call(this, context) 367 | } 368 | // register component module identifier for async chunk inferrence 369 | if (context && context._registeredComponents) { 370 | context._registeredComponents.add(moduleIdentifier) 371 | } 372 | } 373 | // used by ssr in case component is cached and beforeCreate 374 | // never gets called 375 | options._ssrRegister = hook 376 | } else if (injectStyles) { 377 | hook = injectStyles 378 | } 379 | 380 | if (hook) { 381 | var functional = options.functional 382 | var existing = functional 383 | ? options.render 384 | : options.beforeCreate 385 | if (!functional) { 386 | // inject component registration as beforeCreate hook 387 | options.beforeCreate = existing 388 | ? [].concat(existing, hook) 389 | : [hook] 390 | } else { 391 | // register for functioal component in vue file 392 | options.render = function renderWithStyleInjection (h, context) { 393 | hook.call(context) 394 | return existing(h, context) 395 | } 396 | } 397 | } 398 | 399 | return { 400 | esModule: esModule, 401 | exports: scriptExports, 402 | options: options 403 | } 404 | } 405 | 406 | 407 | /***/ }), 408 | /* 4 */ 409 | /***/ (function(module, exports, __webpack_require__) { 410 | 411 | module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h; 412 | return _c('transition-group', { 413 | staticStyle: { 414 | "position": "relative" 415 | }, 416 | attrs: { 417 | "tag": _vm.tagName, 418 | "name": "lazy-component" 419 | }, 420 | on: { 421 | "before-enter": function (el) { return _vm.$emit('before-enter', el); }, 422 | "before-leave": function (el) { return _vm.$emit('before-leave', el); }, 423 | "after-enter": function (el) { return _vm.$emit('after-enter', el); }, 424 | "after-leave": function (el) { return _vm.$emit('after-leave', el); } 425 | } 426 | }, [(_vm.isInit) ? _c('div', { 427 | key: "component" 428 | }, [_vm._t("default", null, { 429 | loading: _vm.loading 430 | })], 2) : (_vm.$slots.skeleton) ? _c('div', { 431 | key: "skeleton" 432 | }, [_vm._t("skeleton")], 2) : _c('div', { 433 | key: "loading" 434 | })]) 435 | },staticRenderFns: []} 436 | module.exports.render._withStripped = true 437 | if (false) { 438 | module.hot.accept() 439 | if (module.hot.data) { 440 | require("vue-hot-reload-api").rerender("data-v-175ab158", module.exports) 441 | } 442 | } 443 | 444 | /***/ }) 445 | /******/ ]); 446 | }); -------------------------------------------------------------------------------- /demo/dist/static/js/11.64f212a22e288139402c.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///static/js/11.64f212a22e288139402c.js","webpack:///./demo/components/StSeriesSohu.vue?8820***","webpack:///./demo/components/StSeriesSohu.vue?35a1****"],"names":["webpackJsonp","39","module","exports","__webpack_require__","Component","41","render","_vm","this","_h","$createElement","_self","_c","_m","staticRenderFns","staticClass","_v","attrs","href","target","src","alt"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,EAASC,GCHjC,GAAAC,GAAAD,EAAA,GAEA,KAEAA,EAAA,IAEA,KAEA,KAEA,KAGAF,GAAAC,QAAAE,EAAAF,SDUMG,GACA,SAAUJ,EAAQC,GExBxBD,EAAAC,SAAgBI,OAAA,WAAmB,GAAAC,GAAAC,KAAaC,EAAAF,EAAAG,cAA0BH,GAAAI,MAAAC,EAC1E,OAAAL,GAAAM,GAAA,IACCC,iBAAA,WAA+B,GAAAP,GAAAC,KAAaC,EAAAF,EAAAG,eAA0BE,EAAAL,EAAAI,MAAAC,IAAAH,CACvE,OAAAG,GAAA,OACAG,YAAA,eACGH,EAAA,OACHG,YAAA,UACGH,EAAA,MAAAL,EAAAS,GAAA,UAAAT,EAAAS,GAAA,KAAAJ,EAAA,OACHG,YAAA,YACGH,EAAA,KACHG,YAAA,WACAE,OACAC,KAAA,+BACAC,OAAA,YAEGZ,EAAAS,GAAA,0BAAAJ,EAAA,QACHG,YAAA,eACGR,EAAAS,GAAA,aAAAT,EAAAS,GAAA,KAAAJ,EAAA,OACHG,YAAA,gBACGH,EAAA,OACHG,YAAA,YACGH,EAAA,MAAAA,EAAA,MACHG,YAAA,QACGH,EAAA,KACHG,YAAA,MACAE,OACAE,OAAA,SACAD,KAAA,kDAEGN,EAAA,OACHK,OACAG,IAAA,wDACAC,IAAA,iBAEGd,EAAAS,GAAA,KAAAJ,EAAA,QACHG,YAAA,iBACGR,EAAAS,GAAA,KAAAJ,EAAA,OACHG,YAAA,gBACGH,EAAA,KACHG,YAAA,eACGR,EAAAS,GAAA,YAAAT,EAAAS,GAAA,KAAAJ,EAAA,KACHG,YAAA,YACGR,EAAAS,GAAA,qBAAAT,EAAAS,GAAA,KAAAJ,EAAA,SAAwDA,EAAA,KAC3DG,YAAA,MACAE,OACAE,OAAA,SACAD,KAAA,kDAEGN,EAAA,OACHK,OACAG,IAAA,uEACAC,IAAA,iBAEGd,EAAAS,GAAA,KAAAJ,EAAA,QACHG,YAAA,iBACGR,EAAAS,GAAA,KAAAJ,EAAA,OACHG,YAAA,gBACGH,EAAA,KACHG,YAAA,eACGR,EAAAS,GAAA,YAAAT,EAAAS,GAAA,KAAAJ,EAAA,KACHG,YAAA,YACGR,EAAAS,GAAA,qBAAAT,EAAAS,GAAA,KAAAJ,EAAA,SAAwDA,EAAA,KAC3DG,YAAA,MACAE,OACAE,OAAA,SACAD,KAAA,kDAEGN,EAAA,OACHK,OACAG,IAAA,uEACAC,IAAA,mBAEGd,EAAAS,GAAA,KAAAJ,EAAA,QACHG,YAAA,iBACGR,EAAAS,GAAA,KAAAJ,EAAA,OACHG,YAAA,gBACGH,EAAA,KACHG,YAAA,eACGR,EAAAS,GAAA,YAAAT,EAAAS,GAAA,KAAAJ,EAAA,KACHG,YAAA,YACGR,EAAAS,GAAA,uBAAAT,EAAAS,GAAA,KAAAJ,EAAA,SAA0DA,EAAA,KAC7DG,YAAA,MACAE,OACAE,OAAA,SACAD,KAAA,kDAEGN,EAAA,OACHK,OACAG,IAAA,wDACAC,IAAA,gBAEGd,EAAAS,GAAA,KAAAJ,EAAA,QACHG,YAAA,iBACGR,EAAAS,GAAA,KAAAJ,EAAA,OACHG,YAAA,gBACGH,EAAA,KACHG,YAAA,eACGR,EAAAS,GAAA,YAAAT,EAAAS,GAAA,KAAAJ,EAAA,KACHG,YAAA,YACGR,EAAAS,GAAA,oBAAAT,EAAAS,GAAA,KAAAJ,EAAA,SAAuDA,EAAA,KAC1DG,YAAA,MACAE,OACAE,OAAA,SACAD,KAAA,kDAEGN,EAAA,OACHK,OACAG,IAAA,wDACAC,IAAA,iBAEGd,EAAAS,GAAA,KAAAJ,EAAA,QACHG,YAAA,iBACGR,EAAAS,GAAA,KAAAJ,EAAA,OACHG,YAAA,gBACGH,EAAA,KACHG,YAAA,eACGR,EAAAS,GAAA,YAAAT,EAAAS,GAAA,KAAAJ,EAAA,KACHG,YAAA,YACGR,EAAAS,GAAA,qBAAAT,EAAAS,GAAA,KAAAJ,EAAA,SAAwDA,EAAA,KAC3DG,YAAA,MACAE,OACAE,OAAA,SACAD,KAAA,kDAEGN,EAAA,OACHK,OACAG,IAAA,uEACAC,IAAA,iBAEGd,EAAAS,GAAA,KAAAJ,EAAA,QACHG,YAAA,iBACGR,EAAAS,GAAA,KAAAJ,EAAA,OACHG,YAAA,gBACGH,EAAA,KACHG,YAAA,eACGR,EAAAS,GAAA,YAAAT,EAAAS,GAAA,KAAAJ,EAAA,KACHG,YAAA,YACGR,EAAAS,GAAA,qBAAAT,EAAAS,GAAA,KAAAJ,EAAA,SAAwDA,EAAA,KAC3DG,YAAA,MACAE,OACAE,OAAA,SACAD,KAAA,kDAEGN,EAAA,OACHK,OACAG,IAAA,wDACAC,IAAA,cAEGd,EAAAS,GAAA,KAAAJ,EAAA,QACHG,YAAA,iBACGR,EAAAS,GAAA,KAAAJ,EAAA,OACHG,YAAA,gBACGH,EAAA,KACHG,YAAA,eACGR,EAAAS,GAAA,YAAAT,EAAAS,GAAA,KAAAJ,EAAA,KACHG,YAAA,YACGR,EAAAS,GAAA","file":"static/js/11.64f212a22e288139402c.js","sourcesContent":["webpackJsonp([11],{\n\n/***/ 39:\n/***/ (function(module, exports, __webpack_require__) {\n\nvar Component = __webpack_require__(4)(\n /* script */\n null,\n /* template */\n __webpack_require__(41),\n /* styles */\n null,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n/***/ }),\n\n/***/ 41:\n/***/ (function(module, exports) {\n\nmodule.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _vm._m(0)\n},staticRenderFns: [function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n staticClass: \"module-box\"\n }, [_c('div', {\n staticClass: \"title\"\n }, [_c('h3', [_vm._v(\"热门美剧\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"tit-box\"\n }, [_c('a', {\n staticClass: \"link-com\",\n attrs: {\n \"href\": \"http://tv.sohu.com/drama/us/\",\n \"target\": \"_blank\"\n }\n }, [_vm._v(\"\\n 更多\\n \"), _c('span', {\n staticClass: \"text-arrow\"\n }, [_vm._v(\">\")])])])]), _vm._v(\" \"), _c('div', {\n staticClass: \"module-main\"\n }, [_c('div', {\n staticClass: \"tv-list\"\n }, [_c('ul', [_c('li', {\n staticClass: \"big\"\n }, [_c('a', {\n staticClass: \"pic\",\n attrs: {\n \"target\": \"_blank\",\n \"href\": \"http://tv.sohu.com/20161222/n476690521.shtml\"\n }\n }, [_c('img', {\n attrs: {\n \"src\": \"http://photocdn.sohu.com/20161221/vrsa_hor9271114.jpg\",\n \"alt\": \"隔离死城第1季第13集\"\n }\n }), _vm._v(\" \"), _c('span', {\n staticClass: \"ico-player\"\n })]), _vm._v(\" \"), _c('div', {\n staticClass: \"tv-list-con\"\n }, [_c('p', {\n staticClass: \"txt-update\"\n }, [_vm._v(\"更新至13集\")]), _vm._v(\" \"), _c('p', {\n staticClass: \"tv-name\"\n }, [_vm._v(\"隔离死城第1季第13集\")])])]), _vm._v(\" \"), _c('li', {}, [_c('a', {\n staticClass: \"pic\",\n attrs: {\n \"target\": \"_blank\",\n \"href\": \"http://tv.sohu.com/20161109/n472747423.shtml\"\n }\n }, [_c('img', {\n attrs: {\n \"src\": \"http://photocdn.sohu.com/20161111/vrsa_hor_1478837546216_9229258.jpg\",\n \"alt\": \"破产姐妹第5季第22集\"\n }\n }), _vm._v(\" \"), _c('span', {\n staticClass: \"ico-player\"\n })]), _vm._v(\" \"), _c('div', {\n staticClass: \"tv-list-con\"\n }, [_c('p', {\n staticClass: \"txt-update\"\n }, [_vm._v(\"更新至22集\")]), _vm._v(\" \"), _c('p', {\n staticClass: \"tv-name\"\n }, [_vm._v(\"破产姐妹第5季第22集\")])])]), _vm._v(\" \"), _c('li', {}, [_c('a', {\n staticClass: \"pic\",\n attrs: {\n \"target\": \"_blank\",\n \"href\": \"http://tv.sohu.com/20170319/n483857612.shtml\"\n }\n }, [_c('img', {\n attrs: {\n \"src\": \"http://photocdn.sohu.com/20170310/vrsa_hor_1489115711827_9281609.jpg\",\n \"alt\": \"胡迪尼与道尔第1季第10集\"\n }\n }), _vm._v(\" \"), _c('span', {\n staticClass: \"ico-player\"\n })]), _vm._v(\" \"), _c('div', {\n staticClass: \"tv-list-con\"\n }, [_c('p', {\n staticClass: \"txt-update\"\n }, [_vm._v(\"更新至10集\")]), _vm._v(\" \"), _c('p', {\n staticClass: \"tv-name\"\n }, [_vm._v(\"胡迪尼与道尔第1季第10集\")])])]), _vm._v(\" \"), _c('li', {}, [_c('a', {\n staticClass: \"pic\",\n attrs: {\n \"target\": \"_blank\",\n \"href\": \"http://tv.sohu.com/20170317/n483733204.shtml\"\n }\n }, [_c('img', {\n attrs: {\n \"src\": \"http://photocdn.sohu.com/20170310/vrsa_hor9313039.jpg\",\n \"alt\": \"盘中兽第1季第10集\"\n }\n }), _vm._v(\" \"), _c('span', {\n staticClass: \"ico-player\"\n })]), _vm._v(\" \"), _c('div', {\n staticClass: \"tv-list-con\"\n }, [_c('p', {\n staticClass: \"txt-update\"\n }, [_vm._v(\"更新至10集\")]), _vm._v(\" \"), _c('p', {\n staticClass: \"tv-name\"\n }, [_vm._v(\"盘中兽第1季第10集\")])])]), _vm._v(\" \"), _c('li', {}, [_c('a', {\n staticClass: \"pic\",\n attrs: {\n \"target\": \"_blank\",\n \"href\": \"http://tv.sohu.com/20170121/n479313300.shtml\"\n }\n }, [_c('img', {\n attrs: {\n \"src\": \"http://photocdn.sohu.com/20170117/vrsa_hor9291436.jpg\",\n \"alt\": \"亿万富翁第1季第12集\"\n }\n }), _vm._v(\" \"), _c('span', {\n staticClass: \"ico-player\"\n })]), _vm._v(\" \"), _c('div', {\n staticClass: \"tv-list-con\"\n }, [_c('p', {\n staticClass: \"txt-update\"\n }, [_vm._v(\"更新至12集\")]), _vm._v(\" \"), _c('p', {\n staticClass: \"tv-name\"\n }, [_vm._v(\"亿万富翁第1季第12集\")])])]), _vm._v(\" \"), _c('li', {}, [_c('a', {\n staticClass: \"pic\",\n attrs: {\n \"target\": \"_blank\",\n \"href\": \"http://tv.sohu.com/20170131/n479749763.shtml\"\n }\n }, [_c('img', {\n attrs: {\n \"src\": \"http://photocdn.sohu.com/20161226/vrsa_hor_1482745708059_8388904.jpg\",\n \"alt\": \"美国罪恶第1季第11集\"\n }\n }), _vm._v(\" \"), _c('span', {\n staticClass: \"ico-player\"\n })]), _vm._v(\" \"), _c('div', {\n staticClass: \"tv-list-con\"\n }, [_c('p', {\n staticClass: \"txt-update\"\n }, [_vm._v(\"更新至11集\")]), _vm._v(\" \"), _c('p', {\n staticClass: \"tv-name\"\n }, [_vm._v(\"美国罪恶第1季第11集\")])])]), _vm._v(\" \"), _c('li', {}, [_c('a', {\n staticClass: \"pic\",\n attrs: {\n \"target\": \"_blank\",\n \"href\": \"http://tv.sohu.com/20170321/n484142953.shtml\"\n }\n }, [_c('img', {\n attrs: {\n \"src\": \"http://photocdn.sohu.com/20170310/vrsa_hor9313037.jpg\",\n \"alt\": \"罪第1季第10集\"\n }\n }), _vm._v(\" \"), _c('span', {\n staticClass: \"ico-player\"\n })]), _vm._v(\" \"), _c('div', {\n staticClass: \"tv-list-con\"\n }, [_c('p', {\n staticClass: \"txt-update\"\n }, [_vm._v(\"更新至10集\")]), _vm._v(\" \"), _c('p', {\n staticClass: \"tv-name\"\n }, [_vm._v(\"罪第1季第10集\")])])])])])])])\n}]}\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/11.64f212a22e288139402c.js","var Component = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n null,\n /* template */\n require(\"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-2c2fef74\\\",\\\"hasScoped\\\":false}!../../node_modules/vue-loader/lib/selector?type=template&index=0!./StSeriesSohu.vue\"),\n /* styles */\n null,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./demo/components/StSeriesSohu.vue\n// module id = 39\n// module chunks = 0 1 2 3 11","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _vm._m(0)\n},staticRenderFns: [function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n staticClass: \"module-box\"\n }, [_c('div', {\n staticClass: \"title\"\n }, [_c('h3', [_vm._v(\"热门美剧\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"tit-box\"\n }, [_c('a', {\n staticClass: \"link-com\",\n attrs: {\n \"href\": \"http://tv.sohu.com/drama/us/\",\n \"target\": \"_blank\"\n }\n }, [_vm._v(\"\\n 更多\\n \"), _c('span', {\n staticClass: \"text-arrow\"\n }, [_vm._v(\">\")])])])]), _vm._v(\" \"), _c('div', {\n staticClass: \"module-main\"\n }, [_c('div', {\n staticClass: \"tv-list\"\n }, [_c('ul', [_c('li', {\n staticClass: \"big\"\n }, [_c('a', {\n staticClass: \"pic\",\n attrs: {\n \"target\": \"_blank\",\n \"href\": \"http://tv.sohu.com/20161222/n476690521.shtml\"\n }\n }, [_c('img', {\n attrs: {\n \"src\": \"http://photocdn.sohu.com/20161221/vrsa_hor9271114.jpg\",\n \"alt\": \"隔离死城第1季第13集\"\n }\n }), _vm._v(\" \"), _c('span', {\n staticClass: \"ico-player\"\n })]), _vm._v(\" \"), _c('div', {\n staticClass: \"tv-list-con\"\n }, [_c('p', {\n staticClass: \"txt-update\"\n }, [_vm._v(\"更新至13集\")]), _vm._v(\" \"), _c('p', {\n staticClass: \"tv-name\"\n }, [_vm._v(\"隔离死城第1季第13集\")])])]), _vm._v(\" \"), _c('li', {}, [_c('a', {\n staticClass: \"pic\",\n attrs: {\n \"target\": \"_blank\",\n \"href\": \"http://tv.sohu.com/20161109/n472747423.shtml\"\n }\n }, [_c('img', {\n attrs: {\n \"src\": \"http://photocdn.sohu.com/20161111/vrsa_hor_1478837546216_9229258.jpg\",\n \"alt\": \"破产姐妹第5季第22集\"\n }\n }), _vm._v(\" \"), _c('span', {\n staticClass: \"ico-player\"\n })]), _vm._v(\" \"), _c('div', {\n staticClass: \"tv-list-con\"\n }, [_c('p', {\n staticClass: \"txt-update\"\n }, [_vm._v(\"更新至22集\")]), _vm._v(\" \"), _c('p', {\n staticClass: \"tv-name\"\n }, [_vm._v(\"破产姐妹第5季第22集\")])])]), _vm._v(\" \"), _c('li', {}, [_c('a', {\n staticClass: \"pic\",\n attrs: {\n \"target\": \"_blank\",\n \"href\": \"http://tv.sohu.com/20170319/n483857612.shtml\"\n }\n }, [_c('img', {\n attrs: {\n \"src\": \"http://photocdn.sohu.com/20170310/vrsa_hor_1489115711827_9281609.jpg\",\n \"alt\": \"胡迪尼与道尔第1季第10集\"\n }\n }), _vm._v(\" \"), _c('span', {\n staticClass: \"ico-player\"\n })]), _vm._v(\" \"), _c('div', {\n staticClass: \"tv-list-con\"\n }, [_c('p', {\n staticClass: \"txt-update\"\n }, [_vm._v(\"更新至10集\")]), _vm._v(\" \"), _c('p', {\n staticClass: \"tv-name\"\n }, [_vm._v(\"胡迪尼与道尔第1季第10集\")])])]), _vm._v(\" \"), _c('li', {}, [_c('a', {\n staticClass: \"pic\",\n attrs: {\n \"target\": \"_blank\",\n \"href\": \"http://tv.sohu.com/20170317/n483733204.shtml\"\n }\n }, [_c('img', {\n attrs: {\n \"src\": \"http://photocdn.sohu.com/20170310/vrsa_hor9313039.jpg\",\n \"alt\": \"盘中兽第1季第10集\"\n }\n }), _vm._v(\" \"), _c('span', {\n staticClass: \"ico-player\"\n })]), _vm._v(\" \"), _c('div', {\n staticClass: \"tv-list-con\"\n }, [_c('p', {\n staticClass: \"txt-update\"\n }, [_vm._v(\"更新至10集\")]), _vm._v(\" \"), _c('p', {\n staticClass: \"tv-name\"\n }, [_vm._v(\"盘中兽第1季第10集\")])])]), _vm._v(\" \"), _c('li', {}, [_c('a', {\n staticClass: \"pic\",\n attrs: {\n \"target\": \"_blank\",\n \"href\": \"http://tv.sohu.com/20170121/n479313300.shtml\"\n }\n }, [_c('img', {\n attrs: {\n \"src\": \"http://photocdn.sohu.com/20170117/vrsa_hor9291436.jpg\",\n \"alt\": \"亿万富翁第1季第12集\"\n }\n }), _vm._v(\" \"), _c('span', {\n staticClass: \"ico-player\"\n })]), _vm._v(\" \"), _c('div', {\n staticClass: \"tv-list-con\"\n }, [_c('p', {\n staticClass: \"txt-update\"\n }, [_vm._v(\"更新至12集\")]), _vm._v(\" \"), _c('p', {\n staticClass: \"tv-name\"\n }, [_vm._v(\"亿万富翁第1季第12集\")])])]), _vm._v(\" \"), _c('li', {}, [_c('a', {\n staticClass: \"pic\",\n attrs: {\n \"target\": \"_blank\",\n \"href\": \"http://tv.sohu.com/20170131/n479749763.shtml\"\n }\n }, [_c('img', {\n attrs: {\n \"src\": \"http://photocdn.sohu.com/20161226/vrsa_hor_1482745708059_8388904.jpg\",\n \"alt\": \"美国罪恶第1季第11集\"\n }\n }), _vm._v(\" \"), _c('span', {\n staticClass: \"ico-player\"\n })]), _vm._v(\" \"), _c('div', {\n staticClass: \"tv-list-con\"\n }, [_c('p', {\n staticClass: \"txt-update\"\n }, [_vm._v(\"更新至11集\")]), _vm._v(\" \"), _c('p', {\n staticClass: \"tv-name\"\n }, [_vm._v(\"美国罪恶第1季第11集\")])])]), _vm._v(\" \"), _c('li', {}, [_c('a', {\n staticClass: \"pic\",\n attrs: {\n \"target\": \"_blank\",\n \"href\": \"http://tv.sohu.com/20170321/n484142953.shtml\"\n }\n }, [_c('img', {\n attrs: {\n \"src\": \"http://photocdn.sohu.com/20170310/vrsa_hor9313037.jpg\",\n \"alt\": \"罪第1季第10集\"\n }\n }), _vm._v(\" \"), _c('span', {\n staticClass: \"ico-player\"\n })]), _vm._v(\" \"), _c('div', {\n staticClass: \"tv-list-con\"\n }, [_c('p', {\n staticClass: \"txt-update\"\n }, [_vm._v(\"更新至10集\")]), _vm._v(\" \"), _c('p', {\n staticClass: \"tv-name\"\n }, [_vm._v(\"罪第1季第10集\")])])])])])])])\n}]}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-2c2fef74\",\"hasScoped\":false}!./~/vue-loader/lib/selector.js?type=template&index=0!./demo/components/StSeriesSohu.vue\n// module id = 41\n// module chunks = 0 1 2 3 11"],"sourceRoot":""} -------------------------------------------------------------------------------- /demo/dist/static/js/manifest.08b3988500ea166cfe66.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///static/js/manifest.08b3988500ea166cfe66.js","webpack:///webpack/bootstrap 2028da379009c9d265e4"],"names":["modules","__webpack_require__","moduleId","installedModules","exports","module","i","l","call","parentJsonpFunction","window","chunkIds","moreModules","executeModules","chunkId","result","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","shift","s","13","e","onScriptComplete","script","onerror","onload","clearTimeout","timeout","chunk","Error","undefined","installedChunkData","Promise","resolve","promise","reject","head","document","getElementsByTagName","createElement","type","charset","async","nc","setAttribute","src","p","0","1","2","3","4","5","6","7","8","9","10","11","12","setTimeout","appendChild","m","c","value","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","oe","err","console","error"],"mappings":"CAAS,SAAUA,GCuCnB,QAAAC,GAAAC,GAGA,GAAAC,EAAAD,GACA,MAAAC,GAAAD,GAAAE,OAGA,IAAAC,GAAAF,EAAAD,IACAI,EAAAJ,EACAK,GAAA,EACAH,WAUA,OANAJ,GAAAE,GAAAM,KAAAH,EAAAD,QAAAC,IAAAD,QAAAH,GAGAI,EAAAE,GAAA,EAGAF,EAAAD,QA1DA,GAAAK,GAAAC,OAAA,YACAA,QAAA,sBAAAC,EAAAC,EAAAC,GAIA,IADA,GAAAX,GAAAY,EAAAC,EAAAT,EAAA,EAAAU,KACQV,EAAAK,EAAAM,OAAoBX,IAC5BQ,EAAAH,EAAAL,GACAY,EAAAJ,IACAE,EAAAG,KAAAD,EAAAJ,GAAA,IAEAI,EAAAJ,GAAA,CAEA,KAAAZ,IAAAU,GACAQ,OAAAC,UAAAC,eAAAd,KAAAI,EAAAV,KACAF,EAAAE,GAAAU,EAAAV,GAIA,KADAO,KAAAE,EAAAC,EAAAC,GACAG,EAAAC,QACAD,EAAAO,SAEA,IAAAV,EACA,IAAAP,EAAA,EAAYA,EAAAO,EAAAI,OAA2BX,IACvCS,EAAAd,IAAAuB,EAAAX,EAAAP,GAGA,OAAAS,GAIA,IAAAZ,MAGAe,GACAO,GAAA,EA6BAxB,GAAAyB,EAAA,SAAAZ,GA+BA,QAAAa,KAEAC,EAAAC,QAAAD,EAAAE,OAAA,KACAC,aAAAC,EACA,IAAAC,GAAAf,EAAAJ,EACA,KAAAmB,IACAA,GACAA,EAAA,MAAAC,OAAA,iBAAApB,EAAA,aAEAI,EAAAJ,OAAAqB,IAvCA,GAAAC,GAAAlB,EAAAJ,EACA,QAAAsB,EACA,UAAAC,SAAA,SAAAC,GAA0CA,KAI1C,IAAAF,EACA,MAAAA,GAAA,EAIA,IAAAG,GAAA,GAAAF,SAAA,SAAAC,EAAAE,GACAJ,EAAAlB,EAAAJ,IAAAwB,EAAAE,IAEAJ,GAAA,GAAAG,CAGA,IAAAE,GAAAC,SAAAC,qBAAA,WACAf,EAAAc,SAAAE,cAAA,SACAhB,GAAAiB,KAAA,kBACAjB,EAAAkB,QAAA,QACAlB,EAAAmB,OAAA,EACAnB,EAAAI,QAAA,KAEA/B,EAAA+C,IACApB,EAAAqB,aAAA,QAAAhD,EAAA+C,IAEApB,EAAAsB,IAAAjD,EAAAkD,EAAA,aAAArC,EAAA,KAAwEsC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,uBAAAC,EAAA,uBAAAC,GAAA,uBAAAC,GAAA,uBAAAC,GAAA,wBAAkWlD,GAAA,KAC1a,IAAAkB,GAAAiC,WAAAtC,EAAA,KAgBA,OAfAC,GAAAC,QAAAD,EAAAE,OAAAH,EAaAc,EAAAyB,YAAAtC,GAEAW,GAIAtC,EAAAkE,EAAAnE,EAGAC,EAAAmE,EAAAjE,EAGAF,EAAAK,EAAA,SAAA+D,GAA2C,MAAAA,IAG3CpE,EAAAqE,EAAA,SAAAlE,EAAAmE,EAAAC,GACAvE,EAAAwE,EAAArE,EAAAmE,IACAnD,OAAAsD,eAAAtE,EAAAmE,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMAvE,EAAA6E,EAAA,SAAAzE,GACA,GAAAmE,GAAAnE,KAAA0E,WACA,WAA2B,MAAA1E,GAAA,SAC3B,WAAiC,MAAAA,GAEjC,OADAJ,GAAAqE,EAAAE,EAAA,IAAAA,GACAA,GAIAvE,EAAAwE,EAAA,SAAAO,EAAAC,GAAsD,MAAA7D,QAAAC,UAAAC,eAAAd,KAAAwE,EAAAC,IAGtDhF,EAAAkD,EAAA,KAGAlD,EAAAiF,GAAA,SAAAC,GAA8D,KAApBC,SAAAC,MAAAF,GAAoBA","file":"static/js/manifest.08b3988500ea166cfe66.js","sourcesContent":["/******/ (function(modules) { // webpackBootstrap\n/******/ \t// install a JSONP callback for chunk loading\n/******/ \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n/******/ \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n/******/ \t\t// add \"moreModules\" to the modules object,\n/******/ \t\t// then flag all \"chunkIds\" as loaded and fire callback\n/******/ \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n/******/ \t\tfor(;i < chunkIds.length; i++) {\n/******/ \t\t\tchunkId = chunkIds[i];\n/******/ \t\t\tif(installedChunks[chunkId]) {\n/******/ \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n/******/ \t\t\t}\n/******/ \t\t\tinstalledChunks[chunkId] = 0;\n/******/ \t\t}\n/******/ \t\tfor(moduleId in moreModules) {\n/******/ \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n/******/ \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n/******/ \t\t\t}\n/******/ \t\t}\n/******/ \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n/******/ \t\twhile(resolves.length) {\n/******/ \t\t\tresolves.shift()();\n/******/ \t\t}\n/******/ \t\tif(executeModules) {\n/******/ \t\t\tfor(i=0; i < executeModules.length; i++) {\n/******/ \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n/******/ \t\t\t}\n/******/ \t\t}\n/******/ \t\treturn result;\n/******/ \t};\n/******/\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// objects to store loaded and loading chunks\n/******/ \tvar installedChunks = {\n/******/ \t\t13: 0\n/******/ \t};\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/******/ \t// This file contains only the entry chunk.\n/******/ \t// The chunk loading function for additional chunks\n/******/ \t__webpack_require__.e = function requireEnsure(chunkId) {\n/******/ \t\tvar installedChunkData = installedChunks[chunkId];\n/******/ \t\tif(installedChunkData === 0) {\n/******/ \t\t\treturn new Promise(function(resolve) { resolve(); });\n/******/ \t\t}\n/******/\n/******/ \t\t// a Promise means \"currently loading\".\n/******/ \t\tif(installedChunkData) {\n/******/ \t\t\treturn installedChunkData[2];\n/******/ \t\t}\n/******/\n/******/ \t\t// setup Promise in chunk cache\n/******/ \t\tvar promise = new Promise(function(resolve, reject) {\n/******/ \t\t\tinstalledChunkData = installedChunks[chunkId] = [resolve, reject];\n/******/ \t\t});\n/******/ \t\tinstalledChunkData[2] = promise;\n/******/\n/******/ \t\t// start chunk loading\n/******/ \t\tvar head = document.getElementsByTagName('head')[0];\n/******/ \t\tvar script = document.createElement('script');\n/******/ \t\tscript.type = 'text/javascript';\n/******/ \t\tscript.charset = 'utf-8';\n/******/ \t\tscript.async = true;\n/******/ \t\tscript.timeout = 120000;\n/******/\n/******/ \t\tif (__webpack_require__.nc) {\n/******/ \t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n/******/ \t\t}\n/******/ \t\tscript.src = __webpack_require__.p + \"static/js/\" + chunkId + \".\" + {\"0\":\"7cd4dfcabe3d51ca9d62\",\"1\":\"f053cfa12a78e2faf66c\",\"2\":\"ea8bda9f93a66c74819c\",\"3\":\"a698b4935e1b3bcb0e13\",\"4\":\"5d350686f5df698f9965\",\"5\":\"ea4391f15177dc336534\",\"6\":\"26d28d9a8b22b3019f9c\",\"7\":\"a2952e81e78f5c36180d\",\"8\":\"e0b5e122964ec5e19764\",\"9\":\"e3b86fd5919f6dbaae27\",\"10\":\"4d7c06cd652f5e36ccae\",\"11\":\"64f212a22e288139402c\",\"12\":\"dfa0e2443a587c28ecd2\"}[chunkId] + \".js\";\n/******/ \t\tvar timeout = setTimeout(onScriptComplete, 120000);\n/******/ \t\tscript.onerror = script.onload = onScriptComplete;\n/******/ \t\tfunction onScriptComplete() {\n/******/ \t\t\t// avoid mem leaks in IE.\n/******/ \t\t\tscript.onerror = script.onload = null;\n/******/ \t\t\tclearTimeout(timeout);\n/******/ \t\t\tvar chunk = installedChunks[chunkId];\n/******/ \t\t\tif(chunk !== 0) {\n/******/ \t\t\t\tif(chunk) {\n/******/ \t\t\t\t\tchunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));\n/******/ \t\t\t\t}\n/******/ \t\t\t\tinstalledChunks[chunkId] = undefined;\n/******/ \t\t\t}\n/******/ \t\t};\n/******/ \t\thead.appendChild(script);\n/******/\n/******/ \t\treturn promise;\n/******/ \t};\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// identity function for calling harmony imports with the correct context\n/******/ \t__webpack_require__.i = function(value) { return value; };\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 = \"./\";\n/******/\n/******/ \t// on error function for async loading\n/******/ \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n/******/ })\n/************************************************************************/\n/******/ ([]);\n\n\n// WEBPACK FOOTER //\n// static/js/manifest.08b3988500ea166cfe66.js"," \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t13: 0\n \t};\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 \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId) {\n \t\tvar installedChunkData = installedChunks[chunkId];\n \t\tif(installedChunkData === 0) {\n \t\t\treturn new Promise(function(resolve) { resolve(); });\n \t\t}\n\n \t\t// a Promise means \"currently loading\".\n \t\tif(installedChunkData) {\n \t\t\treturn installedChunkData[2];\n \t\t}\n\n \t\t// setup Promise in chunk cache\n \t\tvar promise = new Promise(function(resolve, reject) {\n \t\t\tinstalledChunkData = installedChunks[chunkId] = [resolve, reject];\n \t\t});\n \t\tinstalledChunkData[2] = promise;\n\n \t\t// start chunk loading\n \t\tvar head = document.getElementsByTagName('head')[0];\n \t\tvar script = document.createElement('script');\n \t\tscript.type = 'text/javascript';\n \t\tscript.charset = 'utf-8';\n \t\tscript.async = true;\n \t\tscript.timeout = 120000;\n\n \t\tif (__webpack_require__.nc) {\n \t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n \t\t}\n \t\tscript.src = __webpack_require__.p + \"static/js/\" + chunkId + \".\" + {\"0\":\"7cd4dfcabe3d51ca9d62\",\"1\":\"f053cfa12a78e2faf66c\",\"2\":\"ea8bda9f93a66c74819c\",\"3\":\"a698b4935e1b3bcb0e13\",\"4\":\"5d350686f5df698f9965\",\"5\":\"ea4391f15177dc336534\",\"6\":\"26d28d9a8b22b3019f9c\",\"7\":\"a2952e81e78f5c36180d\",\"8\":\"e0b5e122964ec5e19764\",\"9\":\"e3b86fd5919f6dbaae27\",\"10\":\"4d7c06cd652f5e36ccae\",\"11\":\"64f212a22e288139402c\",\"12\":\"dfa0e2443a587c28ecd2\"}[chunkId] + \".js\";\n \t\tvar timeout = setTimeout(onScriptComplete, 120000);\n \t\tscript.onerror = script.onload = onScriptComplete;\n \t\tfunction onScriptComplete() {\n \t\t\t// avoid mem leaks in IE.\n \t\t\tscript.onerror = script.onload = null;\n \t\t\tclearTimeout(timeout);\n \t\t\tvar chunk = installedChunks[chunkId];\n \t\t\tif(chunk !== 0) {\n \t\t\t\tif(chunk) {\n \t\t\t\t\tchunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));\n \t\t\t\t}\n \t\t\t\tinstalledChunks[chunkId] = undefined;\n \t\t\t}\n \t\t};\n \t\thead.appendChild(script);\n\n \t\treturn promise;\n \t};\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// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\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 = \"./\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 2028da379009c9d265e4"],"sourceRoot":""} -------------------------------------------------------------------------------- /demo/dist/static/js/9.e3b86fd5919f6dbaae27.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([9],{30:function(n,t,i){t=n.exports=i(18)(!0),t.push([n.i,'.mobox .module-main{display:flex;height:320px}.mobox .mo-main{margin:0 12px 0 0;width:654px}.mo-main-s li,.mo-rank,.mobox .mid-part{position:relative;width:var(--widthList)}.mobox .mid-part{overflow:hidden}.mo-main-b{position:relative;margin:0 0 12px;height:210px}.mo-main-s ul{display:flex}.mo-main-s li{overflow:hidden;margin:0 12px 0 0;height:98px}.mo-main-s li:last-child{margin:0}.mid-part:before,.mo-main-b:before,.mo-main-s li:before{position:absolute;bottom:-1px;left:0;z-index:1;width:100%;height:100%;background:linear-gradient(transparent,rgba(0,0,0,.5));content:"";pointer-events:none}.mobox .module-main .lab-red{background:#ff6082}.mobox .module-main .lab-yel{background:#ffa63d}.mobox .module-main .lab-blue{background:var(--colorLight)}.mo-rank{margin:0 0 0 12px;background:#fff}.mo-rank h4{position:absolute;margin-top:-36px;font-size:14px;line-height:36px}.mo-rank li{position:relative;overflow:hidden;height:36px;color:#000;cursor:pointer}.mo-rank li .pic{display:none}.mo-rank li a{height:100%}.mo-rank .show .pic{display:block;width:var(--widthList)}.mo-rank .show .pic:before{position:absolute;bottom:-1px;left:0;z-index:1;width:100%;height:100%;background:linear-gradient(0deg,transparent,rgba(0,0,0,.5));content:"";pointer-events:none}.mo-rank .show{height:104px}.mo-rank .num{display:inline-block;margin:0 0 0 5px;width:24px;height:24px;text-align:center;line-height:24px}.mo-rank .name{display:inline-block;overflow:hidden;width:calc(100% - 50px);text-overflow:ellipsis;white-space:nowrap}.mo-rank .info{display:flex;overflow:hidden;font-size:14px;line-height:36px;align-items:center;pointer-events:none}.mo-rank .show .info{position:absolute;top:0;left:0;z-index:2;width:100%;color:#fff}.mo-rank .show .num{margin:0 6px 0 10px;background:var(--colorLight);color:#fff}.mo-main-b:before,.mo-main-s li:before{background:linear-gradient(transparent,rgba(0,0,0,.65))}@media only screen and (min-height:671px) and (max-height:795px),only screen and (min-width:1041px) and (max-width:1215px){.mobox .mid-part{display:none}.mobox .mo-main{width:738px}.mo-rank .show{height:116px}.mo-main-b{height:237px}.mo-main-s li{height:113px}.mobox .module-main{height:362px}.mo-rank{margin:0}.mo-rank li{height:41px}}@media only screen and (min-height:601px) and (max-height:670px),only screen and (min-width:931px) and (max-width:1040px){.mobox .mid-part{display:none}.mobox .mo-main{width:654px}.mo-rank .show{height:104px}.mo-main-b{height:210px}.mo-main-s li{height:98px}.mobox .module-main{height:320px}.mo-rank{margin:0}.mo-rank li{height:36px}}@media only screen and (max-height:600px),only screen and (max-width:930px){.mobox .mid-part{display:none}.mobox .mo-main{width:595px}.mo-rank .show{height:94px}.mo-main-b{height:190px}.mo-main-s li{height:90px}.mobox .module-main{height:292px}.mo-rank{margin:0}.mo-rank li{height:33px}}',"",{version:3,sources:["/Users/benzhao/Sites/@xunlei/vue-lazy-component/demo/components/StMoJin.vue"],names:[],mappings:"AACA,oBACE,aAAc,AACd,YAAa,CACd,AACD,gBACE,kBAAmB,AACnB,WAAY,CACb,AACD,wCAGE,kBAAmB,AACnB,sBAAuB,CACxB,AACD,iBACE,eAAgB,CACjB,AACD,WACE,kBAAmB,AACnB,gBAAiB,AACjB,YAAa,CACd,AACD,cACE,YAAa,CACd,AACD,cACE,gBAAiB,AACjB,kBAAmB,AACnB,WAAY,CACb,AACD,yBACE,QAAS,CACV,AACD,wDAGE,kBAAmB,AACnB,YAAa,AACb,OAAQ,AACR,UAAW,AACX,WAAY,AACZ,YAAa,AACb,uDAAiE,AACjE,WAAY,AACZ,mBAAoB,CACrB,AACD,6BACE,kBAAmB,CACpB,AACD,6BACE,kBAAmB,CACpB,AACD,8BACE,4BAA6B,CAC9B,AACD,SACE,kBAAmB,AACnB,eAAgB,CACjB,AACD,YACE,kBAAmB,AACnB,iBAAkB,AAClB,eAAgB,AAChB,gBAAiB,CAClB,AACD,YACE,kBAAmB,AACnB,gBAAiB,AACjB,YAAa,AACb,WAAY,AACZ,cAAe,CAChB,AACD,iBACE,YAAa,CACd,AACD,cACE,WAAY,CACb,AACD,oBACE,cAAe,AACf,sBAAuB,CACxB,AACD,2BACE,kBAAmB,AACnB,YAAa,AACb,OAAQ,AACR,UAAW,AACX,WAAY,AACZ,YAAa,AACb,4DAAyE,AACzE,WAAY,AACZ,mBAAoB,CACrB,AACD,eACE,YAAa,CACd,AACD,cACE,qBAAsB,AACtB,iBAAkB,AAClB,WAAY,AACZ,YAAa,AACb,kBAAmB,AACnB,gBAAiB,CAClB,AACD,eACE,qBAAsB,AACtB,gBAAiB,AACjB,wBAAyB,AACzB,uBAAwB,AACxB,kBAAmB,CACpB,AACD,eACE,aAAc,AACd,gBAAiB,AACjB,eAAgB,AAChB,iBAAkB,AAClB,mBAAoB,AACpB,mBAAoB,CACrB,AACD,qBACE,kBAAmB,AACnB,MAAO,AACP,OAAQ,AACR,UAAW,AACX,WAAY,AACZ,UAAW,CACZ,AACD,oBACE,oBAAqB,AACrB,6BAA8B,AAC9B,UAAW,CACZ,AACD,uCAEE,uDAAiE,CAClE,AACD,2HAEA,iBACI,YAAa,CAChB,AACD,gBACI,WAAY,CACf,AACD,eACI,YAAa,CAChB,AACD,WACI,YAAa,CAChB,AACD,cACI,YAAa,CAChB,AACD,oBACI,YAAa,CAChB,AACD,SACI,QAAS,CACZ,AACD,YACI,WAAY,CACf,CACA,AACD,0HAEA,iBACI,YAAa,CAChB,AACD,gBACI,WAAY,CACf,AACD,eACI,YAAa,CAChB,AACD,WACI,YAAa,CAChB,AACD,cACI,WAAY,CACf,AACD,oBACI,YAAa,CAChB,AACD,SACI,QAAS,CACZ,AACD,YACI,WAAY,CACf,CACA,AACD,4EAEA,iBACI,YAAa,CAChB,AACD,gBACI,WAAY,CACf,AACD,eACI,WAAY,CACf,AACD,WACI,YAAa,CAChB,AACD,cACI,WAAY,CACf,AACD,oBACI,YAAa,CAChB,AACD,SACI,QAAS,CACZ,AACD,YACI,WAAY,CACf,CACA",file:"StMoJin.vue",sourcesContent:["\n.mobox .module-main {\n display: flex;\n height: 320px\n}\n.mobox .mo-main {\n margin: 0 12px 0 0;\n width: 654px\n}\n.mo-main-s li,\n.mo-rank,\n.mobox .mid-part {\n position: relative;\n width: var(--widthList)\n}\n.mobox .mid-part {\n overflow: hidden\n}\n.mo-main-b {\n position: relative;\n margin: 0 0 12px;\n height: 210px\n}\n.mo-main-s ul {\n display: flex\n}\n.mo-main-s li {\n overflow: hidden;\n margin: 0 12px 0 0;\n height: 98px\n}\n.mo-main-s li:nth-last-child(1) {\n margin: 0\n}\n.mid-part:before,\n.mo-main-b:before,\n.mo-main-s li:before {\n position: absolute;\n bottom: -1px;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));\n content: '';\n pointer-events: none\n}\n.mobox .module-main .lab-red {\n background: #ff6082\n}\n.mobox .module-main .lab-yel {\n background: #ffa63d\n}\n.mobox .module-main .lab-blue {\n background: var(--colorLight)\n}\n.mo-rank {\n margin: 0 0 0 12px;\n background: #fff\n}\n.mo-rank h4 {\n position: absolute;\n margin-top: -36px;\n font-size: 14px;\n line-height: 36px\n}\n.mo-rank li {\n position: relative;\n overflow: hidden;\n height: 36px;\n color: #000;\n cursor: pointer\n}\n.mo-rank li .pic {\n display: none\n}\n.mo-rank li a {\n height: 100%\n}\n.mo-rank .show .pic {\n display: block;\n width: var(--widthList)\n}\n.mo-rank .show .pic:before {\n position: absolute;\n bottom: -1px;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));\n content: '';\n pointer-events: none\n}\n.mo-rank .show {\n height: 104px\n}\n.mo-rank .num {\n display: inline-block;\n margin: 0 0 0 5px;\n width: 24px;\n height: 24px;\n text-align: center;\n line-height: 24px\n}\n.mo-rank .name {\n display: inline-block;\n overflow: hidden;\n width: calc(100% - 50px);\n text-overflow: ellipsis;\n white-space: nowrap\n}\n.mo-rank .info {\n display: flex;\n overflow: hidden;\n font-size: 14px;\n line-height: 36px;\n align-items: center;\n pointer-events: none\n}\n.mo-rank .show .info {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n width: 100%;\n color: #fff\n}\n.mo-rank .show .num {\n margin: 0 6px 0 10px;\n background: var(--colorLight);\n color: #fff\n}\n.mo-main-b:before,\n.mo-main-s li:before {\n background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .65))\n}\n@media only screen and (min-width:1041px) and (max-width:1215px),\nonly screen and (min-height:671px) and (max-height:795px) {\n.mobox .mid-part {\n display: none\n}\n.mobox .mo-main {\n width: 738px\n}\n.mo-rank .show {\n height: 116px\n}\n.mo-main-b {\n height: 237px\n}\n.mo-main-s li {\n height: 113px\n}\n.mobox .module-main {\n height: 362px\n}\n.mo-rank {\n margin: 0\n}\n.mo-rank li {\n height: 41px\n}\n}\n@media only screen and (min-width:931px) and (max-width:1040px),\nonly screen and (min-height:601px) and (max-height:670px) {\n.mobox .mid-part {\n display: none\n}\n.mobox .mo-main {\n width: 654px\n}\n.mo-rank .show {\n height: 104px\n}\n.mo-main-b {\n height: 210px\n}\n.mo-main-s li {\n height: 98px\n}\n.mobox .module-main {\n height: 320px\n}\n.mo-rank {\n margin: 0\n}\n.mo-rank li {\n height: 36px\n}\n}\n@media only screen and (max-width:930px),\nonly screen and (max-height:600px) {\n.mobox .mid-part {\n display: none\n}\n.mobox .mo-main {\n width: 595px\n}\n.mo-rank .show {\n height: 94px\n}\n.mo-main-b {\n height: 190px\n}\n.mo-main-s li {\n height: 90px\n}\n.mobox .module-main {\n height: 292px\n}\n.mo-rank {\n margin: 0\n}\n.mo-rank li {\n height: 33px\n}\n}\n"],sourceRoot:""}])},33:function(n,t,i){var a=i(30);"string"==typeof a&&(a=[[n.i,a,""]]),a.locals&&(n.exports=a.locals);i(19)("1e19358f",a,!0)},36:function(n,t,i){function a(n){i(33)}var e=i(4)(null,i(43),a,null,null);n.exports=e.exports},43:function(n,t){n.exports={render:function(){var n=this,t=n.$createElement;n._self._c;return n._m(0)},staticRenderFns:[function(){var n=this,t=n.$createElement,i=n._self._c||t;return i("div",{staticClass:"module-box mobox",staticStyle:{overflow:"hidden"},attrs:{id:"v_mo_xulei_p3422"}},[i("div",{staticClass:"title"},[i("h3",[n._v("MO金社")]),n._v(" "),i("div",{staticClass:"tit-box"},[i("a",{staticClass:"link-com link-detail-show",attrs:{bannerid:"more-9933-tag",href:"http://www.mogins.com/web/index.html",target:"_blank"}},[n._v("更多\n "),i("span",{staticClass:"text-arrow"},[n._v(">")])])])]),n._v(" "),i("div",{staticClass:"module-main"},[i("div",{staticClass:"mo-main"},[i("div",{staticClass:"mo-main-b link-detail-show",attrs:{bannerid:"906"}},[i("a",{staticClass:"pic",staticStyle:{height:"100%"},attrs:{target:"_blank",href:"http://www.mogins.com/web/news.html?choiceId=2555&subType=11"}},[i("img",{attrs:{src:"http://img.xunleifintech.com/upload/201709071732580191.jpg",alt:""}}),n._v(" "),i("span",{staticClass:"label lab-blue"},[n._v("头条")])]),n._v(" "),i("div",{staticClass:"list-con"},[i("a",{staticClass:"list-name",staticStyle:{"font-size":"16px"},attrs:{target:"_blank",href:"http://www.mogins.com/web/news.html?choiceId=2555&subType=11"}},[n._v("腾讯、网易称霸的游戏行业，真的谁都没机会成为第三吗？！")]),n._v(" "),i("a",{staticClass:"text-des",staticStyle:{"white-space":"nowrap",overflow:"hidden",display:"block","text-overflow":"ellipsis"},attrs:{href:"http://www.mogins.com/web/news.html?choiceId=2555&subType=11",target:"_blank"}},[n._v("这个行业里老三的竞赛，并不简单，除了《王者荣耀》《阴阳师》，你们还玩什么？")])])]),n._v(" "),i("div",{staticClass:"mo-main-s"},[i("ul",[i("li",{staticClass:"link-detail-show",attrs:{bannerid:"899"}},[i("a",{staticClass:"pic",staticStyle:{height:"100%"},attrs:{target:"_blank",href:"http://www.mogins.com/web/news.html?choiceId=2548&subType=11"}},[i("img",{attrs:{src:"http://img.xunleifintech.com/upload/20170907175817064.jpg",alt:""}}),n._v(" "),i("span",{staticClass:"label lab-red"},[n._v("HOT")])]),n._v(" "),i("div",{staticClass:"list-con"},[i("a",{staticClass:"list-name",staticStyle:{"font-size":"16px"},attrs:{target:"_blank",href:"http://www.mogins.com/web/news.html?choiceId=2548&subType=11"}},[n._v("今日白露 | 露从今夜白，月是故乡明")])])]),n._v(" "),i("li",{staticClass:"link-detail-show",attrs:{bannerid:"905"}},[i("a",{staticClass:"pic",staticStyle:{height:"100%"},attrs:{target:"_blank",href:"http://www.mogins.com/web/news.html?choiceId=2554&subType=1"}},[i("img",{attrs:{src:"http://img.xunleifintech.com/upload/201709071721246621.jpg",alt:""}}),n._v(" "),i("span",{staticClass:"label "},[n._v("精华")])]),n._v(" "),i("div",{staticClass:"list-con"},[i("a",{staticClass:"list-name",staticStyle:{"font-size":"16px"},attrs:{target:"_blank",href:"http://www.mogins.com/web/news.html?choiceId=2554&subType=1"}},[n._v("华谊：老了，还花心")])])]),n._v(" "),i("li",{staticClass:"link-detail-show",attrs:{bannerid:"897"}},[i("a",{staticClass:"pic",staticStyle:{height:"100%"},attrs:{target:"_blank",href:"http://www.mogins.com/web/news.html?choiceId=2546&subType=11"}},[i("img",{attrs:{src:"http://img.xunleifintech.com/upload/201709071514223011.jpg",alt:""}}),n._v(" "),i("span",{staticClass:"label lab-yel"},[n._v("深度")])]),n._v(" "),i("div",{staticClass:"list-con"},[i("a",{staticClass:"list-name",staticStyle:{"font-size":"16px"},attrs:{target:"_blank",href:"http://www.mogins.com/web/news.html?choiceId=2546&subType=11"}},[n._v("赌博让人无法自拔的真正原因")])])])])])]),n._v(" "),i("div",{staticClass:"mid-part"},[i("a",{staticClass:"link-detail-show",attrs:{bannerid:"882",target:"_blank",href:"http://www.mogins.com/web/index.html?type=10&id=882"}},[i("img",{attrs:{src:"http://img.xunleifintech.com/upload/201709051716255031.jpg",alt:""}}),n._v(" "),i("span",{staticClass:"label lab-red"},[n._v("HOT")])]),n._v(" "),i("div",{staticClass:"list-con"},[i("a",{staticClass:"list-name",staticStyle:{"font-size":"16px"},attrs:{target:"_blank",href:"http://www.mogins.com/web/index.html?type=10&id=882"}},[n._v("西元")]),n._v(" "),i("a",{staticClass:"text-des",staticStyle:{"white-space":"nowrap",overflow:"hidden",display:"block","text-overflow":"ellipsis"},attrs:{target:"_blank",href:"http://www.mogins.com/web/index.html?type=10&id=882"}},[n._v("一身白衣胜似雪，气质动人的平面模特。")])])]),n._v(" "),i("div",{staticClass:"mo-rank"},[i("h4",[n._v("每日MO金")]),n._v(" "),i("div",{staticClass:"mo-rank-list"},[i("ul",[i("li",{staticClass:"show mo-935435-hove-s link-detail-show",attrs:{bannerid:"904"}},[i("a",{staticClass:"pic",attrs:{target:"_blank",href:"http://www.mogins.com/web/news.html?choiceId=2553&subType=1"}},[i("img",{staticClass:"pic",attrs:{src:"http://img.xunleifintech.com/upload/201709071718083931.jpg",alt:""}})]),n._v(" "),i("div",{staticClass:"info"},[i("span",{staticClass:"num"},[n._v("1")]),n._v(" "),i("span",{staticClass:"name"},[n._v("用裸照换2万块，学学理财吧")])])]),n._v(" "),i("li",{staticClass:" mo-935435-hove-s link-detail-show",attrs:{bannerid:"903"}},[i("a",{staticClass:"pic",attrs:{target:"_blank",href:"http://www.mogins.com/web/news.html?choiceId=2552&subType=11"}},[i("img",{staticClass:"pic",attrs:{src:"http://img.xunleifintech.com/upload/201709071742579521.jpg",alt:""}})]),n._v(" "),i("div",{staticClass:"info"},[i("span",{staticClass:"num"},[n._v("2")]),n._v(" "),i("span",{staticClass:"name"},[n._v("今年网上最蠢的一篇文章出现了")])])]),n._v(" "),i("li",{staticClass:" mo-935435-hove-s link-detail-show",attrs:{bannerid:"902"}},[i("a",{staticClass:"pic",attrs:{target:"_blank",href:"http://www.mogins.com/web/news.html?choiceId=2551&subType=1"}},[i("img",{staticClass:"pic",attrs:{src:"http://img.xunleifintech.com/upload/201709071631492761.jpg",alt:""}})]),n._v(" "),i("div",{staticClass:"info"},[i("span",{staticClass:"num"},[n._v("3")]),n._v(" "),i("span",{staticClass:"name"},[n._v("如何防止被套路到榨干身家？")])])]),n._v(" "),i("li",{staticClass:" mo-935435-hove-s link-detail-show",attrs:{bannerid:"901"}},[i("a",{staticClass:"pic",attrs:{target:"_blank",href:"http://www.mogins.com/web/news.html?choiceId=2550&subType=11"}},[i("img",{staticClass:"pic",attrs:{src:"http://img.xunleifintech.com/upload/201709071755178161.jpg",alt:""}})]),n._v(" "),i("div",{staticClass:"info"},[i("span",{staticClass:"num"},[n._v("4")]),n._v(" "),i("span",{staticClass:"name"},[n._v("被人偷偷爱着真好")])])]),n._v(" "),i("li",{staticClass:" mo-935435-hove-s link-detail-show",attrs:{bannerid:"900"}},[i("a",{staticClass:"pic",attrs:{target:"_blank",href:"http://www.mogins.com/web/news.html?choiceId=2549&subType=2"}},[i("img",{staticClass:"pic",attrs:{src:"http://img.xunleifintech.com/upload/201709071551152091.jpg",alt:""}})]),n._v(" "),i("div",{staticClass:"info"},[i("span",{staticClass:"num"},[n._v("5")]),n._v(" "),i("span",{staticClass:"name"},[n._v("手拿苹果、身穿爱马仕，可没有教养，你依然是穷X")])])]),n._v(" "),i("li",{staticClass:" mo-935435-hove-s link-detail-show",attrs:{bannerid:"898"}},[i("a",{staticClass:"pic",attrs:{target:"_blank",href:"http://www.mogins.com/web/news.html?choiceId=2547&subType=10"}},[i("img",{staticClass:"pic",attrs:{src:"http://img.xunleifintech.com/upload/201709071531349571.jpg",alt:""}})]),n._v(" "),i("div",{staticClass:"info"},[i("span",{staticClass:"num"},[n._v("6")]),n._v(" "),i("span",{staticClass:"name"},[n._v("为什么越来越多人在朋友圈戒掉了情绪？")])])]),n._v(" "),i("li",{staticClass:" mo-935435-hove-s link-detail-show",attrs:{bannerid:"896"}},[i("a",{staticClass:"pic",attrs:{target:"_blank",href:"http://www.mogins.com/web/news.html?choiceId=2545&subType=10"}},[i("img",{staticClass:"pic",attrs:{src:"http://img.xunleifintech.com/upload/201709071509124741.jpg",alt:""}})]),n._v(" "),i("div",{staticClass:"info"},[i("span",{staticClass:"num"},[n._v("7")]),n._v(" "),i("span",{staticClass:"name"},[n._v("许知远为什么是最令人无比尴尬的公知？")])])])])])])])])}]}}}); 2 | //# sourceMappingURL=9.e3b86fd5919f6dbaae27.js.map --------------------------------------------------------------------------------