<div
        v-if="show"
        @mouseover="mouseover"
        @mouseout="mouseout"
        class="box"
        :style="{'top':top + 'px','left':left + 'px'}">
    <span @click="close">關(guān)閉</span>
    <div>
        特別提示：這僅僅是一個測試，不要慌。
    </div>
</div>

this.maxTop = document.documentElement.clientHeight - 150 - 20
this.maxLeft = document.documentElement.clientWidth - 200 - 20

move () {
   if (this.top >= this.maxTop || this.top < 0) {
      this.stepY = -this.stepY
   }
   if (this.left >= this.maxLeft || this.left < 0) {
      this.stepX = -this.stepX
   }

   this.top += this.stepY
   this.left += this.stepX
},

mouseover () {
   clearInterval(this.timer)
},

mouseout () {
  clearInterval(this.timer)
  this.timer = setInterval(() => {
    this.move()
  }, 20)
},

close () {
  clearInterval(this.timer)
  this.show = false
},

onresize () {
  const that = this
  window.onresize = function () {
    that.init()
  }
},

<template>
  <div>
    <h1>飄窗 demo</h1>
    <div
      v-if="show"
      @mouseover="mouseover"
      @mouseout="mouseout"
      class="box"
      :style="{'top':top + 'px','left':left + 'px'}">
      <span @click="close">關(guān)閉</span>
      <div>
        特別提示：這僅僅是一個測試，不要慌。
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MoveWindow',
  data () {
    return {
      show: true, // 是否展現(xiàn)飄窗
      stepX: 1, // 水平方向的步長
      stepY: 1, // 垂直方向的步長
      timer: null, // 定時器
      maxTop: 0, // 最大的 top 值
      maxLeft: 0, // 最大的 left 值
      top: 0,
      left: 0,
    }
  },
  mounted () {
    this.init()
  },
  beforeDestroy () {
    // dom 銷毀前清除定時器
    clearInterval(this.timer)
  },
  methods: {
    // 初始化飄窗規(guī)則
    init () {
      // 設(shè)置最大的top和left值：根元素可視區(qū)域?qū)捀?- 飄窗的寬高 - 邊距
      this.maxTop = document.documentElement.clientHeight - 150 - 20
      this.maxLeft = document.documentElement.clientWidth - 200 - 20

      // 設(shè)置 top 和 left 的初始值
      this.top = 0
      this.left = 0

      // 創(chuàng)建定時器前清除定時器，避免類似在 onresize 中調(diào)用 init() 時，產(chǎn)生多個定時器
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.move()
      }, 20)

      this.onresize()
    },
    // 移動函數(shù)
    move () {
      if (this.top >= this.maxTop || this.top < 0) {
        this.stepY = -this.stepY
      }
      if (this.left >= this.maxLeft || this.left < 0) {
        this.stepX = -this.stepX
      }

      this.top += this.stepY
      this.left += this.stepX
    },
    // 鼠標(biāo)懸浮在飄窗時停止移動
    mouseover () {
      clearInterval(this.timer)
    },
    // 鼠標(biāo)離開飄窗時恢復(fù)移動
    mouseout () {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.move()
      }, 20)
    },
    // 關(guān)閉飄窗
    close () {
      clearInterval(this.timer)
      this.show = false
    },
    // 窗口大小調(diào)整時重置飄窗規(guī)則
    onresize () {
      const that = this
      window.onresize = function () {
        that.init()
      }
    },
  }
}
</script>

<style scoped lang="scss">
.box {
  background: #9cdf65;
  width: 200px;
  height: 150px;
  border-radius: 5px;
  position: fixed;
  text-align: left;
  padding: 10px;
  color: #ffffff;
  top: 0;
  left: 0;

  > span {
    text-align: right;
    position: absolute;
    right: 10px;
    top: 10px;
    color: #1e87f0;
    cursor: pointer;
  }

  > div {
    margin-top: 30px;
  }
}
</style>