基于ant design vue的右侧固定按钮

做了两组 悬浮在右侧的按钮，类似于网站帮助那种，

一直固定在在网站右侧 ，

这是我实现的效果，

当鼠标移入时，会显示关闭按钮和 提示效果

代码如下

<div @mouseenter="mouseenter()" @mouseleave="mouseleave()" >
      <a-tooltip placement="left" :mouseLeaveDelay="0">
        <template slot="title">
          <span>关闭帮助</span>
        </template>
        <div
          ref="closeSysBtn"
          v-if="closeBtnShow"
          style="width: 50px;height: 46px;border-radius: 1px;border: 1px solid gainsboro;
                  position: fixed;bottom:200px;right:16px;z-index: 999;line-height: 10px;background-color: #40a9ff;text-align: center;"
        >
          <a-icon style="font-size: 20px;font-weight: lighter;color: white;margin-top: 12px"  type="close"/>
        </div>

      </a-tooltip>

      <a-tooltip v-if="sysHelpShow"  placement="left">
        <template slot="title">
          <span>系统帮助</span>
        </template>
        <div
          style="width: 50px;height: 46px;border-radius: 1px;border: 1px solid gainsboro;
                position: fixed;bottom:160px;right:16px;z-index: 999;line-height: 10px;background-color: #40a9ff;text-align: center;"
        >
          <a-icon style="font-size: 20px;font-weight: lighter;color: white;margin-top: 12px"  type="question"/>
        </div>
      </a-tooltip>
    </div>

data () {
    return {
      closeBtnShow:false,
      sysHelpShow:true
    }
},
methods: {
    mouseenter(){
      this.closeBtnShow=true
    },
    mouseleave(){
      this.closeBtnShow=false
    }
}

 另外一种是按钮形式改造的，平时隐藏一半在网页最右侧，鼠标移入时显示

 

 代码如下

<a-popover v-if="sysHelpShow"  placement="left">
      <template slot="content">
          <span>永久关闭系统帮助</span>
      </template>
      <a-button  size="large" @mouseenter="mouseenter()" @mouseleave="mouseleave()"
                v-if="sysHelpShow" shape="circle"
                style="font-size: 30px;position: fixed;bottom:105px;z-index: 9999;line-height: 10px"
                :style="{right:helpRight}"
      >
        <a-icon v-if="!btnTextShow"   style="font-size: 20px;" type="close" />
        <a v-if="btnTextShow" style="font-size: 13px;line-height: 20px">关闭</a>
      </a-button>
    </a-popover>

    <a-popover v-if="sysHelpShow"  placement="left">
      <template slot="content">
        <span>系统帮助</span>
      </template>
      <a-button size="large" @mouseenter="mouseenter()" @mouseleave="mouseleave()"
                v-if="sysHelpShow" shape="circle"
                style="font-size: 30px;position: fixed;bottom:60px;z-index: 9999;line-height: 10px"
                :style="{right:helpRight}"

      >
        <a-icon v-if="!btnTextShow"   style="font-size: 20px;" type="question" />
        <a v-if="btnTextShow" style="font-size: 13px;line-height: 20px">帮助</a>
      </a-button>
    </a-popover>

data () {
    return {
      helpRight:'-15px',
      btnTextShow:false
    }
},
methods: {
    
    mouseenter(){
      //this.closeBtnShow=true
      this.btnTextShow=true
      this.helpRight='1px'

    },
    mouseleave(){
      //this.closeBtnShow=false
      this.btnTextShow=false
      this.helpRight='-15px'
    }
  }

我前段用的是现成的架子 ant design pro of vue,添加到了basicLayout.vue中。

都是根据其他网站的右侧按钮为原型写的，不知道为什么看起来总感觉有点丑，

但是没办法，后端程序员成画成这样也不容易了