Vue实现固定定位图标滑动隐藏效果

<template>  <section class="fixed-icon"       :style="{ bottom: bottom + 'rem' }"       :class="[ !transition ? 'fixed-transition' : '']"       @click="event">    <slot></slot>  </section></template><script> export default {  name: 'fixedIcon',  props: {   bottom: { // 改图标距离底部距离 单位 rem    type: Number,    default: 3,   },  },  data () {   return {    transition: true, // 是否触发动画    timer: null, // 定时器   };  },  methods: {   event() {    this.$emit('clickEvent'); // 绑定点击图表时间   },   handleScroll () { // 每次滑动都会执行函数    this.transition = false;    if (this.timer) { // 判断是否已存在定时器     clearTimeout(this.timer);    }    this.timer = setTimeout(() => { // 创建定时器，1.4s后图标回归原位置     this.transition = true;    }, 1400);   }  },  mounted () {   window.addEventListener('scroll', this.handleScroll); // 监听页面滑动  } };</script><style scoped lang="scss">  /*@media only screen and (min-width:750px){html{font-size:20px}} */  .fixed-icon{    position: fixed;    z-index: 1100;    right: 1.7rem;    display: flex;    justify-content: center;    align-items: center;    height: 4.1rem;    width: 4.1rem;    border-radius: 50%;    background-color: rgba(128, 128, 128, 0.8);    transition: 0.7s ease-in-out;  }  .fixed-transition{    right: -2.05rem;    opacity: 0.4;    transition: 1s ease-in-out;  }</style>

<template>  <section class="content">    <fixed-icon :bottom="3" @clickEvent="chat">      <i class="icon-chat"></i>    </fixed-icon>  </section></template><script> import fixedIcon from './components/fixedIcon.vue'; export default {  name: 'test',  components: {   fixedIcon  },  data () {   return {   };  },  methods: {   chat() { // 图标点击事件    console.log('你好');   },  },  mounted() {   document.title = 'Vue制作固定定位图标滑动隐藏效果';  }, };</script><style scoped lang="scss">  .content{    height: 200vh;  }  .icon-chat{    width: 2rem;    height: 1.9rem;    background: url('http://pfpdwbdfy.bkt.clouddn.com/image/test/fixedIconTranstion/wechat.png') no-repeat;    background-size: 2rem 1.9rem;  }</style>