├── static ├── .gitkeep └── img │ ├── 1-1.jpg │ ├── 1-2.jpg │ ├── 1-3.jpg │ ├── 1-4.jpg │ └── 1-5.jpg ├── .gitattributes ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── .gitignore ├── src ├── assets │ ├── pre.png │ └── next.png ├── package.js ├── main.js ├── components │ └── Slider.vue └── App.vue ├── example ├── static │ ├── img │ │ ├── 1-1.jpg │ │ ├── 1-2.jpg │ │ ├── 1-3.jpg │ │ ├── 1-4.jpg │ │ └── 1-5.jpg │ ├── js │ │ ├── manifest.994bc14ff3cb065d7d98.js │ │ ├── app.bf4f9db526397263df1f.js │ │ ├── manifest.994bc14ff3cb065d7d98.js.map │ │ ├── app.bf4f9db526397263df1f.js.map │ │ └── vendor.68042cd39e700b93b0ae.js │ └── css │ │ ├── app.a8e60999beadddec7080e2e86843423b.css.map │ │ └── app.a8e60999beadddec7080e2e86843423b.css └── index.html ├── .editorconfig ├── .postcssrc.js ├── .npmignore ├── .babelrc ├── index.html ├── webpack.config.js ├── LICENSE ├── package.json ├── README.md └── lib └── index.js /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.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 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | -------------------------------------------------------------------------------- /src/assets/pre.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShanaMaid/vue-image-scroll/HEAD/src/assets/pre.png -------------------------------------------------------------------------------- /static/img/1-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShanaMaid/vue-image-scroll/HEAD/static/img/1-1.jpg -------------------------------------------------------------------------------- /static/img/1-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShanaMaid/vue-image-scroll/HEAD/static/img/1-2.jpg -------------------------------------------------------------------------------- /static/img/1-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShanaMaid/vue-image-scroll/HEAD/static/img/1-3.jpg -------------------------------------------------------------------------------- /static/img/1-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShanaMaid/vue-image-scroll/HEAD/static/img/1-4.jpg -------------------------------------------------------------------------------- /static/img/1-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShanaMaid/vue-image-scroll/HEAD/static/img/1-5.jpg -------------------------------------------------------------------------------- /src/assets/next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShanaMaid/vue-image-scroll/HEAD/src/assets/next.png -------------------------------------------------------------------------------- /src/package.js: -------------------------------------------------------------------------------- 1 | import slider from './components/Slider.vue' 2 | 3 | export default slider 4 | 5 | -------------------------------------------------------------------------------- /example/static/img/1-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShanaMaid/vue-image-scroll/HEAD/example/static/img/1-1.jpg -------------------------------------------------------------------------------- /example/static/img/1-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShanaMaid/vue-image-scroll/HEAD/example/static/img/1-2.jpg -------------------------------------------------------------------------------- /example/static/img/1-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShanaMaid/vue-image-scroll/HEAD/example/static/img/1-3.jpg -------------------------------------------------------------------------------- /example/static/img/1-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShanaMaid/vue-image-scroll/HEAD/example/static/img/1-4.jpg -------------------------------------------------------------------------------- /example/static/img/1-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShanaMaid/vue-image-scroll/HEAD/example/static/img/1-5.jpg -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserlist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .*.swp 2 | .*.swp 3 | ._* 4 | .DS_Store 5 | .git 6 | .hg 7 | .lock-wscript 8 | .svn 9 | .wafpickle-* 10 | CVS 11 | npm-debug.log 12 | build/ 13 | config/ 14 | node_modules/ 15 | example/ 16 | src/ 17 | static/ 18 | index.html 19 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }], 6 | "stage-2" 7 | ], 8 | "plugins": ["transform-runtime"], 9 | "comments": false, 10 | "env": { 11 | "test": { 12 | "presets": ["latest", "stage-2"], 13 | "plugins": [ "istanbul" ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/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 | 6 | Vue.config.productionTip = false 7 | 8 | /* eslint-disable no-new */ 9 | new Vue({ 10 | el: '#app', 11 | template: '', 12 | components: { App } 13 | }) 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-163music-slider 6 | 7 | 8 |
9 | 10 | 11 | 21 | 22 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | vue-163music-slider
-------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | 3 | module.exports = { 4 | entry: './src/package.js', 5 | output: { 6 | path: './lib/', 7 | filename: 'index.js', 8 | library: 'vue-slider-163music', 9 | libraryTarget: 'umd', 10 | umdNamedDefine: true 11 | }, 12 | resolve: { 13 | extensions: ['.png', '.js', '.vue' ] 14 | }, 15 | module: { 16 | loaders: [ 17 | { 18 | test: /\.js$/, 19 | loader: 'babel-loader', 20 | include: __dirname, 21 | exclude: /node_modules/ 22 | }, 23 | { 24 | test: /\.vue$/, 25 | loader: 'vue-loader' 26 | }, 27 | { 28 | test: /\.css$/, 29 | loader: 'style!css' 30 | }, 31 | { 32 | test: /\.png$/, 33 | loader: 'url-loader?limit=8192' 34 | } 35 | ] 36 | }, 37 | plugins: [ 38 | new webpack.optimize.UglifyJsPlugin( { 39 | minimize : true, 40 | sourceMap : false, 41 | mangle: true, 42 | compress: { 43 | warnings: false 44 | } 45 | } ) 46 | ] 47 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Jingyi Zeng 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 | -------------------------------------------------------------------------------- /example/static/js/manifest.994bc14ff3cb065d7d98.js: -------------------------------------------------------------------------------- 1 | !function(e){function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}var n=window.webpackJsonp;window.webpackJsonp=function(t,c,i){for(var u,a,f,s=0,l=[];s", 6 | "main": "./lib/index.js", 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "build": "node build/build.js" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/ShanaMaid/vue-image-scroll" 14 | }, 15 | "dependencies": { 16 | "babel-cli": "^6.23.0", 17 | "vue": "^2.2.1" 18 | }, 19 | "devDependencies": { 20 | "autoprefixer": "^6.7.2", 21 | "babel-core": "^6.22.1", 22 | "babel-loader": "^6.2.10", 23 | "babel-plugin-transform-runtime": "^6.22.0", 24 | "babel-preset-latest": "^6.22.0", 25 | "babel-preset-stage-2": "^6.22.0", 26 | "babel-register": "^6.22.0", 27 | "chalk": "^1.1.3", 28 | "connect-history-api-fallback": "^1.3.0", 29 | "copy-webpack-plugin": "^4.0.1", 30 | "css-loader": "^0.26.1", 31 | "eventsource-polyfill": "^0.9.6", 32 | "express": "^4.14.1", 33 | "extract-text-webpack-plugin": "^2.0.0", 34 | "file-loader": "^0.10.0", 35 | "friendly-errors-webpack-plugin": "^1.1.3", 36 | "function-bind": "^1.1.0", 37 | "html-webpack-plugin": "^2.28.0", 38 | "http-proxy-middleware": "^0.17.3", 39 | "webpack-bundle-analyzer": "^2.2.1", 40 | "semver": "^5.3.0", 41 | "opn": "^4.0.2", 42 | "optimize-css-assets-webpack-plugin": "^1.3.0", 43 | "ora": "^1.1.0", 44 | "rimraf": "^2.6.0", 45 | "url-loader": "^0.5.7", 46 | "vue-loader": "^11.0.0", 47 | "vue-style-loader": "^2.0.0", 48 | "vue-template-compiler": "^2.2.1", 49 | "webpack": "^2.2.1", 50 | "webpack-dev-middleware": "^1.10.0", 51 | "webpack-hot-middleware": "^2.16.1", 52 | "webpack-merge": "^2.6.1" 53 | }, 54 | "engines": { 55 | "node": ">= 4.0.0", 56 | "npm": ">= 3.0.0" 57 | }, 58 | "browserlist": [ 59 | "> 1%", 60 | "last 2 versions", 61 | "not ie <= 8" 62 | ], 63 | "license": "ISC" 64 | } 65 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-image-scroll 2 | [![build](https://img.shields.io/badge/npm-1.0.2-blue.svg)](https://github.com/ShanaMaid/vue-image-scroll) 3 | [![build](https://img.shields.io/npm/l/express.svg)](https://github.com/ShanaMaid/vue-image-scroll) 4 | [![download](https://img.shields.io/npm/dt/vue-image-scroll.svg?style=flat-square)](https://www.npmjs.com/package/vue-image-scroll) 5 | 6 | 7 | [![NPM](https://nodei.co/npm/vue-image-scroll.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-image-scroll/) 8 | 9 | 一个模仿网易云音乐的vue图片滚动插件 10 | 11 | [Live Demos](http://blog.shanamaid.top/vue-image-scroll/example) 12 | 13 | [Documention](http://blog.shanamaid.top/vue-image-scroll/example) 14 | 15 | based on vue 2.0 16 | 17 | ## Install 18 | ``` 19 | npm install vue-image-scroll 20 | ``` 21 | 22 | ### Local 23 | ``` 24 | git clone https://github.com/ShanaMaid/vue-image-scroll.git 25 | 26 | #安装依赖 27 | npm install 28 | 29 | #启动 30 | npm run dev 31 | 32 | ``` 33 | 34 | 35 | ## Usage 36 | ``` 37 | 42 | 43 | 59 | ``` 60 | 61 | 62 | 63 | 64 | ## Update 65 | - finish basics 66 | - image add tagName and tagStyle 67 | 68 | ## Opitions 69 | ### Props 70 | | Props | Type | Default | Description | 71 | |-----------|---------|---------|-------------| 72 | |styleObject| Object | {width:'750',height:'240'}|scroll box style,please use lower camel case, eg: background-color => backgroundColor| 73 | |image | Array | null | imgae source path ,tagName,tagStyle; length >= 3| 74 | |interval | Integer | 2000 | unit: ms, rolling interval | 75 | |imgStyle | Object | null | image style, the same as `styleObject` | 76 | |autoRoll | Boolean | true | `true` or `false` | 77 | |direction | String | left | scroll direction, `left` or `right` | 78 | 79 | 80 | ## To do 81 | - [x] Basics 82 | - [x] add tag for image 83 | 84 | more!! 85 | 86 | ## License 87 | 88 | [MIT](https://github.com/ShanaMaid/vue-image-scroll/blob/master/LICENSE) 89 | -------------------------------------------------------------------------------- /src/components/Slider.vue: -------------------------------------------------------------------------------- 1 | 22 | 100 | 209 | -------------------------------------------------------------------------------- /example/static/css/app.a8e60999beadddec7080e2e86843423b.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack:///src/App.vue","webpack:///webpack:///src/components/Slider.vue"],"names":[],"mappings":"AACA,KACE,8CACA,mCACA,kCACA,kBACA,aAAe,CAEjB,QACE,aACA,yBACA,iEACA,yDACA,gBACA,WACA,mBACA,cAAgB,CAElB,SACE,cACA,WAAa,CAEf,KAEE,uBACA,iBACA,qBACA,mBACA,yBACA,qCACA,oCAGA,oBACA,mEACA,2DACA,mBAAsB,CAExB,gBAfE,oBAAsB,CAoBvB,WAJG,yBAEA,oCACA,+BAAuC,CAE3C,cACE,oBAAsB,CAExB,MACE,gBACA,sBACA,cACA,gBACA,gBAAkB,CAEpB,SACE,aAAe,CAEjB,OACE,UAAa,CAEf,IACE,SAAa,CAEf,MACE,sBACA,4BACA,eACA,aAAe,CAEjB,SACE,kBACA,gBACA,aAAe,CAEjB,UACE,aAAiB,CAEnB,UACE,gBACA,aAAe,CAEjB,MACE,aAAwB,CAE1B,SACE,aAAe,CCpFjB,kBACE,SACA,SAAW,CAEb,yBACI,2BACQ,mBACR,iBAAmB,CAEvB,iFAEI,kBACA,cACA,WACA,YACA,sBACA,YACA,cAAgB,CAEpB,yCACI,OACA,8CAA2C,CAE/C,wCACI,QACA,8CAA4C,CAEhD,oBACI,qBACA,kBACA,MACA,mEACA,2DACA,mDACA,wEAA2E,CAE/E,mDAEI,4BACQ,oBACR,UAAY,CAEhB,yBACI,QAAU,CAEd,2BACI,SACA,WAAa,CAEjB,0BACI,QAAU,CAEd,yBACI,2BACQ,kBAAsB,CAElC,yBACI,kBACA,WACA,YACA,qBAAuB,CAE3B,0BACI,kBACA,WACA,YACA,qBACA,aACA,MAAQ,CAEZ,wCACI,oBAAsB,CAE1B,4BACI,qBACA,WACA,WACA,yBACA,mBACA,aACA,cAAgB,CAKpB,iDAFE,wBAAiC,CAalC,sBAVC,qBACA,YAEA,kBACA,QACA,YACA,4BACA,gBACA,+BACA,UAAa,CACd","file":"static/css/app.a8e60999beadddec7080e2e86843423b.css","sourcesContent":["\n#app {\n font-family: 'Avenir', Helvetica, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-align: center;\n color: #2c3e50;\n}\n.header{\n height: 340px;\n background-color: #159957;\n background-image: -webkit-linear-gradient(330deg, #155799, #159957);\n background-image: linear-gradient(120deg, #155799, #159957);\n padding: 140px 0;\n color: white;\n font-weight: bolder;\n font-size: 3rem;\n}\n.content{\n margin: 0 auto;\n width: 750px;\n}\n.btn {\n text-decoration: none;\n box-sizing: content-box;\n font-size: 1.1rem;\n display: inline-block;\n margin-bottom: 1rem;\n color: rgba(255, 255, 255, 0.7);\n background-color: rgba(255, 255, 255, 0.08);\n border-color: rgba(255, 255, 255, 0.2);\n border-style: solid;\n border-width: 1px;\n border-radius: 0.3rem;\n -webkit-transition: color 0.2s, background-color 0.2s, border-color 0.2s;\n transition: color 0.2s, background-color 0.2s, border-color 0.2s;\n padding: 0.75rem 1rem;\n}\n.btn:hover {\n color: rgba(255, 255, 255, 0.8);\n text-decoration: none;\n background-color: rgba(255, 255, 255, 0.2);\n border-color: rgba(255, 255, 255, 0.3);\n}\n.innlineblock{\n display: inline-block;\n}\n.code{\n text-align: left;\n background-color: rgb(51,51,51);\n color: #ffd400;\n font-weight: bold;\n font-size: 1.2rem;\n}\n.keyword{\n color: #2ecc71;\n}\n.white{\n color: white;\n}\npre{\n padding: 0px;\n}\n.item{\n background-color: white;\n box-shadow: 0px 5px 100px black;\n padding: 10px 0px;\n margin: 20px 0;\n}\n.item h1{\n padding: 10px 30px;\n text-align: left;\n color: #f05b72;\n}\n.start h1{\n margin: 20px 0px;\n}\n.start h2{\n text-align: left;\n margin: 10px 0;\n}\n.gray{\n color: rgb(224,224,224);\n}\n.example{\n margin: 50px 0;\n}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/App.vue","\n*[data-v-7c4f269e]{\r\n margin: 0;\r\n padding: 0;\n}\n.slider[data-v-7c4f269e]{\r\n -webkit-perspective:1000px;\r\n perspective:1000px;\r\n position: relative;\n}\n.control em[data-v-7c4f269e]:first-child,\r\n.control em[data-v-7c4f269e]:last-child{\r\n position:absolute;\r\n display: block;\r\n width: 30px;\r\n height: 30px;\r\n background-size: cover;\r\n z-index: 100;\r\n cursor: pointer;\n}\n.control em[data-v-7c4f269e]:first-child{\r\n left: 0px;\r\n background-image: url('../assets/pre.png');\n}\n.control em[data-v-7c4f269e]:last-child{\r\n right: 0px;\r\n background-image: url('../assets/next.png');\n}\nli[data-v-7c4f269e]{\r\n list-style-type: none;\r\n position: absolute;\r\n top: 0px;\r\n -webkit-transition: scale 1s,left 1s,right 1s,-webkit-transform 0.5s;\r\n transition: scale 1s,left 1s,right 1s,-webkit-transform 0.5s;\r\n transition: transform 0.5s,scale 1s,left 1s,right 1s;\r\n transition:transform 0.5s,scale 1s,left 1s,right 1s,-webkit-transform 0.5s;\n}\nli.left[data-v-7c4f269e],\r\nli.right[data-v-7c4f269e]{\r\n -webkit-transform: scale(0.9,0.9);\r\n transform: scale(0.9,0.9);\r\n z-index: 10;\n}\nli.left[data-v-7c4f269e]{\r\n left: -3%;\n}\nli.center[data-v-7c4f269e]{\r\n left: 15%;\r\n z-index: 100;\n}\nli.right[data-v-7c4f269e]{\r\n left: 33%;\n}\nli.wait[data-v-7c4f269e]{\r\n -webkit-transform: scale(0,0);\r\n transform: scale(0,0);\n}\n.button[data-v-7c4f269e]{\r\n text-align: center;\r\n width: 100%;\r\n height: 20px;\r\n top: calc(100% - 20px);\n}\n.control[data-v-7c4f269e]{\r\n text-align: center;\r\n width: 100%;\r\n height: 30px;\r\n top: calc(50% - 20px);\r\n display: none;\r\n left: 0;\n}\n.slider:hover .control[data-v-7c4f269e]{\r\n display: inline-block;\n}\n.button em[data-v-7c4f269e]{\r\n display: inline-block;\r\n width: 20px;\r\n height: 5px;\r\n background-color: rgb(225,225,226);\r\n border-radius: 10px;\r\n margin: 0 2px;\r\n cursor: pointer;\n}\nem.center[data-v-7c4f269e]{\r\n background-color: rgb(198,47,47);\n}\n.tag[data-v-7c4f269e]{\r\n display: inline-block;\r\n padding: 5px;\r\n background-color: rgb(198,47,47);\r\n position: absolute;\r\n right: 0px;\r\n bottom: 15px;\r\n border-top-left-radius: 10px;\r\n font-size: 0.5rem;\r\n border-bottom-left-radius: 10px;\r\n color: white;\n}\r\n\r\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/components/Slider.vue"],"sourceRoot":""} -------------------------------------------------------------------------------- /example/static/css/app.a8e60999beadddec7080e2e86843423b.css: -------------------------------------------------------------------------------- 1 | #app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}.header{height:340px;background-color:#159957;background-image:-webkit-linear-gradient(330deg,#155799,#159957);background-image:linear-gradient(120deg,#155799,#159957);padding:140px 0;color:#fff;font-weight:bolder;font-size:3rem}.content{margin:0 auto;width:750px}.btn{box-sizing:content-box;font-size:1.1rem;display:inline-block;margin-bottom:1rem;color:hsla(0,0%,100%,.7);background-color:hsla(0,0%,100%,.08);border:1px solid hsla(0,0%,100%,.2);border-radius:.3rem;-webkit-transition:color .2s,background-color .2s,border-color .2s;transition:color .2s,background-color .2s,border-color .2s;padding:.75rem 1rem}.btn,.btn:hover{text-decoration:none}.btn:hover{color:hsla(0,0%,100%,.8);background-color:hsla(0,0%,100%,.2);border-color:hsla(0,0%,100%,.3)}.innlineblock{display:inline-block}.code{text-align:left;background-color:#333;color:#ffd400;font-weight:700;font-size:1.2rem}.keyword{color:#2ecc71}.white{color:#fff}pre{padding:0}.item{background-color:#fff;box-shadow:0 5px 100px #000;padding:10px 0;margin:20px 0}.item h1{padding:10px 30px;text-align:left;color:#f05b72}.start h1{margin:20px 0}.start h2{text-align:left;margin:10px 0}.gray{color:#e0e0e0}.example{margin:50px 0}[data-v-7c4f269e]{margin:0;padding:0}.slider[data-v-7c4f269e]{-webkit-perspective:1000px;perspective:1000px;position:relative}.control em[data-v-7c4f269e]:first-child,.control em[data-v-7c4f269e]:last-child{position:absolute;display:block;width:30px;height:30px;background-size:cover;z-index:2;cursor:pointer}.control em[data-v-7c4f269e]:first-child{left:0;background-image:url(data:image/png;base64,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)}.control em[data-v-7c4f269e]:last-child{right:0;background-image:url(data:image/png;base64,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)}li[data-v-7c4f269e]{list-style-type:none;position:absolute;top:0;-webkit-transition:scale 1s,left 1s,right 1s,-webkit-transform .5s;transition:scale 1s,left 1s,right 1s,-webkit-transform .5s;transition:transform .5s,scale 1s,left 1s,right 1s;transition:transform .5s,scale 1s,left 1s,right 1s,-webkit-transform .5s}li.left[data-v-7c4f269e],li.right[data-v-7c4f269e]{-webkit-transform:scale(.9);transform:scale(.9);z-index:1}li.left[data-v-7c4f269e]{left:-3%}li.center[data-v-7c4f269e]{left:15%;z-index:2}li.right[data-v-7c4f269e]{left:33%}li.wait[data-v-7c4f269e]{-webkit-transform:scale(0);transform:scale(0)}.button[data-v-7c4f269e]{text-align:center;width:100%;height:20px;top:calc(100% - 20px)}.control[data-v-7c4f269e]{text-align:center;width:100%;height:30px;top:calc(50% - 20px);display:none;left:0}.slider:hover .control[data-v-7c4f269e]{display:inline-block}.button em[data-v-7c4f269e]{display:inline-block;width:20px;height:5px;background-color:#e1e1e2;border-radius:10px;margin:0 2px;cursor:pointer}.tag[data-v-7c4f269e],em.center[data-v-7c4f269e]{background-color:#c62f2f}.tag[data-v-7c4f269e]{display:inline-block;padding:5px;position:absolute;right:0;bottom:15px;border-top-left-radius:10px;font-size:.5rem;border-bottom-left-radius:10px;color:#fff} -------------------------------------------------------------------------------- /example/static/js/app.bf4f9db526397263df1f.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([0,2],[,function(t,s,e){e(6);var i=e(0)(e(10),e(4),null,null);t.exports=i.exports},,function(t,s,e){e(7);var i=e(0)(e(11),e(5),"data-v-7c4f269e",null);t.exports=i.exports},function(t,s){t.exports={render:function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{attrs:{id:"app"}},[t._m(0),t._v(" "),e("div",{staticClass:"content"},[t._m(1),t._v(" "),e("h1",{staticClass:"example"},[t._v("Example")]),t._v(" "),e("div",{staticClass:"item"},[e("h1",[t._v("default")]),t._v(" "),e("slider",t._b({staticClass:"innlineblock"},"slider",t.setting)),t._v(" "),t._m(2)],1),t._v(" "),e("div",{staticClass:"item"},[e("h1",[t._v("Setting1")]),t._v(" "),e("slider",t._b({staticClass:"innlineblock"},"slider",t.setting1)),t._v(" "),t._m(3)],1),t._v(" "),e("div",{staticClass:"item"},[e("h1",[t._v("Setting2")]),t._v(" "),e("slider",t._b({staticClass:"innlineblock"},"slider",t.setting2)),t._v(" "),t._m(4)],1)])])},staticRenderFns:[function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"header"},[t._v("\n vue-image-scroll"),e("br"),t._v(" "),e("a",{staticClass:"btn",attrs:{href:"https://github.com/ShanaMaid/vue-image-scroll"}},[t._v("View on GitHub")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"start"},[e("h1",[t._v("Quick Start")]),t._v(" "),e("h2",[t._v("Installation(安装)")]),t._v(" "),e("div",{staticClass:"code white"},[e("br"),t._v("\n     npm install vue-image-scroll\n "),e("br"),e("br")]),t._v(" "),e("br"),t._v(" "),e("h2",[t._v("Usage(使用方法)")]),t._v(" "),e("div",{staticClass:"code white"},[e("pre",[t._v('\n \n\n \n ")])]),t._v(" "),e("br"),t._v(" "),e("h2",[t._v("Value-Default(默认值)")]),t._v(" "),e("div",{staticClass:"code "},[e("pre",[t._v("\n "),e("span",{staticClass:"white"},[t._v("{")]),t._v("\n "),e("span",{staticClass:"keyword"},[t._v("styleObject")]),t._v(":{\n width: '750',\n height: '250'\n }, "),e("span",{staticClass:"gray"},[t._v("//滚动框样式 宽度默认750px 高度默认250px 其余样式小驼峰命名\n background-color => backgroundColor")]),t._v("\n "),e("span",{staticClass:"keyword"},[t._v("image")]),t._v(": null, "),e("span",{staticClass:"gray"},[t._v("//图片数组")]),t._v("\n "),e("span",{staticClass:"keyword"},[t._v("interval")]),t._v(":2000, "),e("span",{staticClass:"gray"},[t._v("//滚动间隔,单位ms,默认2000")]),t._v("\n "),e("span",{staticClass:"keyword"},[t._v("imgStyle")]),t._v(":null,"),e("span",{staticClass:"gray"},[t._v("//图片样式，宽度和高度不可设置，样式名字小驼峰命名")]),t._v("\n "),e("span",{staticClass:"keyword"},[t._v("autoRoll")]),t._v(":true, "),e("span",{staticClass:"gray"},[t._v("//自动滚动")]),t._v("\n "),e("span",{staticClass:"keyword"},[t._v("direction")]),t._v(":left "),e("span",{staticClass:"gray"},[t._v("//滚动方向, left or right")]),t._v("\n "),e("span",{staticClass:"white"},[t._v("}")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"code"},[e("pre",[t._v("\n "),e("span",{staticClass:"white"},[t._v("{")]),t._v("\n "),e("span",{staticClass:"keyword"},[t._v("image")]),t._v(": [\n 'static/img/1-1.jpg', \n 'static/img/1-2.jpg', \n 'static/img/1-3.jpg', \n 'static/img/1-4.jpg', \n 'static/img/1-5.jpg'\n ]\n "),e("span",{staticClass:"white"},[t._v("}")]),t._v("\n ")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"code"},[e("pre",[t._v("\n "),e("span",{staticClass:"white"},[t._v("{")]),t._v("\n "),e("span",{staticClass:"keyword"},[t._v("styleObject")]),t._v(": {\n width: '550',\n height: '250',\n backgroundColor: 'rgba(0,225,226,0.2)',\n borderRadius: '20px'\n },\n "),e("span",{staticClass:"keyword"},[t._v("image")]),t._v(": [\n {\n src: 'static/img/1-1.jpg',\n tagName: '我是标签1', "),e("span",{staticClass:"gray"},[t._v("//标签内容")]),t._v("\n tagStyle: { "),e("span",{staticClass:"gray"},[t._v("//标签样式")]),t._v("\n backgroundColor: 'blue', \n }\n },\n {\n src: 'static/img/1-2.jpg',\n tagName: '我是标签2',\n tagStyle: {\n backgroundColor: 'greeen',\n color: 'black',\n fontSize: '20px'\n }\n },\n {\n src: 'static/img/1-3.jpg',\n tagName: '我是标签2'\n },\n {\n src: 'static/img/1-4.jpg',\n tagName: '我是标签4'\n },\n {\n src: 'static/img/1-5.jpg',\n tagName: '我是标签5'\n },\n ],\n interval: 1000,\n "),e("span",{staticClass:"keyword"},[t._v("imgStyle")]),t._v(": {\n borderRadius: '20px'\n },\n "),e("span",{staticClass:"keyword"},[t._v("autoRoll")]),t._v(": true,\n "),e("span",{staticClass:"keyword"},[t._v("direction")]),t._v(": 'right'\n "),e("span",{staticClass:"white"},[t._v("}")]),t._v("\n ")])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"code"},[e("pre",[t._v("\n "),e("span",{staticClass:"white"},[t._v("{")]),t._v("\n "),e("span",{staticClass:"keyword"},[t._v("styleObject")]),t._v(": {\n width: '250',\n height: '150'\n },\n "),e("span",{staticClass:"keyword"},[t._v("image")]),t._v(": [\n 'static/img/1-1.jpg', \n 'static/img/1-2.jpg', \n 'static/img/1-3.jpg', \n 'static/img/1-4.jpg', \n 'static/img/1-5.jpg'],\n "),e("span",{staticClass:"keyword"},[t._v("imgStyle")]),t._v(": {\n borderRadius: '20px'\n },\n "),e("span",{staticClass:"keyword"},[t._v("autoRoll")]),t._v(": false,\n "),e("span",{staticClass:"white"},[t._v("}")]),t._v("\n ")])])}]}},function(t,s){t.exports={render:function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ul",{staticClass:"slider",style:t.styleObject},[t._l(t.image,function(s,i){return e("li",{class:[t.move[i]]},["object"==typeof s?[e("img",{style:t.imgStyle,attrs:{src:s.src},on:{click:function(s){t.target(i)}}}),t._v(" "),e("span",{class:{tag:s.tagName},style:s.tagStyle},[t._v(t._s(s.tagName))])]:t._e(),t._v(" "),"string"==typeof s?[e("img",{style:t.imgStyle,attrs:{src:s},on:{click:function(s){t.target(i)}}})]:t._e()],2)}),t._v(" "),e("li",{staticClass:"button"},t._l(t.image,function(s,i){return e("em",{class:[t.move[i]],on:{click:function(s){t.target(i)}}})})),t._v(" "),e("li",{staticClass:"control"},[e("em",{on:{click:t.prePic}}),t._v(" "),e("em",{on:{click:t.nextPic}})])],2)},staticRenderFns:[]}},function(t,s){},function(t,s){},,,function(t,s,e){"use strict";Object.defineProperty(s,"__esModule",{value:!0});var i=e(3),a=e.n(i);s.default={name:"app",components:{slider:a.a},data:function(){return{setting:{image:["static/img/1-1.jpg","static/img/1-2.jpg","static/img/1-3.jpg","static/img/1-4.jpg","static/img/1-5.jpg"]},setting1:{styleObject:{width:"550",height:"250",backgroundColor:"rgba(0,225,226,0.2)",borderRadius:"20px"},image:[{src:"static/img/1-1.jpg",tagName:"我是标签1",tagStyle:{backgroundColor:"blue"}},{src:"static/img/1-2.jpg",tagName:"我是标签2",tagStyle:{backgroundColor:"greeen",color:"black",fontSize:"20px"}},{src:"static/img/1-3.jpg",tagName:"我是标签2"},{src:"static/img/1-4.jpg",tagName:"我是标签4"},{src:"static/img/1-5.jpg",tagName:"我是标签5"}],interval:1e3,imgStyle:{borderRadius:"20px"},autoRoll:!0,direction:"right"},setting2:{styleObject:{width:"250",height:"150"},image:["static/img/1-1.jpg","static/img/1-2.jpg","static/img/1-3.jpg","static/img/1-4.jpg","static/img/1-5.jpg"],imgStyle:{borderRadius:"20px"},autoRoll:!1,direction:"right"}}}}},function(t,s,e){"use strict";Object.defineProperty(s,"__esModule",{value:!0}),s.default={name:"slider",props:{styleObject:{default:{width:"750",height:"250"}},image:{require:!0,type:Array,validator:function(t){return t.length>=3}},interval:{default:2e3},imgStyle:{default:{}},autoRoll:{default:!0},direction:{default:"left"}},mounted:function(){var t=parseInt(this.styleObject.width),s=parseInt(this.styleObject.height);this.imgStyle.width=.7*t+"px",this.imgStyle.height=.9*s+"px",this.styleObject.width+="px",this.styleObject.height+="px";for(var e=3;e",components:{App:n.a}})}],[12]); 2 | //# sourceMappingURL=app.bf4f9db526397263df1f.js.map -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 167 | 168 | 253 | 254 | 356 | -------------------------------------------------------------------------------- /example/static/js/manifest.994bc14ff3cb065d7d98.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///static/js/manifest.994bc14ff3cb065d7d98.js","webpack:///webpack/bootstrap 054737ff2f5d1d265fb5"],"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","2","e","onScriptComplete","script","onerror","onload","clearTimeout","timeout","chunk","Error","undefined","Promise","resolve","head","document","getElementsByTagName","createElement","type","charset","async","nc","setAttribute","src","p","0","1","setTimeout","promise","reject","appendChild","m","c","value","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","oe","err","console","error"],"mappings":"CAAS,SAAUA,GCqCnB,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,QAxDA,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,IACAI,EAAAJ,GAAA,CAEA,KAAAZ,IAAAU,GACAQ,OAAAC,UAAAC,eAAAd,KAAAI,EAAAV,KACAF,EAAAE,GAAAU,EAAAV,GAIA,KADAO,KAAAE,EAAAC,EAAAC,GACAG,EAAAC,QACAD,EAAAO,SACA,IAAAV,EACA,IAAAP,EAAA,EAAYA,EAAAO,EAAAI,OAA2BX,IACvCS,EAAAd,IAAAuB,EAAAX,EAAAP,GAGA,OAAAS,GAIA,IAAAZ,MAGAe,GACAO,EAAA,EA6BAxB,GAAAyB,EAAA,SAAAZ,GAsBA,QAAAa,KAEAC,EAAAC,QAAAD,EAAAE,OAAA,KACAC,aAAAC,EACA,IAAAC,GAAAf,EAAAJ,EACA,KAAAmB,IACAA,KAAA,MAAAC,OAAA,iBAAApB,EAAA,aACAI,EAAAJ,GAAAqB,QA5BA,OAAAjB,EAAAJ,GACA,MAAAsB,SAAAC,SAGA,IAAAnB,EAAAJ,GACA,MAAAI,GAAAJ,GAAA,EAGA,IAAAwB,GAAAC,SAAAC,qBAAA,WACAZ,EAAAW,SAAAE,cAAA,SACAb,GAAAc,KAAA,kBACAd,EAAAe,QAAA,QACAf,EAAAgB,OAAA,EACAhB,EAAAI,QAAA,KAEA/B,EAAA4C,IACAjB,EAAAkB,aAAA,QAAA7C,EAAA4C,IAEAjB,EAAAmB,IAAA9C,EAAA+C,EAAA,aAAAlC,EAAA,KAAwEmC,EAAA,uBAAAC,EAAA,wBAAsDpC,GAAA,KAC9H,IAAAkB,GAAAmB,WAAAxB,EAAA,KACAC,GAAAC,QAAAD,EAAAE,OAAAH,CAYA,IAAAyB,GAAA,GAAAhB,SAAA,SAAAC,EAAAgB,GACAnC,EAAAJ,IAAAuB,EAAAgB,IAKA,OAHAnC,GAAAJ,GAAA,GAAAsC,EAEAd,EAAAgB,YAAA1B,GACAwB,GAIAnD,EAAAsD,EAAAvD,EAGAC,EAAAuD,EAAArD,EAGAF,EAAAK,EAAA,SAAAmD,GAA2C,MAAAA,IAG3CxD,EAAAyD,EAAA,SAAAtD,EAAAuD,EAAAC,GACA3D,EAAA4D,EAAAzD,EAAAuD,IACAvC,OAAA0C,eAAA1D,EAAAuD,GACAI,cAAA,EACAC,YAAA,EACAC,IAAAL,KAMA3D,EAAAiE,EAAA,SAAA7D,GACA,GAAAuD,GAAAvD,KAAA8D,WACA,WAA2B,MAAA9D,GAAA,SAC3B,WAAiC,MAAAA,GAEjC,OADAJ,GAAAyD,EAAAE,EAAA,IAAAA,GACAA,GAIA3D,EAAA4D,EAAA,SAAAO,EAAAC,GAAsD,MAAAjD,QAAAC,UAAAC,eAAAd,KAAA4D,EAAAC,IAGtDpE,EAAA+C,EAAA,KAGA/C,EAAAqE,GAAA,SAAAC,GAA8D,KAApBC,SAAAC,MAAAF,GAAoBA","file":"static/js/manifest.994bc14ff3cb065d7d98.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\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\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\t2: 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/******/\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\tif(installedChunks[chunkId] === 0)\n/******/ \t\t\treturn Promise.resolve();\n/******/\n/******/ \t\t// an Promise means \"currently loading\".\n/******/ \t\tif(installedChunks[chunkId]) {\n/******/ \t\t\treturn installedChunks[chunkId][2];\n/******/ \t\t}\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\":\"bf4f9db526397263df1f\",\"1\":\"68042cd39e700b93b0ae\"}[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) chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));\n/******/ \t\t\t\tinstalledChunks[chunkId] = undefined;\n/******/ \t\t\t}\n/******/ \t\t};\n/******/\n/******/ \t\tvar promise = new Promise(function(resolve, reject) {\n/******/ \t\t\tinstalledChunks[chunkId] = [resolve, reject];\n/******/ \t\t});\n/******/ \t\tinstalledChunks[chunkId][2] = promise;\n/******/\n/******/ \t\thead.appendChild(script);\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.994bc14ff3cb065d7d98.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\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\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\t2: 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\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\tif(installedChunks[chunkId] === 0)\n \t\t\treturn Promise.resolve();\n\n \t\t// an Promise means \"currently loading\".\n \t\tif(installedChunks[chunkId]) {\n \t\t\treturn installedChunks[chunkId][2];\n \t\t}\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\":\"bf4f9db526397263df1f\",\"1\":\"68042cd39e700b93b0ae\"}[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) chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));\n \t\t\t\tinstalledChunks[chunkId] = undefined;\n \t\t\t}\n \t\t};\n\n \t\tvar promise = new Promise(function(resolve, reject) {\n \t\t\tinstalledChunks[chunkId] = [resolve, reject];\n \t\t});\n \t\tinstalledChunks[chunkId][2] = promise;\n\n \t\thead.appendChild(script);\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 054737ff2f5d1d265fb5"],"sourceRoot":""} -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("vue-slider-163music",[],t):"object"==typeof exports?exports["vue-slider-163music"]=t():e["vue-slider-163music"]=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=11)}([function(e,t,n){n(7);var r=n(5)(n(10),n(6),"data-v-7c4f269e",null);r.options.__file="D:\\vue-test\\e\\vue-slider-163music\\src\\components\\Slider.vue",r.esModule&&Object.keys(r.esModule).some(function(e){return"default"!==e&&"__esModule"!==e})&&console.error("named exports are not supported in *.vue files."),r.options.functional&&console.error("[vue-loader] Slider.vue: functional components are not supported with templates, they should use render functions."),e.exports=r.exports},function(e,t,n){t=e.exports=n(2)(),t.push([e.i,"\n*[data-v-7c4f269e]{\r\n margin: 0;\r\n padding: 0;\n}\n.slider[data-v-7c4f269e]{\r\n -webkit-perspective:1000px;\r\n perspective:1000px;\r\n position: relative;\n}\n.control em[data-v-7c4f269e]:first-child,\r\n.control em[data-v-7c4f269e]:last-child{\r\n position:absolute;\r\n display: block;\r\n width: 30px;\r\n height: 30px;\r\n background-size: cover;\r\n z-index: 100;\r\n cursor: pointer;\n}\n.control em[data-v-7c4f269e]:first-child{\r\n left: 0px;\r\n background-image: url("+n(4)+");\n}\n.control em[data-v-7c4f269e]:last-child{\r\n right: 0px;\r\n background-image: url("+n(3)+");\n}\nli[data-v-7c4f269e]{\r\n list-style-type: none;\r\n position: absolute;\r\n top: 0px;\r\n -webkit-transition: scale 1s,left 1s,right 1s,-webkit-transform 0.5s;\r\n transition: scale 1s,left 1s,right 1s,-webkit-transform 0.5s;\r\n transition: transform 0.5s,scale 1s,left 1s,right 1s;\r\n transition:transform 0.5s,scale 1s,left 1s,right 1s,-webkit-transform 0.5s;\n}\nli.left[data-v-7c4f269e],\r\nli.right[data-v-7c4f269e]{\r\n -webkit-transform: scale(0.9,0.9);\r\n transform: scale(0.9,0.9);\r\n z-index: 10;\n}\nli.left[data-v-7c4f269e]{\r\n left: -3%;\n}\nli.center[data-v-7c4f269e]{\r\n left: 15%;\r\n z-index: 100;\n}\nli.right[data-v-7c4f269e]{\r\n left: 33%;\n}\nli.wait[data-v-7c4f269e]{\r\n -webkit-transform: scale(0,0);\r\n transform: scale(0,0);\n}\n.button[data-v-7c4f269e]{\r\n text-align: center;\r\n width: 100%;\r\n height: 20px;\r\n top: calc(100% - 20px);\n}\n.control[data-v-7c4f269e]{\r\n text-align: center;\r\n width: 100%;\r\n height: 30px;\r\n top: calc(50% - 20px);\r\n display: none;\r\n left: 0;\n}\n.slider:hover .control[data-v-7c4f269e]{\r\n display: inline-block;\n}\n.button em[data-v-7c4f269e]{\r\n display: inline-block;\r\n width: 20px;\r\n height: 5px;\r\n background-color: rgb(225,225,226);\r\n border-radius: 10px;\r\n margin: 0 2px;\r\n cursor: pointer;\n}\nem.center[data-v-7c4f269e]{\r\n background-color: rgb(198,47,47);\n}\n.tag[data-v-7c4f269e]{\r\n display: inline-block;\r\n padding: 5px;\r\n background-color: rgb(198,47,47);\r\n position: absolute;\r\n right: 0px;\r\n bottom: 15px;\r\n border-top-left-radius: 10px;\r\n font-size: 0.5rem;\r\n border-bottom-left-radius: 10px;\r\n color: white;\n}\r\n\r\n",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;tn.parts.length&&(r.parts.length=n.parts.length)}else{for(var o=[],i=0;i=3}},interval:{default:2e3},imgStyle:{default:{}},autoRoll:{default:!0},direction:{default:"left"}},mounted:function(){var e=parseInt(this.styleObject.width),t=parseInt(this.styleObject.height);this.imgStyle.width=.7*e+"px",this.imgStyle.height=.9*t+"px",this.styleObject.width+="px",this.styleObject.height+="px";for(var n=3;n\\n
\\n \"), _vm._v(\"\\n
\\n \\n\\n \\n \")])]), _vm._v(\" \"), _c('br'), _vm._v(\" \"), _c('h2', [_vm._v(\"Value-Default(默认值)\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"code \"\n }, [_c('pre', [_vm._v(\"\\n \"), _c('span', {\n staticClass: \"white\"\n }, [_vm._v(\"{\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"styleObject\")]), _vm._v(\":{\\n width: '750',\\n height: '250'\\n }, \"), _c('span', {\n staticClass: \"gray\"\n }, [_vm._v(\"//滚动框样式 宽度默认750px 高度默认250px 其余样式小驼峰命名\\n background-color => backgroundColor\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"image\")]), _vm._v(\": null, \"), _c('span', {\n staticClass: \"gray\"\n }, [_vm._v(\"//图片数组\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"interval\")]), _vm._v(\":2000, \"), _c('span', {\n staticClass: \"gray\"\n }, [_vm._v(\"//滚动间隔,单位ms,默认2000\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"imgStyle\")]), _vm._v(\":null,\"), _c('span', {\n staticClass: \"gray\"\n }, [_vm._v(\"//图片样式，宽度和高度不可设置，样式名字小驼峰命名\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"autoRoll\")]), _vm._v(\":true, \"), _c('span', {\n staticClass: \"gray\"\n }, [_vm._v(\"//自动滚动\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"direction\")]), _vm._v(\":left \"), _c('span', {\n staticClass: \"gray\"\n }, [_vm._v(\"//滚动方向, left or right\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"white\"\n }, [_vm._v(\"}\")]), _vm._v(\"\\n\")])])])\n},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n staticClass: \"code\"\n }, [_c('pre', [_vm._v(\"\\n \"), _c('span', {\n staticClass: \"white\"\n }, [_vm._v(\"{\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"image\")]), _vm._v(\": [\\n 'static/img/1-1.jpg', \\n 'static/img/1-2.jpg', \\n 'static/img/1-3.jpg', \\n 'static/img/1-4.jpg', \\n 'static/img/1-5.jpg'\\n ]\\n \"), _c('span', {\n staticClass: \"white\"\n }, [_vm._v(\"}\")]), _vm._v(\"\\n \")])])\n},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n staticClass: \"code\"\n }, [_c('pre', [_vm._v(\"\\n \"), _c('span', {\n staticClass: \"white\"\n }, [_vm._v(\"{\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"styleObject\")]), _vm._v(\": {\\n width: '550',\\n height: '250',\\n backgroundColor: 'rgba(0,225,226,0.2)',\\n borderRadius: '20px'\\n },\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"image\")]), _vm._v(\": [\\n {\\n src: 'static/img/1-1.jpg',\\n tagName: '我是标签1', \"), _c('span', {\n staticClass: \"gray\"\n }, [_vm._v(\"//标签内容\")]), _vm._v(\"\\n tagStyle: { \"), _c('span', {\n staticClass: \"gray\"\n }, [_vm._v(\"//标签样式\")]), _vm._v(\"\\n backgroundColor: 'blue', \\n }\\n },\\n {\\n src: 'static/img/1-2.jpg',\\n tagName: '我是标签2',\\n tagStyle: {\\n backgroundColor: 'greeen',\\n color: 'black',\\n fontSize: '20px'\\n }\\n },\\n {\\n src: 'static/img/1-3.jpg',\\n tagName: '我是标签2'\\n },\\n {\\n src: 'static/img/1-4.jpg',\\n tagName: '我是标签4'\\n },\\n {\\n src: 'static/img/1-5.jpg',\\n tagName: '我是标签5'\\n },\\n ],\\n interval: 1000,\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"imgStyle\")]), _vm._v(\": {\\n borderRadius: '20px'\\n },\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"autoRoll\")]), _vm._v(\": true,\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"direction\")]), _vm._v(\": 'right'\\n \"), _c('span', {\n staticClass: \"white\"\n }, [_vm._v(\"}\")]), _vm._v(\"\\n \")])])\n},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n staticClass: \"code\"\n }, [_c('pre', [_vm._v(\"\\n \"), _c('span', {\n staticClass: \"white\"\n }, [_vm._v(\"{\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"styleObject\")]), _vm._v(\": {\\n width: '250',\\n height: '150'\\n },\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"image\")]), _vm._v(\": [\\n 'static/img/1-1.jpg', \\n 'static/img/1-2.jpg', \\n 'static/img/1-3.jpg', \\n 'static/img/1-4.jpg', \\n 'static/img/1-5.jpg'],\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"imgStyle\")]), _vm._v(\": {\\n borderRadius: '20px'\\n },\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"autoRoll\")]), _vm._v(\": false,\\n \"), _c('span', {\n staticClass: \"white\"\n }, [_vm._v(\"}\")]), _vm._v(\"\\n \")])])\n}]}\n\n/***/ }),\n/* 5 */\n/***/ (function(module, exports) {\n\nmodule.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('ul', {\n staticClass: \"slider\",\n style: (_vm.styleObject)\n }, [_vm._l((_vm.image), function(item, index) {\n return _c('li', {\n class: [_vm.move[index]]\n }, [(typeof item === 'object') ? [_c('img', {\n style: (_vm.imgStyle),\n attrs: {\n \"src\": item.src\n },\n on: {\n \"click\": function($event) {\n _vm.target(index)\n }\n }\n }), _vm._v(\" \"), _c('span', {\n class: {\n tag: item.tagName\n },\n style: (item.tagStyle)\n }, [_vm._v(_vm._s(item.tagName))])] : _vm._e(), _vm._v(\" \"), (typeof item === 'string') ? [_c('img', {\n style: (_vm.imgStyle),\n attrs: {\n \"src\": item\n },\n on: {\n \"click\": function($event) {\n _vm.target(index)\n }\n }\n })] : _vm._e()], 2)\n }), _vm._v(\" \"), _c('li', {\n staticClass: \"button\"\n }, _vm._l((_vm.image), function(item, index) {\n return _c('em', {\n class: [_vm.move[index]],\n on: {\n \"click\": function($event) {\n _vm.target(index)\n }\n }\n })\n })), _vm._v(\" \"), _c('li', {\n staticClass: \"control\"\n }, [_c('em', {\n on: {\n \"click\": _vm.prePic\n }\n }), _vm._v(\" \"), _c('em', {\n on: {\n \"click\": _vm.nextPic\n }\n })])], 2)\n},staticRenderFns: []}\n\n/***/ }),\n/* 6 */\n/***/ (function(module, exports) {\n\n// removed by extract-text-webpack-plugin\n\n/***/ }),\n/* 7 */\n/***/ (function(module, exports) {\n\n// removed by extract-text-webpack-plugin\n\n/***/ }),\n/* 8 */,\n/* 9 */,\n/* 10 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_Slider__ = __webpack_require__(3);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_Slider___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__components_Slider__);\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = {\n name: 'app',\n components: {\n slider: __WEBPACK_IMPORTED_MODULE_0__components_Slider___default.a\n },\n data: function data() {\n return {\n setting: {\n image: ['static/img/1-1.jpg', 'static/img/1-2.jpg', 'static/img/1-3.jpg', 'static/img/1-4.jpg', 'static/img/1-5.jpg']\n },\n setting1: {\n styleObject: {\n width: '550',\n height: '250',\n backgroundColor: 'rgba(0,225,226,0.2)',\n borderRadius: '20px'\n },\n image: [{\n src: 'static/img/1-1.jpg',\n tagName: '我是标签1',\n tagStyle: {\n backgroundColor: 'blue'\n }\n }, {\n src: 'static/img/1-2.jpg',\n tagName: '我是标签2',\n tagStyle: {\n backgroundColor: 'greeen',\n color: 'black',\n fontSize: '20px'\n }\n }, {\n src: 'static/img/1-3.jpg',\n tagName: '我是标签2'\n }, {\n src: 'static/img/1-4.jpg',\n tagName: '我是标签4'\n }, {\n src: 'static/img/1-5.jpg',\n tagName: '我是标签5'\n }],\n interval: 1000,\n imgStyle: {\n borderRadius: '20px'\n },\n autoRoll: true,\n direction: 'right'\n },\n setting2: {\n styleObject: {\n width: '250',\n height: '150'\n },\n image: ['static/img/1-1.jpg', 'static/img/1-2.jpg', 'static/img/1-3.jpg', 'static/img/1-4.jpg', 'static/img/1-5.jpg'],\n imgStyle: {\n borderRadius: '20px'\n },\n autoRoll: false,\n direction: 'right'\n }\n };\n }\n};\n\n/***/ }),\n/* 11 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = {\n name: 'slider',\n props: {\n styleObject: {\n default: {\n width: '750',\n height: '250'\n }\n },\n image: {\n require: true,\n type: Array,\n validator: function validator(value) {\n return value.length >= 3;\n }\n },\n interval: {\n default: 2000\n },\n imgStyle: {\n default: {}\n },\n autoRoll: {\n default: true\n },\n direction: {\n default: 'left'\n }\n },\n mounted: function mounted() {\n var width = parseInt(this.styleObject.width);\n var height = parseInt(this.styleObject.height);\n this.imgStyle.width = width * 0.7 + 'px';\n this.imgStyle.height = height * 0.9 + 'px';\n this.styleObject.width += 'px';\n this.styleObject.height += 'px';\n\n for (var i = 3; i < this.image.length; i++) {\n this.move[i] = 'wait';\n }\n\n if (this.autoRoll) {\n if (this.direction === 'left') {\n setInterval(this.nextPic, this.interval);\n } else {\n setInterval(this.prePic, this.interval);\n }\n }\n },\n data: function data() {\n return {\n move: ['left', 'center', 'right']\n };\n },\n\n methods: {\n nextPic: function nextPic(event) {\n var temp = this.move.pop();\n this.move.unshift(temp);\n },\n prePic: function prePic(event) {\n var temp = this.move.shift();\n this.move.push(temp);\n },\n target: function target(pos) {\n var num = this.image.length;\n for (var i = 0; i < num; i++) {\n this.move[i] = 'wait';\n }\n this.move[pos] = 'center';\n this.move[pos + 1 < num ? pos + 1 : 0] = 'right';\n this.move[pos - 1 === -1 ? num - 1 : pos - 1] = 'left';\n this.move = this.move.concat();\n }\n }\n};\n\n/***/ }),\n/* 12 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue__ = __webpack_require__(2);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__App__ = __webpack_require__(1);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__App___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__App__);\n\n\n\n\n__WEBPACK_IMPORTED_MODULE_0_vue__[\"a\" /* default */].config.productionTip = false;\n\nnew __WEBPACK_IMPORTED_MODULE_0_vue__[\"a\" /* default */]({\n el: '#app',\n template: '',\n components: { App: __WEBPACK_IMPORTED_MODULE_1__App___default.a }\n});\n\n/***/ })\n],[12]);\n\n\n// WEBPACK FOOTER //\n// static/js/app.bf4f9db526397263df1f.js","\n/* styles */\nrequire(\"!!../node_modules/.2.0.0@extract-text-webpack-plugin/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"minimize\\\":true,\\\"sourceMap\\\":true}!../node_modules/.11.1.3@vue-loader/lib/style-rewriter?{\\\"id\\\":\\\"data-v-6ef827f6\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!../node_modules/.11.1.3@vue-loader/lib/selector?type=styles&index=0!./App.vue\")\n\nvar Component = require(\"!../node_modules/.11.1.3@vue-loader/lib/component-normalizer\")(\n /* script */\n require(\"!!babel-loader!../node_modules/.11.1.3@vue-loader/lib/selector?type=script&index=0!./App.vue\"),\n /* template */\n require(\"!!../node_modules/.11.1.3@vue-loader/lib/template-compiler?{\\\"id\\\":\\\"data-v-6ef827f6\\\"}!../node_modules/.11.1.3@vue-loader/lib/selector?type=template&index=0!./App.vue\"),\n /* scopeId */\n null,\n /* cssModules */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/App.vue\n// module id = 1\n// module chunks = 0","\n/* styles */\nrequire(\"!!../../node_modules/.2.0.0@extract-text-webpack-plugin/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"minimize\\\":true,\\\"sourceMap\\\":true}!../../node_modules/.11.1.3@vue-loader/lib/style-rewriter?{\\\"id\\\":\\\"data-v-7c4f269e\\\",\\\"scoped\\\":true,\\\"hasInlineConfig\\\":false}!../../node_modules/.11.1.3@vue-loader/lib/selector?type=styles&index=0!./Slider.vue\")\n\nvar Component = require(\"!../../node_modules/.11.1.3@vue-loader/lib/component-normalizer\")(\n /* script */\n require(\"!!babel-loader!../../node_modules/.11.1.3@vue-loader/lib/selector?type=script&index=0!./Slider.vue\"),\n /* template */\n require(\"!!../../node_modules/.11.1.3@vue-loader/lib/template-compiler?{\\\"id\\\":\\\"data-v-7c4f269e\\\"}!../../node_modules/.11.1.3@vue-loader/lib/selector?type=template&index=0!./Slider.vue\"),\n /* scopeId */\n \"data-v-7c4f269e\",\n /* cssModules */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/Slider.vue\n// module id = 3\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n attrs: {\n \"id\": \"app\"\n }\n }, [_vm._m(0), _vm._v(\" \"), _c('div', {\n staticClass: \"content\"\n }, [_vm._m(1), _vm._v(\" \"), _c('h1', {\n staticClass: \"example\"\n }, [_vm._v(\"Example\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"item\"\n }, [_c('h1', [_vm._v(\"default\")]), _vm._v(\" \"), _c('slider', _vm._b({\n staticClass: \"innlineblock\"\n }, 'slider', _vm.setting)), _vm._v(\" \"), _vm._m(2)], 1), _vm._v(\" \"), _c('div', {\n staticClass: \"item\"\n }, [_c('h1', [_vm._v(\"Setting1\")]), _vm._v(\" \"), _c('slider', _vm._b({\n staticClass: \"innlineblock\"\n }, 'slider', _vm.setting1)), _vm._v(\" \"), _vm._m(3)], 1), _vm._v(\" \"), _c('div', {\n staticClass: \"item\"\n }, [_c('h1', [_vm._v(\"Setting2\")]), _vm._v(\" \"), _c('slider', _vm._b({\n staticClass: \"innlineblock\"\n }, 'slider', _vm.setting2)), _vm._v(\" \"), _vm._m(4)], 1)])])\n},staticRenderFns: [function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n staticClass: \"header\"\n }, [_vm._v(\"\\n vue-image-scroll\"), _c('br'), _vm._v(\" \"), _c('a', {\n staticClass: \"btn\",\n attrs: {\n \"href\": \"https://github.com/ShanaMaid/vue-image-scroll\"\n }\n }, [_vm._v(\"View on GitHub\")])])\n},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n staticClass: \"start\"\n }, [_c('h1', [_vm._v(\"Quick Start\")]), _vm._v(\" \"), _c('h2', [_vm._v(\"Installation(安装)\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"code white\"\n }, [_c('br'), _vm._v(\"\\n     npm install vue-image-scroll\\n \"), _c('br'), _c('br')]), _vm._v(\" \"), _c('br'), _vm._v(\" \"), _c('h2', [_vm._v(\"Usage(使用方法)\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"code white\"\n }, [_c('pre', [_vm._v(\"\\n \\n\\n \\n \")])]), _vm._v(\" \"), _c('br'), _vm._v(\" \"), _c('h2', [_vm._v(\"Value-Default(默认值)\")]), _vm._v(\" \"), _c('div', {\n staticClass: \"code \"\n }, [_c('pre', [_vm._v(\"\\n \"), _c('span', {\n staticClass: \"white\"\n }, [_vm._v(\"{\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"styleObject\")]), _vm._v(\":{\\n width: '750',\\n height: '250'\\n }, \"), _c('span', {\n staticClass: \"gray\"\n }, [_vm._v(\"//滚动框样式 宽度默认750px 高度默认250px 其余样式小驼峰命名\\n background-color => backgroundColor\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"image\")]), _vm._v(\": null, \"), _c('span', {\n staticClass: \"gray\"\n }, [_vm._v(\"//图片数组\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"interval\")]), _vm._v(\":2000, \"), _c('span', {\n staticClass: \"gray\"\n }, [_vm._v(\"//滚动间隔,单位ms,默认2000\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"imgStyle\")]), _vm._v(\":null,\"), _c('span', {\n staticClass: \"gray\"\n }, [_vm._v(\"//图片样式，宽度和高度不可设置，样式名字小驼峰命名\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"autoRoll\")]), _vm._v(\":true, \"), _c('span', {\n staticClass: \"gray\"\n }, [_vm._v(\"//自动滚动\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"direction\")]), _vm._v(\":left \"), _c('span', {\n staticClass: \"gray\"\n }, [_vm._v(\"//滚动方向, left or right\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"white\"\n }, [_vm._v(\"}\")]), _vm._v(\"\\n\")])])])\n},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n staticClass: \"code\"\n }, [_c('pre', [_vm._v(\"\\n \"), _c('span', {\n staticClass: \"white\"\n }, [_vm._v(\"{\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"image\")]), _vm._v(\": [\\n 'static/img/1-1.jpg', \\n 'static/img/1-2.jpg', \\n 'static/img/1-3.jpg', \\n 'static/img/1-4.jpg', \\n 'static/img/1-5.jpg'\\n ]\\n \"), _c('span', {\n staticClass: \"white\"\n }, [_vm._v(\"}\")]), _vm._v(\"\\n \")])])\n},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n staticClass: \"code\"\n }, [_c('pre', [_vm._v(\"\\n \"), _c('span', {\n staticClass: \"white\"\n }, [_vm._v(\"{\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"styleObject\")]), _vm._v(\": {\\n width: '550',\\n height: '250',\\n backgroundColor: 'rgba(0,225,226,0.2)',\\n borderRadius: '20px'\\n },\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"image\")]), _vm._v(\": [\\n {\\n src: 'static/img/1-1.jpg',\\n tagName: '我是标签1', \"), _c('span', {\n staticClass: \"gray\"\n }, [_vm._v(\"//标签内容\")]), _vm._v(\"\\n tagStyle: { \"), _c('span', {\n staticClass: \"gray\"\n }, [_vm._v(\"//标签样式\")]), _vm._v(\"\\n backgroundColor: 'blue', \\n }\\n },\\n {\\n src: 'static/img/1-2.jpg',\\n tagName: '我是标签2',\\n tagStyle: {\\n backgroundColor: 'greeen',\\n color: 'black',\\n fontSize: '20px'\\n }\\n },\\n {\\n src: 'static/img/1-3.jpg',\\n tagName: '我是标签2'\\n },\\n {\\n src: 'static/img/1-4.jpg',\\n tagName: '我是标签4'\\n },\\n {\\n src: 'static/img/1-5.jpg',\\n tagName: '我是标签5'\\n },\\n ],\\n interval: 1000,\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"imgStyle\")]), _vm._v(\": {\\n borderRadius: '20px'\\n },\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"autoRoll\")]), _vm._v(\": true,\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"direction\")]), _vm._v(\": 'right'\\n \"), _c('span', {\n staticClass: \"white\"\n }, [_vm._v(\"}\")]), _vm._v(\"\\n \")])])\n},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n staticClass: \"code\"\n }, [_c('pre', [_vm._v(\"\\n \"), _c('span', {\n staticClass: \"white\"\n }, [_vm._v(\"{\")]), _vm._v(\"\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"styleObject\")]), _vm._v(\": {\\n width: '250',\\n height: '150'\\n },\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"image\")]), _vm._v(\": [\\n 'static/img/1-1.jpg', \\n 'static/img/1-2.jpg', \\n 'static/img/1-3.jpg', \\n 'static/img/1-4.jpg', \\n 'static/img/1-5.jpg'],\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"imgStyle\")]), _vm._v(\": {\\n borderRadius: '20px'\\n },\\n \"), _c('span', {\n staticClass: \"keyword\"\n }, [_vm._v(\"autoRoll\")]), _vm._v(\": false,\\n \"), _c('span', {\n staticClass: \"white\"\n }, [_vm._v(\"}\")]), _vm._v(\"\\n \")])])\n}]}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/.11.1.3@vue-loader/lib/template-compiler.js?{\"id\":\"data-v-6ef827f6\"}!./~/.11.1.3@vue-loader/lib/selector.js?type=template&index=0!./src/App.vue\n// module id = 4\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('ul', {\n staticClass: \"slider\",\n style: (_vm.styleObject)\n }, [_vm._l((_vm.image), function(item, index) {\n return _c('li', {\n class: [_vm.move[index]]\n }, [(typeof item === 'object') ? [_c('img', {\n style: (_vm.imgStyle),\n attrs: {\n \"src\": item.src\n },\n on: {\n \"click\": function($event) {\n _vm.target(index)\n }\n }\n }), _vm._v(\" \"), _c('span', {\n class: {\n tag: item.tagName\n },\n style: (item.tagStyle)\n }, [_vm._v(_vm._s(item.tagName))])] : _vm._e(), _vm._v(\" \"), (typeof item === 'string') ? [_c('img', {\n style: (_vm.imgStyle),\n attrs: {\n \"src\": item\n },\n on: {\n \"click\": function($event) {\n _vm.target(index)\n }\n }\n })] : _vm._e()], 2)\n }), _vm._v(\" \"), _c('li', {\n staticClass: \"button\"\n }, _vm._l((_vm.image), function(item, index) {\n return _c('em', {\n class: [_vm.move[index]],\n on: {\n \"click\": function($event) {\n _vm.target(index)\n }\n }\n })\n })), _vm._v(\" \"), _c('li', {\n staticClass: \"control\"\n }, [_c('em', {\n on: {\n \"click\": _vm.prePic\n }\n }), _vm._v(\" \"), _c('em', {\n on: {\n \"click\": _vm.nextPic\n }\n })])], 2)\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/.11.1.3@vue-loader/lib/template-compiler.js?{\"id\":\"data-v-7c4f269e\"}!./~/.11.1.3@vue-loader/lib/selector.js?type=template&index=0!./src/components/Slider.vue\n// module id = 5\n// module chunks = 0","\n\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// App.vue?ee7c00f6","\r\n\r\n\r\n\n\n\n// WEBPACK FOOTER //\n// Slider.vue?25a727e6","// The Vue build version to load with the `import` command\n// (runtime-only or standalone) has been set in webpack.base.conf with an alias.\nimport Vue from 'vue'\nimport App from './App'\n\nVue.config.productionTip = false\n\n/* eslint-disable no-new */\nnew Vue({\n el: '#app',\n template: '',\n components: { App }\n})\n\n\n\n// WEBPACK FOOTER //\n// ./src/main.js"],"sourceRoot":""} -------------------------------------------------------------------------------- /example/static/js/vendor.68042cd39e700b93b0ae.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1,2],[function(e,t){e.exports=function(e,t,n,r){var i,o=e=e||{},a=typeof e.default;"object"!==a&&"function"!==a||(i=e,o=e.default);var s="function"==typeof o?o.options:o;if(t&&(s.render=t.render,s.staticRenderFns=t.staticRenderFns),n&&(s._scopeId=n),r){var c=Object.create(s.computed||null);Object.keys(r).forEach(function(e){var t=r[e];c[e]=function(){return t}}),s.computed=c}return{esModule:i,exports:o,options:s}}},,function(e,t,n){"use strict";(function(e){/*! 2 | * Vue.js v2.2.1 3 | * (c) 2014-2017 Evan You 4 | * Released under the MIT License. 5 | */ 6 | function n(e){return null==e?"":"object"==typeof e?JSON.stringify(e,null,2):String(e)}function r(e){var t=parseFloat(e);return isNaN(t)?e:t}function i(e,t){for(var n=Object.create(null),r=e.split(","),i=0;i-1)return e.splice(n,1)}}function a(e,t){return Ni.call(e,t)}function s(e){return"string"==typeof e||"number"==typeof e}function c(e){var t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}function u(e,t){function n(n){var r=arguments.length;return r?r>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n}function l(e,t){t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function f(e,t){for(var n in t)e[n]=t[n];return e}function p(e){return null!==e&&"object"==typeof e}function d(e){return Ri.call(e)===Ui}function v(e){for(var t={},n=0;n1?l(n):n;for(var r=l(arguments,1),i=0,o=n.length;i=0&&wo[n].id>e.id;)n--;wo.splice(Math.max(n,Ao)+1,0,e)}else wo.push(e);xo||(xo=!0,to(ge))}}function _e(e){To.clear(),be(e,To)}function be(e,t){var n,r,i=Array.isArray(e);if((i||p(e))&&Object.isExtensible(e)){if(e.__ob__){var o=e.__ob__.dep.id;if(t.has(o))return;t.add(o)}if(i)for(n=e.length;n--;)be(e[n],t);else for(r=Object.keys(e),n=r.length;n--;)be(e[r[n]],t)}}function $e(e,t,n){Eo.get=function(){return this[t][n]},Eo.set=function(e){this[t][n]=e},Object.defineProperty(e,n,Eo)}function we(e){e._watchers=[];var t=e.$options;t.props&&Ce(e,t.props),t.methods&&Se(e,t.methods),t.data?xe(e):S(e._data={},!0),t.computed&&ke(e,t.computed),t.watch&&Te(e,t.watch)}function Ce(e,t){var n=e.$options.propsData||{},r=e._props={},i=e.$options._propKeys=[],o=!e.$parent;fo.shouldConvert=o;var a=function(o){i.push(o);var a=F(o,t,n,e);T(r,o,a),o in e||$e(e,"_props",o)};for(var s in t)a(s);fo.shouldConvert=!0}function xe(e){var t=e.$options.data;t=e._data="function"==typeof t?t.call(e):t||{},d(t)||(t={});for(var n=Object.keys(t),r=e.$options.props,i=n.length;i--;)r&&a(r,n[i])||$(n[i])||$e(e,"_data",n[i]);S(t,!0)}function ke(e,t){var n=e._computedWatchers=Object.create(null);for(var r in t){var i=t[r],o="function"==typeof i?i:i.get;n[r]=new So(e,o,h,jo),r in e||Ae(e,r,i)}}function Ae(e,t,n){"function"==typeof n?(Eo.get=Oe(t),Eo.set=h):(Eo.get=n.get?n.cache!==!1?Oe(t):n.get:h,Eo.set=n.set?n.set:h),Object.defineProperty(e,t,Eo)}function Oe(e){return function(){var t=this._computedWatchers&&this._computedWatchers[e];if(t)return t.dirty&&t.evaluate(),ao.target&&t.depend(),t.value}}function Se(e,t){e.$options.props;for(var n in t)e[n]=null==t[n]?h:u(t[n],e)}function Te(e,t){for(var n in t){var r=t[n];if(Array.isArray(r))for(var i=0;i-1:e instanceof RegExp&&e.test(t)}function bt(e,t){for(var n in e){var r=e[n];if(r){var i=yt(r.componentOptions);i&&!t(i)&&($t(r),e[n]=null)}}}function $t(e){e&&(e.componentInstance._inactive||he(e.componentInstance,"deactivated"),e.componentInstance.$destroy())}function wt(e){var t={};t.get=function(){return Hi},Object.defineProperty(e,"config",t),e.util={warn:io,extend:f,mergeOptions:R,defineReactive:T},e.set=E,e.delete=j,e.nextTick=to,e.options=Object.create(null),Hi._assetTypes.forEach(function(t){e.options[t+"s"]=Object.create(null)}),e.options._base=e,f(e.options.components,Uo),pt(e),dt(e),vt(e),gt(e)}function Ct(e){for(var t=e.data,n=e,r=e;r.componentInstance;)r=r.componentInstance._vnode,r.data&&(t=xt(r.data,t));for(;n=n.parent;)n.data&&(t=xt(t,n.data));return kt(t)}function xt(e,t){return{staticClass:At(e.staticClass,t.staticClass),class:e.class?[e.class,t.class]:t.class}}function kt(e){var t=e.class,n=e.staticClass;return n||t?At(n,Ot(t)):""}function At(e,t){return e?t?e+" "+t:e:t||""}function Ot(e){var t="";if(!e)return t;if("string"==typeof e)return e;if(Array.isArray(e)){for(var n,r=0,i=e.length;r-1?ca[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:ca[e]=/HTMLUnknownElement/.test(t.toString())}function Et(e){if("string"==typeof e){var t=document.querySelector(e);return t?t:document.createElement("div")}return e}function jt(e,t){var n=document.createElement(e);return"select"!==e?n:(t.data&&t.data.attrs&&void 0!==t.data.attrs.multiple&&n.setAttribute("multiple","multiple"),n)}function Nt(e,t){return document.createElementNS(ra[e],t)}function It(e){return document.createTextNode(e)}function Mt(e){return document.createComment(e)}function Lt(e,t,n){e.insertBefore(t,n)}function Dt(e,t){e.removeChild(t)}function Pt(e,t){e.appendChild(t)}function Rt(e){return e.parentNode}function Ut(e){return e.nextSibling}function Ft(e){return e.tagName}function Bt(e,t){e.textContent=t}function Ht(e,t,n){e.setAttribute(t,n)}function Vt(e,t){var n=e.data.ref;if(n){var r=e.context,i=e.componentInstance||e.elm,a=r.$refs;t?Array.isArray(a[n])?o(a[n],i):a[n]===i&&(a[n]=void 0):e.data.refInFor?Array.isArray(a[n])&&a[n].indexOf(i)<0?a[n].push(i):a[n]=[i]:a[n]=i}}function zt(e){return null==e}function Jt(e){return null!=e}function qt(e,t){return e.key===t.key&&e.tag===t.tag&&e.isComment===t.isComment&&!e.data==!t.data}function Kt(e,t,n){var r,i,o={};for(r=t;r<=n;++r)i=e[r].key,Jt(i)&&(o[i]=r);return o}function Wt(e){function t(e){return new mo(O.tagName(e).toLowerCase(),{},[],void 0,e)}function n(e,t){function n(){0===--n.listeners&&r(e)}return n.listeners=t,n}function r(e){var t=O.parentNode(e);t&&O.removeChild(t,e)}function o(e,t,n,r,i){if(e.isRootInsert=!i,!a(e,t,n,r)){var o=e.data,s=e.children,c=e.tag;Jt(c)?(e.elm=e.ns?O.createElementNS(e.ns,c):O.createElement(c,e),v(e),f(e,s,t),Jt(o)&&d(e,t),l(n,e.elm,r)):e.isComment?(e.elm=O.createComment(e.text),l(n,e.elm,r)):(e.elm=O.createTextNode(e.text),l(n,e.elm,r))}}function a(e,t,n,r){var i=e.data;if(Jt(i)){var o=Jt(e.componentInstance)&&i.keepAlive;if(Jt(i=i.hook)&&Jt(i=i.init)&&i(e,!1,n,r),Jt(e.componentInstance))return c(e,t),o&&u(e,t,n,r),!0}}function c(e,t){e.data.pendingInsert&&t.push.apply(t,e.data.pendingInsert),e.elm=e.componentInstance.$el,p(e)?(d(e,t),v(e)):(Vt(e),t.push(e))}function u(e,t,n,r){for(var i,o=e;o.componentInstance;)if(o=o.componentInstance._vnode,Jt(i=o.data)&&Jt(i=i.transition)){for(i=0;ip?(u=zt(n[m+1])?null:n[m+1].elm,h(e,u,n,f,m,r)):f>m&&g(e,t,l,p)}function b(e,t,n,r){if(e!==t){if(t.isStatic&&e.isStatic&&t.key===e.key&&(t.isCloned||t.isOnce))return t.elm=e.elm,void(t.componentInstance=e.componentInstance);var i,o=t.data,a=Jt(o);a&&Jt(i=o.hook)&&Jt(i=i.prepatch)&&i(e,t);var s=t.elm=e.elm,c=e.children,u=t.children;if(a&&p(t)){for(i=0;i=0&&(m=e.charAt(h)," "===m);h--);m&&ya.test(m)||(l=!0)}}else void 0===o?(v=i+1,o=e.slice(0,i).trim()):t();if(void 0===o?o=e.slice(0,i).trim():0!==v&&t(),a)for(i=0;i=Fo}function _n(e){return 34===e||39===e}function bn(e){var t=1;for(zo=Vo;!yn();)if(e=gn(),_n(e))$n(e);else if(91===e&&t++,93===e&&t--,0===t){Jo=Vo;break}}function $n(e){for(var t=e;!yn()&&(e=gn(),e!==t););}function wn(e,t,n){qo=n;var r=t.value,i=t.modifiers,o=e.tag,a=e.attrsMap.type;if("select"===o)kn(e,r,i);else if("input"===o&&"checkbox"===a)Cn(e,r,i);else if("input"===o&&"radio"===a)xn(e,r,i);else if("input"===o||"textarea"===o)An(e,r,i);else if(!Hi.isReservedTag(o))return vn(e,r,i),!1;return!0}function Cn(e,t,n){var r=n&&n.number,i=pn(e,"value")||"null",o=pn(e,"true-value")||"true",a=pn(e,"false-value")||"false";cn(e,"checked","Array.isArray("+t+")?_i("+t+","+i+")>-1"+("true"===o?":("+t+")":":_q("+t+","+o+")")),fn(e,ba,"var $$a="+t+",$$el=$event.target,$$c=$$el.checked?("+o+"):("+a+");if(Array.isArray($$a)){var $$v="+(r?"_n("+i+")":i)+",$$i=_i($$a,$$v);if($$c){$$i<0&&("+t+"=$$a.concat($$v))}else{$$i>-1&&("+t+"=$$a.slice(0,$$i).concat($$a.slice($$i+1)))}}else{"+t+"=$$c}",null,!0)}function xn(e,t,n){var r=n&&n.number,i=pn(e,"value")||"null";i=r?"_n("+i+")":i,cn(e,"checked","_q("+t+","+i+")"),fn(e,ba,hn(t,i),null,!0)}function kn(e,t,n){var r=n&&n.number,i='Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = "_value" in o ? o._value : o.value;return '+(r?"_n(val)":"val")+"})",o="var $$selectedVal = "+i+";";o=o+" "+hn(t,"$event.target.multiple ? $$selectedVal : $$selectedVal[0]"),fn(e,"change",o,null,!0)}function An(e,t,n){var r=e.attrsMap.type,i=n||{},o=i.lazy,a=i.number,s=i.trim,c=!o&&"range"!==r,u=o?"change":"range"===r?_a:"input",l="$event.target.value";s&&(l="$event.target.value.trim()"),a&&(l="_n("+l+")");var f=hn(t,l);c&&(f="if($event.target.composing)return;"+f),cn(e,"value","("+t+")"),fn(e,u,f,null,!0),(s||a||"number"===r)&&fn(e,"blur","$forceUpdate()")}function On(e){var t;e[_a]&&(t=qi?"change":"input",e[t]=[].concat(e[_a],e[t]||[]),delete e[_a]),e[ba]&&(t=Yi?"click":"change",e[t]=[].concat(e[ba],e[t]||[]),delete e[ba])}function Sn(e,t,n,r){if(n){var i=t,o=Ko;t=function(n){null!==(1===arguments.length?i(n):i.apply(null,arguments))&&Tn(e,t,r,o)}}Ko.addEventListener(e,t,r)}function Tn(e,t,n,r){(r||Ko).removeEventListener(e,t,n)}function En(e,t){if(e.data.on||t.data.on){var n=t.data.on||{},r=e.data.on||{};Ko=t.elm,On(n),Z(n,r,Sn,Tn,t.context)}}function jn(e,t){if(e.data.domProps||t.data.domProps){var n,r,i=t.elm,o=e.data.domProps||{},a=t.data.domProps||{};a.__ob__&&(a=t.data.domProps=f({},a));for(n in o)null==a[n]&&(i[n]="");for(n in a)if(r=a[n],"textContent"!==n&&"innerHTML"!==n||(t.children&&(t.children.length=0),r!==o[n]))if("value"===n){i._value=r;var s=null==r?"":String(r);Nn(i,t,s)&&(i.value=s)}else i[n]=r}}function Nn(e,t,n){return!e.composing&&("option"===t.tag||In(e,n)||Mn(e,n))}function In(e,t){return document.activeElement!==e&&e.value!==t}function Mn(e,t){var n=e.value,i=e._vModifiers;return i&&i.number||"number"===e.type?r(n)!==r(t):i&&i.trim?n.trim()!==t.trim():n!==t}function Ln(e){var t=Dn(e.style);return e.staticStyle?f(e.staticStyle,t):t}function Dn(e){return Array.isArray(e)?v(e):"string"==typeof e?Ca(e):e}function Pn(e,t){var n,r={};if(t)for(var i=e;i.componentInstance;)i=i.componentInstance._vnode,i.data&&(n=Ln(i.data))&&f(r,n);(n=Ln(e.data))&&f(r,n);for(var o=e;o=o.parent;)o.data&&(n=Ln(o.data))&&f(r,n);return r}function Rn(e,t){var n=t.data,r=e.data;if(n.staticStyle||n.style||r.staticStyle||r.style){var i,o,a=t.elm,s=e.data.staticStyle,c=e.data.style||{},u=s||c,l=Dn(t.data.style)||{};t.data.style=l.__ob__?f({},l):l;var p=Pn(t,!0);for(o in u)null==p[o]&&Aa(a,o,"");for(o in p)i=p[o],i!==u[o]&&Aa(a,o,null==i?"":i)}}function Un(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(/\s+/).forEach(function(t){return e.classList.add(t)}):e.classList.add(t);else{var n=" "+(e.getAttribute("class")||"")+" ";n.indexOf(" "+t+" ")<0&&e.setAttribute("class",(n+t).trim())}}function Fn(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(/\s+/).forEach(function(t){return e.classList.remove(t)}):e.classList.remove(t);else{for(var n=" "+(e.getAttribute("class")||"")+" ",r=" "+t+" ";n.indexOf(r)>=0;)n=n.replace(r," ");e.setAttribute("class",n.trim())}}function Bn(e){if(e){if("object"==typeof e){var t={};return e.css!==!1&&f(t,Ea(e.name||"v")),f(t,e),t}return"string"==typeof e?Ea(e):void 0}}function Hn(e){Ra(function(){Ra(e)})}function Vn(e,t){(e._transitionClasses||(e._transitionClasses=[])).push(t),Un(e,t)}function zn(e,t){e._transitionClasses&&o(e._transitionClasses,t),Fn(e,t)}function Jn(e,t,n){var r=qn(e,t),i=r.type,o=r.timeout,a=r.propCount;if(!i)return n();var s=i===Na?La:Pa,c=0,u=function(){e.removeEventListener(s,l),n()},l=function(t){t.target===e&&++c>=a&&u()};setTimeout(function(){c0&&(n=Na,l=a,f=o.length):t===Ia?u>0&&(n=Ia,l=u,f=c.length):(l=Math.max(a,u),n=l>0?a>u?Na:Ia:null,f=n?n===Na?o.length:c.length:0),{type:n,timeout:l,propCount:f,hasTransform:n===Na&&Ua.test(r[Ma+"Property"])}}function Kn(e,t){for(;e.length1}function Xn(e,t){t.data.show||Zn(t)}function er(e,t,n){var r=t.value,i=e.multiple;if(!i||Array.isArray(r)){for(var o,a,s=0,c=e.options.length;s-1,a.selected!==o&&(a.selected=o);else if(g(nr(a),r))return void(e.selectedIndex!==s&&(e.selectedIndex=s));i||(e.selectedIndex=-1)}}function tr(e,t){for(var n=0,r=t.length;n',n.innerHTML.indexOf(t)>0}function mr(e){return Qa=Qa||document.createElement("div"),Qa.innerHTML=e,Qa.textContent}function gr(e,t){var n=t?Rs:Ps;return e.replace(n,function(e){return Ds[e]})}function yr(e,t){function n(t){f+=t,e=e.substring(t)}function r(){var t=e.match(us);if(t){var r={tagName:t[1],attrs:[],start:f};n(t[0].length);for(var i,o;!(i=e.match(ls))&&(o=e.match(as));)n(o[0].length),r.attrs.push(o);if(i)return r.unarySlash=i[1],n(i[0].length),r.end=f,r}}function i(e){var n=e.tagName,r=e.unarySlash;u&&("p"===s&&ns(n)&&o(s),ts(n)&&s===n&&o(n));for(var i=l(n)||"html"===n&&"head"===s||!!r,a=e.attrs.length,f=new Array(a),p=0;p=0&&c[i].lowerCasedTag!==o;i--);else i=0;if(i>=0){for(var a=c.length-1;a>=i;a--)t.end&&t.end(c[a].tag,n,r);c.length=i,s=i&&c[i-1].tag}else"br"===o?t.start&&t.start(e,[],!0,n,r):"p"===o&&(t.start&&t.start(e,[],!1,n,r),t.end&&t.end(e,n,r))}for(var a,s,c=[],u=t.expectHTML,l=t.isUnaryTag||Fi,f=0;e;){if(a=e,s&&Ms(s)){var p=s.toLowerCase(),d=Ls[p]||(Ls[p]=new RegExp("([\\s\\S]*?)(]*>)","i")),v=0,h=e.replace(d,function(e,n,r){return v=r.length,"script"!==p&&"style"!==p&&"noscript"!==p&&(n=n.replace(//g,"$1").replace(//g,"$1")),t.chars&&t.chars(n),""});f+=e.length-h.length,e=h,o(p,f-v,f)}else{var m=e.indexOf("<");if(0===m){if(ds.test(e)){var g=e.indexOf("-->");if(g>=0){n(g+3);continue}}if(vs.test(e)){var y=e.indexOf("]>");if(y>=0){n(y+2);continue}}var _=e.match(ps);if(_){n(_[0].length);continue}var b=e.match(fs);if(b){var $=f;n(b[0].length),o(b[1],$,f);continue}var w=r();if(w){i(w);continue}}var C=void 0,x=void 0,k=void 0;if(m>=0){for(x=e.slice(m);!(fs.test(x)||us.test(x)||ds.test(x)||vs.test(x))&&(k=x.indexOf("<",1),!(k<0));)m+=k,x=e.slice(m);C=e.substring(0,m),n(m)}m<0&&(C=e,e=""),t.chars&&C&&t.chars(C)}if(e===a){t.chars&&t.chars(e);break}}o()}function _r(e,t){var n=t?Bs(t):Us;if(n.test(e)){for(var r,i,o=[],a=n.lastIndex=0;r=n.exec(e);){i=r.index,i>a&&o.push(JSON.stringify(e.slice(a,i)));var s=rn(r[1].trim());o.push("_s("+s+")"),a=i+r[0].length}return a0,Wi=Ji&&Ji.indexOf("edge/")>0,Zi=Ji&&Ji.indexOf("android")>0,Gi=Ji&&/iphone|ipad|ipod|ios/.test(Ji),Yi=Ji&&/chrome\/\d+/.test(Ji)&&!Wi,Qi=function(){return void 0===Ti&&(Ti=!zi&&void 0!==e&&"server"===e.process.env.VUE_ENV),Ti},Xi=zi&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__,eo="undefined"!=typeof Symbol&&b(Symbol)&&"undefined"!=typeof Reflect&&b(Reflect.ownKeys),to=function(){function e(){r=!1;var e=n.slice(0);n.length=0;for(var t=0;t1&&(t[n[0].trim()]=n[1].trim())}}),t}),xa=/^--/,ka=/\s*!important$/,Aa=function(e,t,n){xa.test(t)?e.style.setProperty(t,n):ka.test(n)?e.style.setProperty(t,n.replace(ka,""),"important"):e.style[Sa(t)]=n},Oa=["Webkit","Moz","ms"],Sa=c(function(e){if(Wo=Wo||document.createElement("div"),e=Mi(e),"filter"!==e&&e in Wo.style)return e;for(var t=e.charAt(0).toUpperCase()+e.slice(1),n=0;n\/=]+)/,is=/(?:=)/,os=[/"([^"]*)"+/.source,/'([^']*)'+/.source,/([^\s"'=<>`]+)/.source],as=new RegExp("^\\s*"+rs.source+"(?:\\s*("+is.source+")\\s*(?:"+os.join("|")+"))?"),ss="[a-zA-Z_][\\w\\-\\.]*",cs="((?:"+ss+"\\:)?"+ss+")",us=new RegExp("^<"+cs),ls=/^\s*(\/?)>/,fs=new RegExp("^<\\/"+cs+"[^>]*>"),ps=/^]+>/i,ds=/^