diff --git a/packages/swipe/index.js b/packages/swipe/index.js index b847807a8..b25b3300a 100644 --- a/packages/swipe/index.js +++ b/packages/swipe/index.js @@ -1,11 +1,23 @@ import { use } from '../utils'; -import { on, off, preventDefault } from '../utils/dom/event'; +import { preventDefault } from '../utils/dom/event'; import { TouchMixin } from '../mixins/touch'; +import { BindEventMixin } from '../mixins/bind-event'; const [sfc, bem] = use('swipe'); export default sfc({ - mixins: [TouchMixin], + mixins: [ + TouchMixin, + BindEventMixin(function (bind, isBind) { + bind(window, 'resize', this.onResize, true); + + if (isBind) { + this.initialize(); + } else { + this.clear(); + } + }) + ], props: { width: Number, @@ -45,30 +57,6 @@ export default sfc({ }; }, - mounted() { - this.initialize(); - - if (!this.$isServer) { - on(window, 'resize', this.onResize, true); - } - }, - - activated() { - if (this.rendered) { - this.initialize(); - } - - this.rendered = true; - }, - - destroyed() { - this.clear(); - - if (!this.$isServer) { - off(window, 'resize', this.onResize, true); - } - }, - watch: { swipes() { this.initialize(); @@ -265,25 +253,32 @@ export default sfc({ }, 30); }, autoplay); } + }, + + renderIndicator() { + const { count, activeIndicator } = this; + const slot = this.slots('indicator'); + + if (slot) { + return slot; + } + + if (this.showIndicators && count > 1) { + return ( +
+ {Array(...Array(count)).map((empty, index) => ( + + ))} +
+ ); + } } }, render(h) { - const { count, activeIndicator } = this; - - const Indicator = - this.slots('indicator') || - (this.showIndicators && count > 1 && ( -
- {Array(...Array(count)).map((empty, index) => ( - - ))} -
- )); - return (
{this.slots()}
- {Indicator} + {this.renderIndicator()}
); }