other / mew-iview

  <template>
      <div :class="classes" :style="styles" @click="back">
          <slot>
              <div :class="innerClasses">
                  <i class="ivu-icon ivu-icon-chevron-up"></i>
              </div>
          </slot>
      </div>
  </template>
  <script>
      const prefixCls = 'ivu-back-top';
  

      export default {
          props: {
              height: {
                  type: Number,
                  default: 400
              },
              bottom: {
                  type: Number,
                  default: 30
              },
              right: {
                  type: Number,
                  default: 30
              }
          },
          data () {
              return {
                  backTop: false
              }
          },
          ready () {
              window.addEventListener('scroll', this.handleScroll, false);
              window.addEventListener('resize', this.handleScroll, false);
          },
          beforeDestroy () {
              window.removeEventListener('scroll', this.handleScroll, false);
              window.removeEventListener('resize', this.handleScroll, false);
          },
          computed: {
              classes () {
                  return [
                      `${prefixCls}`,
                      {
                          [`${prefixCls}-show`]: this.backTop
                      }
                  ]
              },
              styles () {
                  return {
                      bottom: `${this.bottom}px`,
                      right: `${this.right}px`
                  }
              },
              innerClasses () {
                  return `${prefixCls}-inner`;
              }
          },
          methods: {
              handleScroll () {

                  this.backTop = window.pageYOffset >= this.height;

              },
              back () {
                  window.scrollTo(0, 0);
                  this.$emit('on-click');
              }
          }
      }

  </script>