<template>
  <div class="back-top" v-show="toTopShow">
    <i class="el-icon-datau-top"  @click="scrollToTop"></i>
  </div>
</template>

<script>
export default {
  name: 'top',
  data() {
    return {
      toTopShow: false,
      scrollTop: 0
    };
  },
  computed: {
    layoutVal: function(){
    }
  },
  mounted() {
    this.$nextTick(function () {
      window.addEventListener('scroll', this.handleScroll,true);
    });
  },
  destroyed() {
    window.addEventListener('scroll', this.handleScroll,true);
  },
  methods: {
    scrollToTop() {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0;
    },
    handleScroll() {
      let dom =document.getElementsByClassName("el-container")[0];
      this.scrollTop = dom.scrollTop || window.pageYOffset || document.body.scrollTop;;
      if (this.scrollTop > 300) {
        this.toTopShow = true;
      }else {
        this.toTopShow = false;
      }
    },
  },

  watch:{
  }
}
</script>

<style >
</style>
