不随页面滚动而固定div摁钮并且下拉显示菜单【类似淘宝天猫页面的购物车模式】

今日，怂怂就为大家带来一篇如何新建局部组件实现页面不随页面滚动而显示下拉菜单；具有很好的参考价值，一起跟怂怂过来吧，如若对您有所帮助，别忘了在文章右上角点个赞哦。

<!--主页-->
<template>
    <counter></counter>//引用自定义的局部组件
</template>


<script>
//局部组件
  const counter={
    template:`
      <div style="width:60px; height:280px; position:fixed; right: 0; top:40%;">
          <div style="width: 60px;height: 40px;background-color: #FFA200;border-radius:2px;" v-on:click="show = !show">
              <img src="/static/img/down.png"  style="margin:11px 14px"/>
          </div>
          <transition name="fade">
            <div v-if="show">
              <div  style="width: 60px;height: 60px; background-color: #9a9a9a;margin-top: 5px;border-radius:2px;">
                   <img src="/static/img/tel.png"  style="margin:14px 12px 14px 13px"/>
             </div>
              <div style="width: 60px;height: 60px;background-color:#9a9a9a;margin-top: 5px;border-radius:2px;">
                  <img src="/static/img/kefu.png"   style="margin:14px 12px 14px 13px"/>
              </div>
              <div style="width: 60px;height: 60px;background-color:#193654;margin-top: 5px;border-radius:2px;">
                  <img src="/static/img/message.png"  style="margin:14px 12px 14px 13px"/>
              </div>
              <div style="width: 60px;height: 60px;background-color:#9a9a9a;margin-top: 5px;border-radius:2px;">
                  <img src="/static/img/com.png"  style="margin:14px 12px 14px 13px"/>
              </div>
            </div>
         </transition>
    </div>`,
    data(){
      return{
        show: true
      }
    },
    methods:{
      //触发事件；
    },
  };


</script>

<style lang="scss">
.fade-enter, .fade-leave-to {
      opacity: 0;
    };
</style>

 实现效果：