update Affix & BackTop

This commit is contained in:
梁灏 2017-07-10 13:30:00 +08:00
parent e4767e5a90
commit 2919aa362d
3 changed files with 55 additions and 9 deletions

View file

@ -5,8 +5,8 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { on, off } from '../../utils/dom';
const prefixCls = 'ivu-affix'; const prefixCls = 'ivu-affix';
function getScroll(target, top) { function getScroll(target, top) {
@ -73,12 +73,16 @@
} }
}, },
mounted () { mounted () {
window.addEventListener('scroll', this.handleScroll, false); // window.addEventListener('scroll', this.handleScroll, false);
window.addEventListener('resize', this.handleScroll, false); // window.addEventListener('resize', this.handleScroll, false);
on(window, 'scroll', this.handleScroll);
on(window, 'resize', this.handleScroll);
}, },
beforeDestroy () { beforeDestroy () {
window.removeEventListener('scroll', this.handleScroll, false); // window.removeEventListener('scroll', this.handleScroll, false);
window.removeEventListener('resize', this.handleScroll, false); // window.removeEventListener('resize', this.handleScroll, false);
off(window, 'scroll', this.handleScroll);
off(window, 'resize', this.handleScroll);
}, },
methods: { methods: {
handleScroll () { handleScroll () {

View file

@ -9,6 +9,7 @@
</template> </template>
<script> <script>
import { scrollTop } from '../../utils/assist'; import { scrollTop } from '../../utils/assist';
import { on, off } from '../../utils/dom';
const prefixCls = 'ivu-back-top'; const prefixCls = 'ivu-back-top';
export default { export default {
@ -36,12 +37,16 @@
}; };
}, },
mounted () { mounted () {
window.addEventListener('scroll', this.handleScroll, false); // window.addEventListener('scroll', this.handleScroll, false);
window.addEventListener('resize', this.handleScroll, false); // window.addEventListener('resize', this.handleScroll, false);
on(window, 'scroll', this.handleScroll);
on(window, 'resize', this.handleScroll);
}, },
beforeDestroy () { beforeDestroy () {
window.removeEventListener('scroll', this.handleScroll, false); // window.removeEventListener('scroll', this.handleScroll, false);
window.removeEventListener('resize', this.handleScroll, false); // window.removeEventListener('resize', this.handleScroll, false);
off(window, 'scroll', this.handleScroll);
off(window, 'resize', this.handleScroll);
}, },
computed: { computed: {
classes () { classes () {

37
src/utils/dom.js Normal file
View file

@ -0,0 +1,37 @@
import Vue from 'vue';
const isServer = Vue.prototype.$isServer;
/* istanbul ignore next */
export const on = (function() {
if (!isServer && document.addEventListener) {
return function(element, event, handler) {
if (element && event && handler) {
element.addEventListener(event, handler, false);
}
};
} else {
return function(element, event, handler) {
if (element && event && handler) {
element.attachEvent('on' + event, handler);
}
};
}
})();
/* istanbul ignore next */
export const off = (function() {
if (!isServer && document.removeEventListener) {
return function(element, event, handler) {
if (element && event) {
element.removeEventListener(event, handler, false);
}
};
} else {
return function(element, event, handler) {
if (element && event) {
element.detachEvent('on' + event, handler);
}
};
}
})();