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>