├── config ├── prod.env.js ├── test.env.js ├── dev.env.js └── index.js ├── .babelrc ├── .gitignore ├── test └── unit │ ├── .eslintrc │ ├── index.js │ ├── specs │ └── Carousel.spec.js │ └── karma.conf.js ├── debug.log ├── .editorconfig ├── example ├── main.js ├── index.html └── App.vue ├── docs ├── index.html └── app.js ├── src ├── style.less └── index.js ├── LICENSE ├── package.json ├── README.md └── dist └── index.js /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-vue-jsx"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | selenium-debug.log 5 | test/unit/coverage 6 | test/e2e/reports 7 | -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "globals": { 6 | "expect": true, 7 | "sinon": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /debug.log: -------------------------------------------------------------------------------- 1 | [0204/121136:ERROR:tcp_listen_socket.cc(76)] Could not bind socket to 127.0.0.1:6004 2 | [0204/121136:ERROR:node_debugger.cc(86)] Cannot start debugger server 3 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /example/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | /* eslint-disable no-new */ 5 | new Vue({ 6 | el: '#app', 7 | render (h) { 8 | return h(App) 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | vue
-------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /test/unit/index.js: -------------------------------------------------------------------------------- 1 | // Polyfill fn.bind() for PhantomJS 2 | /* eslint-disable no-extend-native */ 3 | Function.prototype.bind = require('function-bind') 4 | 5 | // require all test files (files that ends with .spec.js) 6 | var testsContext = require.context('./specs', true, /\.spec$/) 7 | testsContext.keys().forEach(testsContext) 8 | 9 | // require all src files except main.js for coverage. 10 | // you can also change this to match only the subset of files that 11 | // you want coverage for. 12 | var srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/) 13 | srcContext.keys().forEach(srcContext) 14 | -------------------------------------------------------------------------------- /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 | assetsRoot: path.resolve(__dirname, '../dist'), 8 | assetsSubDirectory: 'static', 9 | assetsPublicPath: '/', 10 | productionSourceMap: false, 11 | // Gzip off by default as many popular static hosts such as 12 | // Surge or Netlify already gzip all static assets for you. 13 | // Before setting to `true`, make sure to: 14 | // npm install --save-dev compression-webpack-plugin 15 | productionGzip: false, 16 | productionGzipExtensions: ['js', 'css'] 17 | }, 18 | dev: { 19 | index: path.resolve(__dirname, '../example/index.html'), 20 | env: require('./dev.env'), 21 | port: 8081, 22 | proxyTable: {} 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/style.less: -------------------------------------------------------------------------------- 1 | .carousel { 2 | box-sizing: content-box; 3 | width: 100%; 4 | overflow: hidden; 5 | position: relative; 6 | &-track { 7 | height: 100%; 8 | min-width: 100%; 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | white-space: nowrap; 13 | display: table-cell; 14 | font-size: 0; 15 | } 16 | &-item { 17 | width: 100vw; 18 | height: 100%; 19 | overflow: hidden; 20 | display: inline-block; 21 | font-size: 16px; 22 | } 23 | &-indicators { 24 | position: absolute; 25 | height: 0; 26 | bottom: 40px; 27 | left: 0; 28 | width: 100%; 29 | text-align: center; 30 | } 31 | &-dot { 32 | display: inline-block; 33 | width: 20px; 34 | height: 20px; 35 | margin: 10px; 36 | background: rgba(0, 0, 0, 0.5); 37 | &.active { 38 | background: red; 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 十叶 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/App.vue: -------------------------------------------------------------------------------- 1 | 13 | 38 | 52 | -------------------------------------------------------------------------------- /test/unit/specs/Carousel.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import { Carousel, CarouselItem } from 'src/index' 3 | 4 | describe('Carousel.vue', () => { 5 | it('should have right indicators', () => { 6 | const vm = new Vue({ 7 | template: '
carousel-item-0carousel-item-1carousel-item-2carousel-item-3
', 8 | components: { Carousel, CarouselItem } 9 | }).$mount() 10 | expect(vm.$el.querySelectorAll('.carousel-dot')).to.have.length(4); 11 | }) 12 | 13 | // it('should have right item number when auto', () => { 14 | // const vm = new Vue({ 15 | // template: '
carousel-item-0carousel-item-1carousel-item-2carousel-item-3
', 16 | // components: { Carousel, CarouselItem } 17 | // }).$mount() 18 | // expect(vm.$el.querySelectorAll('.carousel-item')).to.have.length(6); 19 | // }) 20 | // it('should have right item number when unauto', () => { 21 | // const vm = new Vue({ 22 | // template: '
carousel-item-0carousel-item-1carousel-item-2carousel-item-3
', 23 | // components: { Carousel, CarouselItem } 24 | // }).$mount() 25 | // expect(vm.$el.querySelectorAll('.carousel-item')).to.have.length(4); 26 | // }) 27 | }) 28 | -------------------------------------------------------------------------------- /test/unit/karma.conf.js: -------------------------------------------------------------------------------- 1 | // This is a karma config file. For more details see 2 | // http://karma-runner.github.io/0.13/config/configuration-file.html 3 | // we are also using it with karma-webpack 4 | // https://github.com/webpack/karma-webpack 5 | 6 | var path = require('path') 7 | var merge = require('webpack-merge') 8 | var baseConfig = require('../../build/webpack.base.conf') 9 | var utils = require('../../build/utils') 10 | var webpack = require('webpack') 11 | var projectRoot = path.resolve(__dirname, '../../') 12 | 13 | var webpackConfig = merge(baseConfig, { 14 | // use inline sourcemap for karma-sourcemap-loader 15 | module: { 16 | loaders: utils.styleLoaders() 17 | }, 18 | devtool: '#inline-source-map', 19 | vue: { 20 | loaders: { 21 | js: 'isparta' 22 | } 23 | }, 24 | plugins: [ 25 | new webpack.DefinePlugin({ 26 | 'process.env': require('../../config/test.env') 27 | }) 28 | ] 29 | }) 30 | 31 | // no need for app entry during tests 32 | delete webpackConfig.entry 33 | 34 | // make sure isparta loader is applied before eslint 35 | webpackConfig.module.preLoaders = webpackConfig.module.preLoaders || [] 36 | webpackConfig.module.preLoaders.unshift({ 37 | test: /\.js$/, 38 | loader: 'isparta', 39 | include: path.resolve(projectRoot, 'src') 40 | }) 41 | 42 | // only apply babel for test files when using isparta 43 | webpackConfig.module.loaders.some(function (loader, i) { 44 | if (loader.loader === 'babel') { 45 | loader.include = path.resolve(projectRoot, 'test/unit') 46 | return true 47 | } 48 | }) 49 | 50 | module.exports = function (config) { 51 | config.set({ 52 | // to run in additional browsers: 53 | // 1. install corresponding karma launcher 54 | // http://karma-runner.github.io/0.13/config/browsers.html 55 | // 2. add it to the `browsers` array below. 56 | browsers: ['PhantomJS'], 57 | frameworks: ['mocha', 'sinon-chai'], 58 | reporters: ['spec', 'coverage'], 59 | files: ['./index.js'], 60 | preprocessors: { 61 | './index.js': ['webpack', 'sourcemap'] 62 | }, 63 | webpack: webpackConfig, 64 | webpackMiddleware: { 65 | noInfo: true 66 | }, 67 | coverageReporter: { 68 | dir: './coverage', 69 | reporters: [ 70 | { type: 'lcov', subdir: '.' }, 71 | { type: 'text-summary' } 72 | ] 73 | } 74 | }) 75 | } 76 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-m-carousel", 3 | "version": "2.0.1", 4 | "description": "A Vue.js carousel component", 5 | "main": "dist/index.js", 6 | "author": "shiye515 ", 7 | "homepage": "https://github.com/shiye515/vue-m-carousel", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/shiye515/vue-m-carousel.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/shiye515/vue-m-carousel/issues" 14 | }, 15 | "keywords": [ 16 | "vue", 17 | "vue-component", 18 | "carousel", 19 | "slider" 20 | ], 21 | "scripts": { 22 | "dev": "node build/dev-server.js", 23 | "docs": "node build/build-docs.js", 24 | "build": "node build/build.js", 25 | "unit": "karma start test/unit/karma.conf.js --single-run", 26 | "test": "npm run unit", 27 | "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" 28 | }, 29 | "dependencies": { 30 | "less": "^2.7.2", 31 | "less-loader": "^2.2.3", 32 | "vue": "^2.1.10" 33 | }, 34 | "devDependencies": { 35 | "babel-core": "^6.0.0", 36 | "babel-loader": "^6.0.0", 37 | "babel-plugin-transform-runtime": "^6.23.0", 38 | "babel-plugin-transform-vue-jsx": "^3.5.0", 39 | "babel-preset-es2015": "^6.0.0", 40 | "babel-preset-stage-2": "^6.0.0", 41 | "chai": "^3.5.0", 42 | "connect-history-api-fallback": "^1.1.0", 43 | "css-loader": "^0.23.0", 44 | "eventsource-polyfill": "^0.9.6", 45 | "express": "^4.13.3", 46 | "extract-text-webpack-plugin": "^1.0.1", 47 | "file-loader": "^0.8.4", 48 | "function-bind": "^1.0.2", 49 | "html-webpack-plugin": "^2.8.1", 50 | "http-proxy-middleware": "^0.12.0", 51 | "inject-loader": "^2.0.1", 52 | "isparta-loader": "^2.0.0", 53 | "json-loader": "^0.5.4", 54 | "karma": "^0.13.15", 55 | "karma-coverage": "^0.5.5", 56 | "karma-mocha": "^0.2.2", 57 | "karma-phantomjs-launcher": "^1.0.0", 58 | "karma-sinon-chai": "^1.2.0", 59 | "karma-sourcemap-loader": "^0.3.7", 60 | "karma-spec-reporter": "0.0.24", 61 | "karma-webpack": "^1.7.0", 62 | "less": "^2.7.1", 63 | "less-loader": "^2.2.3", 64 | "lolex": "^1.4.0", 65 | "mocha": "^2.4.5", 66 | "ora": "^0.2.0", 67 | "phantomjs-prebuilt": "^2.1.3", 68 | "shelljs": "^0.6.0", 69 | "sinon": "^1.17.3", 70 | "sinon-chai": "^2.8.0", 71 | "style-loader": "^0.13.1", 72 | "url-loader": "^0.5.7", 73 | "vue-hot-reload-api": "^1.2.0", 74 | "vue-html-loader": "^1.0.0", 75 | "vue-loader": "^8.3.0", 76 | "vue-style-loader": "^1.0.0", 77 | "webpack": "^1.12.2", 78 | "webpack-dev-middleware": "^1.4.0", 79 | "webpack-hot-middleware": "^2.6.0", 80 | "webpack-merge": "^0.8.3" 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-m-carousel 2 | vue 移动端轮播组件 [live demo](https://shiye515.github.io/vue-m-carousel/) 3 | 4 | [1.0 branch](https://github.com/shiye515/vue-m-carousel/tree/1.0) 5 | 6 | [![NPM version][npm-image]][npm-url] 7 | [![npm download][download-image]][download-url] 8 | 9 | [npm-image]: http://img.shields.io/npm/v/vue-m-carousel.svg?style=flat-square 10 | [npm-url]: http://npmjs.org/package/vue-m-carousel 11 | [download-image]: https://img.shields.io/npm/dm/vue-m-carousel.svg?style=flat-square 12 | [download-url]: https://npmjs.org/package/vue-m-carousel 13 | 14 | ##简介（Intro） 15 | 16 | - 移动端高性能轮播组件，体积只有 8.82 kB 17 | - 除了vue之外不依赖其他库 18 | - 动画通过 transform 和 translate 实现，布局通过flex实现 19 | - 支持响应式布局，也支持固定布局 20 | - 提供动画结束的回调 21 | 22 | ## install 23 | 24 | [![vue-m-carousel](https://nodei.co/npm/vue-m-carousel.png)](https://npmjs.org/package/vue-m-carousel) 25 | 26 | `npm install vue-m-carousel` 27 | 28 | ## 用法 29 | ```html 30 | 31 |
carousel-item-{{i-1}}
32 | 33 | ``` 34 | 35 | ```javascript 36 | import Carousel from 'vue-m-carousel' 37 | export default { 38 | components: { 39 | Carousel 40 | } 41 | } 42 | ``` 43 | 44 | ## API（跟1.0版本一致） 45 | 46 | ### props 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 |
nametypedefaultdescription
loopBooleantrue是否循环播放
autoNumber3000是否自动播放，0不自动播放，其他值则自动播放，值为其自动播放的interval
indicatorsBooleanfalse是否添加屏点，不带任何样式，样式可参考demo写
responsiveNumber40是否开启响应式高度，若为0则不开启，其他正整数表示 高度是宽度的百分之多少
flickThresholdNumber0.6轻弹的最小速度
deltaNumber100滚动时触发滚动到下一张的最小值
onSlidEndFunctionnoop轮播切换完成时的回调
preventDefaultBooleanfalse取消touchmove事件的默认动作
108 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './style.less' 2 | let defaultDuration = 300 3 | export default { 4 | props: { 5 | loop: { 6 | type: Boolean, 7 | default: true 8 | }, 9 | auto: { 10 | type: Number, 11 | default: 3000 12 | }, 13 | indicators: { 14 | type: Boolean, 15 | default: false 16 | }, 17 | responsive: { 18 | type: Number, 19 | default: 40 20 | }, 21 | flickThreshold: { 22 | type: Number, 23 | default: 0.6 24 | }, 25 | delta: { 26 | type: Number, 27 | default: 100 28 | }, 29 | onSlidEnd: { 30 | type: Function, 31 | default: i => 0 32 | }, 33 | preventDefault: { 34 | type: Boolean, 35 | default: false 36 | } 37 | }, 38 | data () { 39 | return { 40 | childrenCount: 0, 41 | touch: false, 42 | timer: 0, 43 | activeIndex: 0, 44 | trackStyle: { 45 | transform: 'translate(0px, 0px) translateZ(0px)', 46 | transitionDuration: 0 47 | }, 48 | transitionDuration: 0, 49 | width: '100vw' 50 | } 51 | }, 52 | computed: { 53 | computedAuto () { 54 | return this.auto && this.childrenCount > 1 55 | }, 56 | computedLoop () { 57 | return this.$slots.default.length > 1 ? this.loop : false 58 | } 59 | }, 60 | methods: { 61 | setHelperDOM () { 62 | let len = this.$slots.default.length 63 | if (len > 1 && this.loop) { 64 | this.addonBefore = this.list[len - 1].$el.outerHTML 65 | this.addonAfter = this.list[0].$el.outerHTML 66 | } 67 | }, 68 | slid (index, delta) { 69 | let { 70 | computedLoop, 71 | width, 72 | transitionDuration, 73 | $slots 74 | } = this 75 | let len = $slots.default.length 76 | if (len === 0) { 77 | return 78 | } 79 | if (!computedLoop) { 80 | index = (index + len) % len 81 | } 82 | let translateX = -width * (index + (computedLoop ? 1 : 0)) - delta 83 | this.trackStyle = { 84 | transform: 'translate(' + translateX + 'px, 0px) translateZ(0px) translate3d(0, 0, 0)', 85 | transitionDuration: transitionDuration + 'ms', 86 | '-webkit-backface-visibility': 'hidden' 87 | } 88 | this.activeIndex = (index + len) % len 89 | if (transitionDuration > 0 && computedLoop && (this.activeIndex === 0 || this.activeIndex === len - 1)) { 90 | setTimeout(this.correctIndex, transitionDuration) 91 | } 92 | if (transitionDuration > 0) { 93 | this.onSlidEnd(this.activeIndex) 94 | } 95 | }, 96 | correctIndex () { 97 | this.transitionDuration = 0 98 | this.slid(this.activeIndex, 0) 99 | }, 100 | calculatePos (e) { 101 | let x = e.changedTouches[0].clientX 102 | let y = e.changedTouches[0].clientY 103 | let xd = this.x - x 104 | let yd = this.y - y 105 | let axd = Math.abs(xd) 106 | let ayd = Math.abs(yd) 107 | return { 108 | deltaX: xd, 109 | deltaY: yd, 110 | absX: axd, 111 | absY: ayd 112 | } 113 | }, 114 | setTimer () { 115 | let { auto, $slots } = this 116 | let len = $slots.default.length 117 | if (auto && len > 1) { 118 | this.timer = setInterval(() => { 119 | this.transitionTo(this.activeIndex + 1) 120 | }, auto) 121 | } 122 | }, 123 | clearTimer () { 124 | if (this.timer) { 125 | clearInterval(this.timer) 126 | } 127 | }, 128 | transitionTo (index, duration) { 129 | this.clearTimer() 130 | this.transitionDuration = duration || defaultDuration 131 | this.slid(index, 0) 132 | this.setTimer() 133 | }, 134 | onTouchstart (e) { 135 | if (e.touches.length > 1) { 136 | return 137 | } 138 | if (this.$slots.default.length === 1) { 139 | this.touch = false 140 | return 141 | } 142 | this.touch = true 143 | this.transitionDuration = 0 144 | this.start = Date.now() 145 | this.x = e.touches[0].clientX 146 | this.y = e.touches[0].clientY 147 | this.clearTimer() 148 | }, 149 | onTouchmove (e) { 150 | if (this.preventDefault) { 151 | e.preventDefault() 152 | } 153 | if (!this.touch) { 154 | return 155 | } 156 | let pos = this.calculatePos(e) 157 | if (pos.absX > pos.absY) { 158 | e.preventDefault() 159 | this.slid(this.activeIndex, pos.deltaX) 160 | } 161 | }, 162 | onTouchend (e) { 163 | if (!this.touch) { 164 | return 165 | } 166 | let {loop, $slots, start, flickThreshold, delta, activeIndex} = this 167 | let pos = this.calculatePos(e) 168 | let time = Date.now() - start 169 | let velocity = Math.sqrt(pos.absX * pos.absX + pos.absY * pos.absY) / time 170 | let isFlick = velocity > flickThreshold 171 | let newIndex = activeIndex 172 | if (isFlick || pos.absX > delta) { 173 | newIndex = newIndex + pos.absX / pos.deltaX 174 | if (!loop) { 175 | newIndex = Math.max(Math.min(newIndex, $slots.default.length - 1), 0) 176 | } 177 | } 178 | this.transitionTo(newIndex) 179 | this.cleanTouch() 180 | }, 181 | onTouchcancel (e) { 182 | if (!this.touch) { 183 | return 184 | } 185 | this.transitionTo(this.activeIndex) 186 | this.cleanTouch() 187 | }, 188 | cleanTouch () { 189 | this.touch = false 190 | }, 191 | resize () { 192 | this.$nextTick(function afterResize () { 193 | this.width = this.$el.clientWidth 194 | this.slid(this.activeIndex, 0) 195 | }, this) 196 | } 197 | }, 198 | watch: { 199 | computedAuto () { 200 | this.setTimer() 201 | } 202 | }, 203 | render (h) { 204 | let {computedLoop, $slots} = this 205 | let len = $slots.default.length - 1 206 | 207 | let indicators = this.indicators && ( 208 |
209 | {this.$slots.default.map((v, i) => { 210 | let classname = {'carousel-dot': true, 'active': i === this.activeIndex} 211 | return
{i}
212 | })} 213 |
214 | ) 215 | 216 | let style = {} 217 | if (this.responsive !== 0) { 218 | style.height = '0' 219 | style.paddingBottom = this.responsive + '%' 220 | } 221 | let itemStyle = { 222 | width: this.width + (typeof this.width === 'number' ? 'px' : '') 223 | } 224 | return ( 225 |
226 |
234 | {computedLoop 235 | ?
{this.$slots.default[len]}
236 | : null 237 | } 238 | {this.$slots.default.map(v =>
{v}
)} 239 | {computedLoop ?
{this.$slots.default[0]}
: null} 240 |
241 | {indicators} 242 |
243 | ) 244 | }, 245 | mounted () { 246 | this.childrenCount = this.$slots.default.length 247 | // 保证 this.$el 已经插入文档 248 | this.$nextTick(() => { 249 | this.resize() 250 | window.addEventListener('resize', this.resize) 251 | this.setTimer() 252 | }) 253 | document.addEventListener('visibilitychange', e => { 254 | let timer = document.hidden ? this.clearTimer : this.setTimer 255 | timer() 256 | }) 257 | }, 258 | updated () { 259 | this.childrenCount = this.$slots.default.length 260 | }, 261 | beforeDestroy () { 262 | window.removeEventListener('resize', this.resize) 263 | this.clearTimer() 264 | } 265 | } 266 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["vue-m-carousel"]=e():t["vue-m-carousel"]=e()}(this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var s=i[n]={exports:{},id:n,loaded:!1};return t[n].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),i(4);var n=300;e.default={props:{loop:{type:Boolean,default:!0},auto:{type:Number,default:3e3},indicators:{type:Boolean,default:!1},responsive:{type:Number,default:40},flickThreshold:{type:Number,default:.6},delta:{type:Number,default:100},onSlidEnd:{type:Function,default:function(t){return 0}},preventDefault:{type:Boolean,default:!1}},data:function(){return{childrenCount:0,touch:!1,timer:0,activeIndex:0,trackStyle:{transform:"translate(0px, 0px) translateZ(0px)",transitionDuration:0},transitionDuration:0,width:"100vw"}},computed:{computedAuto:function(){return this.auto&&this.childrenCount>1},computedLoop:function(){return this.$slots.default.length>1&&this.loop}},methods:{setHelperDOM:function(){var t=this.$slots.default.length;t>1&&this.loop&&(this.addonBefore=this.list[t-1].$el.outerHTML,this.addonAfter=this.list[0].$el.outerHTML)},slid:function(t,e){var i=this.computedLoop,n=this.width,s=this.transitionDuration,o=this.$slots,r=o.default.length;if(0!==r){i||(t=(t+r)%r);var a=-n*(t+(i?1:0))-e;this.trackStyle={transform:"translate("+a+"px, 0px) translateZ(0px) translate3d(0, 0, 0)",transitionDuration:s+"ms","-webkit-backface-visibility":"hidden"},this.activeIndex=(t+r)%r,s>0&&i&&(0===this.activeIndex||this.activeIndex===r-1)&&setTimeout(this.correctIndex,s),s>0&&this.onSlidEnd(this.activeIndex)}},correctIndex:function(){this.transitionDuration=0,this.slid(this.activeIndex,0)},calculatePos:function(t){var e=t.changedTouches[0].clientX,i=t.changedTouches[0].clientY,n=this.x-e,s=this.y-i,o=Math.abs(n),r=Math.abs(s);return{deltaX:n,deltaY:s,absX:o,absY:r}},setTimer:function(){var t=this,e=this.auto,i=this.$slots,n=i.default.length;e&&n>1&&(this.timer=setInterval(function(){t.transitionTo(t.activeIndex+1)},e))},clearTimer:function(){this.timer&&clearInterval(this.timer)},transitionTo:function(t,e){this.clearTimer(),this.transitionDuration=e||n,this.slid(t,0),this.setTimer()},onTouchstart:function(t){if(!(t.touches.length>1)){if(1===this.$slots.default.length)return void(this.touch=!1);this.touch=!0,this.transitionDuration=0,this.start=Date.now(),this.x=t.touches[0].clientX,this.y=t.touches[0].clientY,this.clearTimer()}},onTouchmove:function(t){if(this.preventDefault&&t.preventDefault(),this.touch){var e=this.calculatePos(t);e.absX>e.absY&&(t.preventDefault(),this.slid(this.activeIndex,e.deltaX))}},onTouchend:function(t){if(this.touch){var e=this.loop,i=this.$slots,n=this.start,s=this.flickThreshold,o=this.delta,r=this.activeIndex,a=this.calculatePos(t),u=Date.now()-n,c=Math.sqrt(a.absX*a.absX+a.absY*a.absY)/u,l=c>s,h=r;(l||a.absX>o)&&(h+=a.absX/a.deltaX,e||(h=Math.max(Math.min(h,i.default.length-1),0))),this.transitionTo(h),this.cleanTouch()}},onTouchcancel:function(t){this.touch&&(this.transitionTo(this.activeIndex),this.cleanTouch())},cleanTouch:function(){this.touch=!1},resize:function(){this.$nextTick(function(){this.width=this.$el.clientWidth,this.slid(this.activeIndex,0)},this)}},watch:{computedAuto:function(){this.setTimer()}},render:function(t){var e=this,i=this.computedLoop,s=this.$slots,o=s.default.length-1,r=this.indicators&&t("div",{class:"carousel-indicators"},[this.$slots.default.map(function(i,s){var o={"carousel-dot":!0,active:s===e.activeIndex};return t("div",{class:o,on:{click:e.transitionTo.bind(e,s,n)}},[s])})]),a={};0!==this.responsive&&(a.height="0",a.paddingBottom=this.responsive+"%");var u={width:this.width+("number"==typeof this.width?"px":"")};return t("div",{class:"carousel",style:a},[t("div",{class:"carousel-track",style:this.trackStyle,on:{touchstart:this.onTouchstart,touchmove:this.onTouchmove,touchend:this.onTouchend,touchcancel:this.onTouchcancel}},[i?t("div",{class:"carousel-item",style:u},[this.$slots.default[o]]):null,this.$slots.default.map(function(e){return t("div",{class:"carousel-item",style:u},[e])}),i?t("div",{class:"carousel-item",style:u},[this.$slots.default[0]]):null]),r])},mounted:function(){var t=this;this.childrenCount=this.$slots.default.length,this.$nextTick(function(){t.resize(),window.addEventListener("resize",t.resize),t.setTimer()}),document.addEventListener("visibilitychange",function(e){var i=document.hidden?t.clearTimer:t.setTimer;i()})},updated:function(){this.childrenCount=this.$slots.default.length},beforeDestroy:function(){window.removeEventListener("resize",this.resize),this.clearTimer()}}},function(t,e,i){e=t.exports=i(2)(),e.push([t.id,".carousel{box-sizing:content-box;width:100%;overflow:hidden;position:relative}.carousel-track{height:100%;min-width:100%;position:absolute;top:0;left:0;white-space:nowrap;display:table-cell;font-size:0}.carousel-item{width:100vw;height:100%;overflow:hidden;display:inline-block;font-size:16px}.carousel-indicators{position:absolute;height:0;bottom:40px;left:0;width:100%;text-align:center}.carousel-dot{display:inline-block;width:20px;height:20px;margin:10px;background:rgba(0,0,0,.5)}.carousel-dot.active{background:red}",""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e=0&&y.splice(e,1)}function a(t){var e=document.createElement("style");return e.type="text/css",o(t,e),e}function u(t){var e=document.createElement("link");return e.rel="stylesheet",o(t,e),e}function c(t,e){var i,n,s;if(e.singleton){var o=x++;i=b||(b=a(e)),n=l.bind(null,i,o,!1),s=l.bind(null,i,o,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(i=u(e),n=d.bind(null,i),s=function(){r(i),i.href&&URL.revokeObjectURL(i.href)}):(i=a(e),n=h.bind(null,i),s=function(){r(i)});return n(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;n(t=e)}else s()}}function l(t,e,i,n){var s=i?"":n.css;if(t.styleSheet)t.styleSheet.cssText=g(e,s);else{var o=document.createTextNode(s),r=t.childNodes;r[e]&&t.removeChild(r[e]),r.length?t.insertBefore(o,r[e]):t.appendChild(o)}}function h(t,e){var i=e.css,n=e.media;if(n&&t.setAttribute("media",n),t.styleSheet)t.styleSheet.cssText=i;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(i))}}function d(t,e){var i=e.css,n=e.sourceMap;n&&(i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */");var s=new Blob([i],{type:"text/css"}),o=t.href;t.href=URL.createObjectURL(s),o&&URL.revokeObjectURL(o)}var f={},p=function(t){var e;return function(){return"undefined"==typeof e&&(e=t.apply(this,arguments)),e}},v=p(function(){return/msie [6-9]\b/.test(self.navigator.userAgent.toLowerCase())}),m=p(function(){return document.head||document.getElementsByTagName("head")[0]}),b=null,x=0,y=[];t.exports=function(t,e){e=e||{},"undefined"==typeof e.singleton&&(e.singleton=v()),"undefined"==typeof e.insertAt&&(e.insertAt="bottom");var i=s(t);return n(i,e),function(t){for(var o=[],r=0;r=0&&t._disposeHandlers.splice(n,1)},check:s,apply:f,status:function(e){return e?void x.push(e):$},addStatusHandler:function(e){x.push(e)},removeStatusHandler:function(e){var t=x.indexOf(e);t>=0&&x.splice(t,1)},data:_[e]};return t}function o(e){$=e;for(var t=0;t0;){var o=r.pop(),e=S[o];if(e&&!e.hot._selfAccepted){if(e.hot._selfDeclined)return new Error("Aborted because of self decline: "+o);if(0===o)return;for(var a=0;a=0||(c.hot._acceptedDependencies[o]?(n[s]||(n[s]=[]),i(n[s],[o])):(delete n[s],t.push(s),r.push(s)))}}}return[t,n]}function i(e,t){for(var n=0;n0;){var f=g.pop(),x=S[f];if(x){for(var C={},k=x.hot._disposeHandlers,A=0;A=0&&T.parents.splice(j,1)}}}}for(var f in s)if(Object.prototype.hasOwnProperty.call(s,f))for(var x=S[f],E=s[f],A=0;A=0&&x.children.splice(j,1)}o("apply"),b=y;for(var f in u)Object.prototype.hasOwnProperty.call(u,f)&&(e[f]=u[f]);var I=null;for(var f in s)if(Object.prototype.hasOwnProperty.call(s,f)){for(var x=S[f],E=s[f],N=[],h=0;h=0||N.push(O)}for(var h=0;h=0&&y.splice(t,1)}function s(e){var t=document.createElement("style");return t.type="text/css",o(e,t),t}function c(e,t){var n,r,i;if(t.singleton){var o=m++;n=h||(h=s(t)),r=u.bind(null,n,o,!1),i=u.bind(null,n,o,!0)}else n=s(t),r=l.bind(null,n),i=function(){a(n)};return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else i()}}function u(e,t,n,r){var i=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=g(t,i);else{var o=document.createTextNode(i),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(o,a[t]):e.appendChild(o)}}function l(e,t){var n=t.css,r=t.media,i=t.sourceMap;if(r&&e.setAttribute("media",r),i&&(n+="\n/*# sourceURL="+i.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */"),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}var f={},d=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},p=d(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),v=d(function(){return document.head||document.getElementsByTagName("head")[0]}),h=null,m=0,y=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=p()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var n=i(e);return r(n,t),function(e){for(var o=[],a=0;a1},computedLoop:function(){return this.$slots.default.length>1&&this.loop}},methods:{setHelperDOM:function(){var e=this.$slots.default.length;e>1&&this.loop&&(this.addonBefore=this.list[e-1].$el.outerHTML,this.addonAfter=this.list[0].$el.outerHTML)},slid:function(e,t){var n=this.computedLoop,r=this.width,i=this.transitionDuration,o=this.$slots,a=o.default.length;if(0!==a){n||(e=(e+a)%a);var s=-r*(e+(n?1:0))-t;this.trackStyle={transform:"translate("+s+"px, 0px) translateZ(0px) translate3d(0, 0, 0)",transitionDuration:i+"ms","-webkit-backface-visibility":"hidden"},this.activeIndex=(e+a)%a,i>0&&n&&(0===this.activeIndex||this.activeIndex===a-1)&&setTimeout(this.correctIndex,i),i>0&&this.onSlidEnd(this.activeIndex)}},correctIndex:function(){this.transitionDuration=0,this.slid(this.activeIndex,0)},calculatePos:function(e){var t=e.changedTouches[0].clientX,n=e.changedTouches[0].clientY,r=this.x-t,i=this.y-n,o=Math.abs(r),a=Math.abs(i);return{deltaX:r,deltaY:i,absX:o,absY:a}},setTimer:function(){var e=this,t=this.auto,n=this.$slots,r=n.default.length;t&&r>1&&(this.timer=setInterval(function(){e.transitionTo(e.activeIndex+1)},t))},clearTimer:function(){this.timer&&clearInterval(this.timer)},transitionTo:function(e,t){this.clearTimer(),this.transitionDuration=t||r,this.slid(e,0),this.setTimer()},onTouchstart:function(e){if(!(e.touches.length>1)){if(1===this.$slots.default.length)return void(this.touch=!1);this.touch=!0,this.transitionDuration=0,this.start=Date.now(),this.x=e.touches[0].clientX,this.y=e.touches[0].clientY,this.clearTimer()}},onTouchmove:function(e){if(this.preventDefault&&e.preventDefault(),this.touch){var t=this.calculatePos(e);t.absX>t.absY&&(e.preventDefault(),this.slid(this.activeIndex,t.deltaX))}},onTouchend:function(e){if(this.touch){var t=this.loop,n=this.$slots,r=this.start,i=this.flickThreshold,o=this.delta,a=this.activeIndex,s=this.calculatePos(e),c=Date.now()-r,u=Math.sqrt(s.absX*s.absX+s.absY*s.absY)/c,l=u>i,f=a;(l||s.absX>o)&&(f+=s.absX/s.deltaX,t||(f=Math.max(Math.min(f,n.default.length-1),0))),this.transitionTo(f),this.cleanTouch()}},onTouchcancel:function(e){this.touch&&(this.transitionTo(this.activeIndex),this.cleanTouch())},cleanTouch:function(){this.touch=!1},resize:function(){this.$nextTick(function(){this.width=this.$el.clientWidth,this.slid(this.activeIndex,0)},this)}},watch:{computedAuto:function(){this.setTimer()}},render:function(e){var t=this,n=this.computedLoop,i=this.$slots,o=i.default.length-1,a=this.indicators&&e("div",{class:"carousel-indicators"},[this.$slots.default.map(function(n,i){var o={"carousel-dot":!0,active:i===t.activeIndex};return e("div",{class:o,on:{click:t.transitionTo.bind(t,i,r)}},[i])})]),s={};0!==this.responsive&&(s.height="0",s.paddingBottom=this.responsive+"%");var c={width:this.width+("number"==typeof this.width?"px":"")};return e("div",{class:"carousel",style:s},[e("div",{class:"carousel-track",style:this.trackStyle,on:{touchstart:this.onTouchstart,touchmove:this.onTouchmove,touchend:this.onTouchend,touchcancel:this.onTouchcancel}},[n?e("div",{class:"carousel-item",style:c},[this.$slots.default[o]]):null,this.$slots.default.map(function(t){return e("div",{class:"carousel-item",style:c},[t])}),n?e("div",{class:"carousel-item",style:c},[this.$slots.default[0]]):null]),a])},mounted:function(){var e=this;this.childrenCount=this.$slots.default.length,this.$nextTick(function(){e.resize(),window.addEventListener("resize",e.resize),e.setTimer()}),document.addEventListener("visibilitychange",function(t){var n=document.hidden?e.clearTimer:e.setTimer;n()})},updated:function(){this.childrenCount=this.$slots.default.length},beforeDestroy:function(){window.removeEventListener("resize",this.resize),this.clearTimer()}}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(5),o=r(i);t.default={components:{Carousel:o.default},data:function(){return{auto:3e3}},methods:{slidEnd:function(e){},log:function(e){console.log(e)},toggle:function(){this.auto=0===this.auto?3e3:0}}}},function(e,t){e.exports='
carousel-item-{{i-1}}
---
只有一个没有动画
'},function(e,t,n){var r,i,o={};n(10),r=n(6),i=n(7),e.exports=r||{},e.exports.__esModule&&(e.exports=e.exports.default);var a="function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports;i&&(a.template=i),a.computed||(a.computed={}),Object.keys(o).forEach(function(e){var t=o[e];a.computed[e]=function(){return t}})},function(e,t,n){var r=n(1);"string"==typeof r&&(r=[[e.id,r,""]]);var i=n(4)(r,{});r.locals&&(e.exports=r.locals),r.locals||e.hot.accept(1,function(){var t=n(1);"string"==typeof t&&(t=[[e.id,t,""]]),i(t)}),e.hot.dispose(function(){i()})},function(e,t,n){var r=n(2);"string"==typeof r&&(r=[[e.id,r,""]]);var i=n(4)(r,{});r.locals&&(e.exports=r.locals),r.locals||e.hot.accept(2,function(){var t=n(2);"string"==typeof t&&(t=[[e.id,t,""]]),i(t)}),e.hot.dispose(function(){i()})},function(e,t,n){(function(t){/*! 2 | * Vue.js v2.4.2 3 | * (c) 2014-2017 Evan You 4 | * Released under the MIT License. 5 | */ 6 | !function(t,n){e.exports=n()}(this,function(){"use strict";function e(e){return void 0===e||null===e}function n(e){return void 0!==e&&null!==e}function r(e){return e===!0}function i(e){return e===!1}function o(e){return"string"==typeof e||"number"==typeof e||"boolean"==typeof e}function a(e){return null!==e&&"object"==typeof e}function s(e){return"[object Object]"===io.call(e)}function c(e){return"[object RegExp]"===io.call(e)}function u(e){var t=parseFloat(e);return t>=0&&Math.floor(t)===t&&isFinite(e)}function l(e){return null==e?"":"object"==typeof e?JSON.stringify(e,null,2):String(e)}function f(e){var t=parseFloat(e);return isNaN(t)?e:t}function d(e,t){for(var n=Object.create(null),r=e.split(","),i=0;i-1)return e.splice(n,1)}}function v(e,t){return so.call(e,t)}function h(e){var t=Object.create(null);return function(n){var r=t[n];return r||(t[n]=e(n))}}function m(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 y(e,t){t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function g(e,t){for(var n in t)e[n]=t[n];return e}function b(e){for(var t={},n=0;n1?y(r):r;for(var i=y(arguments,1),o=0,a=r.length;oxa)){xo("You may have an infinite update loop "+(e.user?'in watcher with expression "'+e.expression+'"':"in a component render function."),e.vm);break}var n=Ca.slice(),r=$a.slice();Ie(),Pe(n),De(r),qo&&bo.devtools&&qo.emit("flush")}function De(e){for(var t=e.length;t--;){var n=e[t],r=n.vm;r._watcher===n&&r._isMounted&&Me(r,"updated")}}function Le(e){e._inactive=!1,Ca.push(e)}function Pe(e){for(var t=0;tSa&&$a[n].id>e.id;)n--;$a.splice(n+1,0,e)}else $a.push(e);Oa||(Oa=!0,Ko(Ne))}}function Fe(e){Ma.clear(),He(e,Ma)}function He(e,t){var n,r,i=Array.isArray(e);if((i||a(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--;)He(e[n],t);else for(r=Object.keys(e),n=r.length;n--;)He(e[r[n]],t)}}function Ue(e,t,n){Ia.get=function(){return this[t][n]},Ia.set=function(e){this[t][n]=e},Object.defineProperty(e,n,Ia)}function Be(e){e._watchers=[];var t=e.$options;t.props&&ze(e,t.props),t.methods&&We(e,t.methods),t.data?qe(e):N(e._data={},!0),t.computed&&Ke(e,t.computed),t.watch&&t.watch!==Fo&&Ze(e,t.watch)}function Ve(e,t){var n=e.$options[t];s(n)||xo('component option "'+t+'" should be an object.',e)}function ze(e,t){var n=e.$options.propsData||{},r=e._props={},i=e.$options._propKeys=[],o=!e.$parent;ea.shouldConvert=o;var a=function(o){i.push(o);var a=X(o,t,n,e);(ao(o)||bo.isReservedAttr(o))&&xo('"'+o+'" is a reserved attribute and cannot be used as component prop.',e),D(r,o,a,function(){e.$parent&&!wa&&xo("Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: \""+o+'"',e)}),o in e||Ue(e,"_props",o)};for(var s in t)a(s);ea.shouldConvert=!0}function qe(e){var t=e.$options.data;t=e._data="function"==typeof t?Je(t,e):t||{},s(t)||(t={},xo("data functions should return an object:\nhttps://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function",e));for(var n=Object.keys(t),r=e.$options.props,i=e.$options.methods,o=n.length;o--;){var a=n[o];i&&v(i,a)&&xo('method "'+a+'" has already been defined as a data property.',e),r&&v(r,a)?xo('The data property "'+a+'" is already declared as a prop. Use prop default value instead.',e):k(a)||Ue(e,"_data",a)}N(t,!0)}function Je(e,t){try{return e.call(t)}catch(e){return T(e,t,"data()"),{}}}function Ke(e,t){Ve(e,"computed");var n=e._computedWatchers=Object.create(null);for(var r in t){var i=t[r],o="function"==typeof i?i:i.get;null==o&&xo('Getter is missing for computed property "'+r+'".',e),n[r]=new Ea(e,o||_,_,Na),r in e?r in e.$data?xo('The computed property "'+r+'" is already defined in data.',e):e.$options.props&&r in e.$options.props&&xo('The computed property "'+r+'" is already defined as a prop.',e):Ye(e,r,i)}}function Ye(e,t,n){"function"==typeof n?(Ia.get=Xe(t),Ia.set=_):(Ia.get=n.get?n.cache!==!1?Xe(t):n.get:_,Ia.set=n.set?n.set:_),Ia.set===_&&(Ia.set=function(){xo('Computed property "'+t+'" was assigned to but it has no setter.',this)}),Object.defineProperty(e,t,Ia)}function Xe(e){return function(){var t=this._computedWatchers&&this._computedWatchers[e];if(t)return t.dirty&&t.evaluate(),Xo.target&&t.depend(),t.value}}function We(e,t){Ve(e,"methods");var n=e.$options.props;for(var r in t)e[r]=null==t[r]?_:m(t[r],e),null==t[r]&&xo('method "'+r+'" has an undefined value in the component definition. Did you reference the function correctly?',e),n&&v(n,r)&&xo('method "'+r+'" has already been defined as a prop.',e)}function Ze(e,t){Ve(e,"watch");for(var n in t){var r=t[n];if(Array.isArray(r))for(var i=0;i=0||n.indexOf(e[i])<0)&&r.push(e[i]);return r}return e}function jt(e){this instanceof jt||xo("Vue is a constructor and should be called with the `new` keyword"),this._init(e)}function Et(e){e.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(t.indexOf(e)>-1)return this;var n=y(arguments,1);return n.unshift(this),"function"==typeof e.install?e.install.apply(e,n):"function"==typeof e&&e.apply(null,n),t.push(e),this}}function Mt(e){e.mixin=function(e){return this.options=K(this.options,e),this}}function It(e){e.cid=0;var t=1;e.extend=function(e){e=e||{};var n=this,r=n.cid,i=e._Ctor||(e._Ctor={});if(i[r])return i[r];var o=e.name||n.options.name;/^[a-zA-Z][\w-]*$/.test(o)||xo('Invalid component name: "'+o+'". Component names can only contain alphanumeric characters and the hyphen, and must start with a letter.');var a=function(e){this._init(e)};return a.prototype=Object.create(n.prototype),a.prototype.constructor=a,a.cid=t++,a.options=K(n.options,e),a.super=n,a.options.props&&Nt(a),a.options.computed&&Dt(a),a.extend=n.extend,a.mixin=n.mixin,a.use=n.use,yo.forEach(function(e){a[e]=n[e]}),o&&(a.options.components[o]=a),a.superOptions=n.options,a.extendOptions=e,a.sealedOptions=g({},a.options),i[r]=a,a}}function Nt(e){var t=e.options.props;for(var n in t)Ue(e.prototype,"_props",n)}function Dt(e){var t=e.options.computed;for(var n in t)Ye(e.prototype,n,t[n])}function Lt(e){yo.forEach(function(t){e[t]=function(e,n){return n?("component"===t&&bo.isReservedTag(e)&&xo("Do not use built-in or reserved HTML elements as component id: "+e),"component"===t&&s(n)&&(n.name=n.name||e,n=this.options._base.extend(n)),"directive"===t&&"function"==typeof n&&(n={bind:n,update:n}),this.options[t+"s"][e]=n,n):this.options[t+"s"][e]}})}function Pt(e){return e&&(e.Ctor.options.name||e.tag)}function Rt(e,t){return Array.isArray(e)?e.indexOf(t)>-1:"string"==typeof e?e.split(",").indexOf(t)>-1:!!c(e)&&e.test(t)}function Ft(e,t,n){for(var r in e){var i=e[r];if(i){var o=Pt(i.componentOptions);o&&!n(o)&&(i!==t&&Ht(i),e[r]=null)}}}function Ht(e){e&&e.componentInstance.$destroy()}function Ut(e){var t={};t.get=function(){return bo},t.set=function(){xo("Do not replace the Vue.config object, set individual fields instead.")},Object.defineProperty(e,"config",t),e.util={warn:xo,extend:g,mergeOptions:K,defineReactive:D},e.set=L,e.delete=P,e.nextTick=Ko,e.options=Object.create(null),yo.forEach(function(t){e.options[t+"s"]=Object.create(null)}),e.options._base=e,g(e.options.components,Ba),Et(e),Mt(e),It(e),Lt(e)}function Bt(e){for(var t=e.data,r=e,i=e;n(i.componentInstance);)i=i.componentInstance._vnode,i.data&&(t=Vt(i.data,t));for(;n(r=r.parent);)r.data&&(t=Vt(t,r.data));return zt(t.staticClass,t.class)}function Vt(e,t){return{staticClass:qt(e.staticClass,t.staticClass),class:n(e.class)?[e.class,t.class]:t.class}}function zt(e,t){return n(e)||n(t)?qt(e,Jt(t)):""}function qt(e,t){return e?t?e+" "+t:e:t||""}function Jt(e){return Array.isArray(e)?Kt(e):a(e)?Yt(e):"string"==typeof e?e:""}function Kt(e){for(var t,r="",i=0,o=e.length;i-1?ds[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:ds[e]=/HTMLUnknownElement/.test(t.toString()); 7 | }function Zt(e){if("string"==typeof e){var t=document.querySelector(e);return t?t:(xo("Cannot find element: "+e),document.createElement("div"))}return e}function Gt(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 Qt(e,t){return document.createElementNS(ss[e],t)}function en(e){return document.createTextNode(e)}function tn(e){return document.createComment(e)}function nn(e,t,n){e.insertBefore(t,n)}function rn(e,t){e.removeChild(t)}function on(e,t){e.appendChild(t)}function an(e){return e.parentNode}function sn(e){return e.nextSibling}function cn(e){return e.tagName}function un(e,t){e.textContent=t}function ln(e,t,n){e.setAttribute(t,n)}function fn(e,t){var n=e.data.ref;if(n){var r=e.context,i=e.componentInstance||e.elm,o=r.$refs;t?Array.isArray(o[n])?p(o[n],i):o[n]===i&&(o[n]=void 0):e.data.refInFor?Array.isArray(o[n])?o[n].indexOf(i)<0&&o[n].push(i):o[n]=[i]:o[n]=i}}function dn(t,i){return t.key===i.key&&(t.tag===i.tag&&t.isComment===i.isComment&&n(t.data)===n(i.data)&&pn(t,i)||r(t.isAsyncPlaceholder)&&t.asyncFactory===i.asyncFactory&&e(i.asyncFactory.error))}function pn(e,t){if("input"!==e.tag)return!0;var r,i=n(r=e.data)&&n(r=r.attrs)&&r.type,o=n(r=t.data)&&n(r=r.attrs)&&r.type;return i===o}function vn(e,t,r){var i,o,a={};for(i=t;i<=r;++i)o=e[i].key,n(o)&&(a[o]=i);return a}function hn(t){function i(e){return new ha(E.tagName(e).toLowerCase(),{},[],void 0,e)}function a(e,t){function n(){0===--n.listeners&&s(e)}return n.listeners=t,n}function s(e){var t=E.parentNode(e);n(t)&&E.removeChild(t,e)}function c(e,t,i,o,a){if(e.isRootInsert=!a,!u(e,t,i,o)){var s=e.data,c=e.children,l=e.tag;n(l)?(s&&s.pre&&M++,M||e.ns||bo.ignoredElements.length&&bo.ignoredElements.indexOf(l)>-1||!bo.isUnknownElement(l)||xo("Unknown custom element: <"+l+'> - did you register the component correctly? For recursive components, make sure to provide the "name" option.',e.context),e.elm=e.ns?E.createElementNS(e.ns,l):E.createElement(l,e),y(e),v(e,c,t),n(s)&&m(e,t),p(i,e.elm,o),s&&s.pre&&M--):r(e.isComment)?(e.elm=E.createComment(e.text),p(i,e.elm,o)):(e.elm=E.createTextNode(e.text),p(i,e.elm,o))}}function u(e,t,i,o){var a=e.data;if(n(a)){var s=n(e.componentInstance)&&a.keepAlive;if(n(a=a.hook)&&n(a=a.init)&&a(e,!1,i,o),n(e.componentInstance))return l(e,t),r(s)&&f(e,t,i,o),!0}}function l(e,t){n(e.data.pendingInsert)&&(t.push.apply(t,e.data.pendingInsert),e.data.pendingInsert=null),e.elm=e.componentInstance.$el,h(e)?(m(e,t),y(e)):(fn(e),t.push(e))}function f(e,t,r,i){for(var o,a=e;a.componentInstance;)if(a=a.componentInstance._vnode,n(o=a.data)&&n(o=o.transition)){for(o=0;ov?(f=e(i[y+1])?null:i[y+1].elm,g(t,f,i,p,y,o)):p>y&&_(t,r,d,v)}function $(t,i,o,a){if(t!==i){var s=i.elm=t.elm;if(r(t.isAsyncPlaceholder))return void(n(i.asyncFactory.resolved)?k(t.elm,i,o):i.isAsyncPlaceholder=!0);if(r(i.isStatic)&&r(t.isStatic)&&i.key===t.key&&(r(i.isCloned)||r(i.isOnce)))return void(i.componentInstance=t.componentInstance);var c,u=i.data;n(u)&&n(c=u.hook)&&n(c=c.prepatch)&&c(t,i);var l=t.children,f=i.children;if(n(u)&&h(i)){for(c=0;c, or missing . Bailing hydration and performing full client-side render.")}t=i(t)}var v=t.elm,m=E.parentNode(v);if(c(o,d,v._leaveCb?null:m,E.nextSibling(v)),n(o.parent)){for(var y=o.parent;y;)y.elm=o.elm,y=y.parent;if(h(o))for(var g=0;g=0&&(m=e.charAt(h)," "===m);h--);m&&xs.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=Va}function Fn(e){return 34===e||39===e}function Hn(e){var t=1;for(Ka=Ja;!Rn();)if(e=Pn(),Fn(e))Un(e);else if(91===e&&t++,93===e&&t--,0===t){Ya=Ja;break}}function Un(e){for(var t=e;!Rn()&&(e=Pn(),e!==t););}function Bn(e,t,n){Xa=n;var r=t.value,i=t.modifiers,o=e.tag,a=e.attrsMap.type,s=e.attrsMap["v-bind:type"]||e.attrsMap[":type"];if("input"===o&&s&&Xa(':\nv-model does not support dynamic input types. Use v-if branches instead.'),"input"===o&&"file"===a&&Xa("<"+e.tag+' v-model="'+r+'" type="file">:\nFile inputs are read only. Use a v-on:change listener instead.'),e.component)return Nn(e,r,i),!1;if("select"===o)qn(e,r,i);else if("input"===o&&"checkbox"===a)Vn(e,r,i);else if("input"===o&&"radio"===a)zn(e,r,i);else if("input"===o||"textarea"===o)Jn(e,r,i);else{if(!bo.isReservedTag(o))return Nn(e,r,i),!1;Xa("<"+e.tag+' v-model="'+r+"\">: v-model is not supported on this element type. If you are working with contenteditable, it's recommended to wrap a library dedicated for that purpose inside a custom component.")}return!0}function Vn(e,t,n){var r=n&&n.number,i=Mn(e,"value")||"null",o=Mn(e,"true-value")||"true",a=Mn(e,"false-value")||"false";Tn(e,"checked","Array.isArray("+t+")?_i("+t+","+i+")>-1"+("true"===o?":("+t+")":":_q("+t+","+o+")")),En(e,Cs,"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($$el.checked){$$i<0&&("+t+"=$$a.concat($$v))}else{$$i>-1&&("+t+"=$$a.slice(0,$$i).concat($$a.slice($$i+1)))}}else{"+Dn(t,"$$c")+"}",null,!0)}function zn(e,t,n){var r=n&&n.number,i=Mn(e,"value")||"null";i=r?"_n("+i+")":i,Tn(e,"checked","_q("+t+","+i+")"),En(e,Cs,Dn(t,i),null,!0)}function qn(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="$event.target.multiple ? $$selectedVal : $$selectedVal[0]",a="var $$selectedVal = "+i+";";a=a+" "+Dn(t,o),En(e,"change",a,null,!0)}function Jn(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?$s:"input",l="$event.target.value";s&&(l="$event.target.value.trim()"),a&&(l="_n("+l+")");var f=Dn(t,l);c&&(f="if($event.target.composing)return;"+f),Tn(e,"value","("+t+")"),En(e,u,f,null,!0),(s||a)&&En(e,"blur","$forceUpdate()")}function Kn(e){var t;n(e[$s])&&(t=Io?"change":"input",e[t]=[].concat(e[$s],e[t]||[]),delete e[$s]),n(e[Cs])&&(t=Ro?"click":"change",e[t]=[].concat(e[Cs],e[t]||[]),delete e[Cs])}function Yn(e,t,n,r,i){if(n){var o=t,a=Wa;t=function(n){var i=1===arguments.length?o(n):o.apply(null,arguments);null!==i&&Xn(e,t,r,a)}}Wa.addEventListener(e,t,Ho?{capture:r,passive:i}:r)}function Xn(e,t,n,r){(r||Wa).removeEventListener(e,t,n)}function Wn(t,n){if(!e(t.data.on)||!e(n.data.on)){var r=n.data.on||{},i=t.data.on||{};Wa=n.elm,Kn(r),oe(r,i,Yn,Xn,n.context)}}function Zn(t,r){if(!e(t.data.domProps)||!e(r.data.domProps)){var i,o,a=r.elm,s=t.data.domProps||{},c=r.data.domProps||{};n(c.__ob__)&&(c=r.data.domProps=g({},c));for(i in s)e(c[i])&&(a[i]="");for(i in c)if(o=c[i],"textContent"!==i&&"innerHTML"!==i||(r.children&&(r.children.length=0),o!==s[i]))if("value"===i){a._value=o;var u=e(o)?"":String(o);Gn(a,r,u)&&(a.value=u)}else a[i]=o}}function Gn(e,t,n){return!e.composing&&("option"===t.tag||Qn(e,n)||er(e,n))}function Qn(e,t){var n=!0;try{n=document.activeElement!==e}catch(e){}return n&&e.value!==t}function er(e,t){var r=e.value,i=e._vModifiers;return n(i)&&i.number?f(r)!==f(t):n(i)&&i.trim?r.trim()!==t.trim():r!==t}function tr(e){var t=nr(e.style);return e.staticStyle?g(e.staticStyle,t):t}function nr(e){return Array.isArray(e)?b(e):"string"==typeof e?Os(e):e}function rr(e,t){var n,r={};if(t)for(var i=e;i.componentInstance;)i=i.componentInstance._vnode,i.data&&(n=tr(i.data))&&g(r,n);(n=tr(e.data))&&g(r,n);for(var o=e;o=o.parent;)o.data&&(n=tr(o.data))&&g(r,n);return r}function ir(t,r){var i=r.data,o=t.data;if(!(e(i.staticStyle)&&e(i.style)&&e(o.staticStyle)&&e(o.style))){var a,s,c=r.elm,u=o.staticStyle,l=o.normalizedStyle||o.style||{},f=u||l,d=nr(r.data.style)||{};r.data.normalizedStyle=n(d.__ob__)?g({},d):d;var p=rr(r,!0);for(s in f)e(p[s])&&js(c,s,"");for(s in p)a=p[s],a!==f[s]&&js(c,s,null==a?"":a)}}function or(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 ar(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),e.classList.length||e.removeAttribute("class");else{for(var n=" "+(e.getAttribute("class")||"")+" ",r=" "+t+" ";n.indexOf(r)>=0;)n=n.replace(r," ");n=n.trim(),n?e.setAttribute("class",n):e.removeAttribute("class")}}function sr(e){if(e){if("object"==typeof e){var t={};return e.css!==!1&&g(t,Ns(e.name||"v")),g(t,e),t}return"string"==typeof e?Ns(e):void 0}}function cr(e){Bs(function(){Bs(e)})}function ur(e,t){var n=e._transitionClasses||(e._transitionClasses=[]);n.indexOf(t)<0&&(n.push(t),or(e,t))}function lr(e,t){e._transitionClasses&&p(e._transitionClasses,t),ar(e,t)}function fr(e,t,n){var r=dr(e,t),i=r.type,o=r.timeout,a=r.propCount;if(!i)return n();var s=i===Ls?Fs:Us,c=0,u=function(){e.removeEventListener(s,l),n()},l=function(t){t.target===e&&++c>=a&&u()};setTimeout(function(){c0&&(n=Ls,l=a,f=o.length):t===Ps?u>0&&(n=Ps,l=u,f=c.length):(l=Math.max(a,u),n=l>0?a>u?Ls:Ps:null,f=n?n===Ls?o.length:c.length:0);var d=n===Ls&&Vs.test(r[Rs+"Property"]);return{type:n,timeout:l,propCount:f,hasTransform:d}}function pr(e,t){for(;e.length explicit "+t+" duration is not a valid number - got "+JSON.stringify(e)+".",n.context):isNaN(e)&&xo(" explicit "+t+" duration is NaN - the duration expression might be incorrect.",n.context)}function gr(e){return"number"==typeof e&&!isNaN(e)}function br(t){if(e(t))return!1;var r=t.fns;return n(r)?br(Array.isArray(r)?r[0]:r):(t._length||t.length)>1}function _r(e,t){t.data.show!==!0&&hr(t)}function wr(e,t,n){var r=t.value,i=e.multiple;if(i&&!Array.isArray(r))return void xo('