xiaoshi_system/src/views/layout/components/help.vue

<template>
  <div >
    <div class="help" v-drag="isMove">
        <div @click="feedback">
            <span>
                <i class="iconfont icon-yijianfankui"></i>
            </span>
            <span>意见反馈</span>
        </div>
        <div @click="guide" class="help-guid">
            <span>
                <i class="iconfont icon-xinshouzhiyin"></i>
            </span>
            <span>新手指引</span>
        </div>
    </div>
    <feedback ref="feedback"></feedback>
  </div>
</template>

<script>
import feedback from './dialog/feedback.vue';
import { guide } from "./guide";
export default {
  mixins:[guide],
  components: {
    feedback
  },
  props: {},
  data() {
    return {
        move:false,
    };
  }, 
  //注册局部组件指令
  directives: {
    drag: function (el,data,vnode) {
      let dragBox = el; //获取当前元素
      let clientHeight = document.documentElement.clientHeight 
      dragBox.onmousedown = e => {
        //算出鼠标相对元素的位置
        var start = dragBox.offsetTop
        var height = dragBox.offsetHeight
        var startY = e.clientY
        document.onmousemove = e => {
          if ( e.stopPropagation ) {
            e.stopPropagation()
          }
          if ( e.preventDefault ) {
            e.preventDefault()
          }
          var moveY = e.clientY - startY
          var bottom = 50
          if(moveY < 0){
            bottom = clientHeight - start - height + Math.abs(moveY)
            if(bottom - height > clientHeight - 200){
                bottom = clientHeight - 100
            }
          }else{
            bottom = clientHeight - start - height - Math.abs(moveY)
            if(bottom < 50){
                bottom = 50
            }
          }
          dragBox.style.bottom = bottom + 'px'
        };
        document.onmouseup = e2 => {
          //鼠标弹起来的时候不再移动
          document.onmousemove = null;
          //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）  
          document.onmouseup = null;
          if ( startY == e2.clientY ) {
            data.value(true)
          }else{
            data.value(false)
          }
        };
      };
    }
  },
  
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    //是否移动
    isMove(val){
        this.move = val
    },
    //意见反馈
    feedback(){
        if(this.move){
            this.$refs.feedback.open()
        }
    },
    //新手指引
    guide(){
        if(this.move){
            //开始新手指引(title:当前路由标识，arr:需要展示的指引步骤，userinfo:用户信息)
           this.startGuide(this.$route.meta.sign)
        }
    },
  },
};
</script>
<style lang="scss">
@keyframes moveX {
  to{
    transform: translateX(var(--x));
  }
}
@keyframes moveY {
  to{
    transform: translateY(var(--y));
  }
}
.plus{
  position:fixed;
  top:var(--top);
  left: var(--left);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 99999999;
  animation: moveY .8s cubic-bezier(0.5,-0.5,1,1);
}
.plus-icon{
  height: 100%;
  width: 100%;
  background-color: #5151e7;
  border-radius: 50%;
  z-index: 99999999;
  animation: moveX .8s linear;
}
// .plus-icon::before{
//   content: '';
//   position: absolute;
//   left: 50%;
//   top: 3;
//   width: 4px;
//   height: 24px;
//   margin-left: -2px;
//   background-color: #fff;
//   border-radius: 8px;
// }
// .plus-icon::after{
//   content: '';
//   position: absolute;
//   left: 3px;
//   top: 50%;
//   width: 24px;
//   height: 4px;
//   margin-top: -2px;
//   background-color: #fff;
//   border-radius: 8px;
// }
</style>
<style lang="scss" scoped>
.help{
    background: white;
    z-index: 999;
    border:3px solid var(--color1);
    border-right: none;
    width: 35px;
    height: auto;
    white-space: nowrap;
    border-radius: 5px 0 0 10px;
    position: fixed;
    right: 0;
    bottom:50px;
    div{
        border-bottom: 1px solid var(--color1);
        padding: 5px 0;
    }
    div:last-child{
        border-bottom: none;
    }
    span{
        color: var(--color1);
        font-family: var(--fm);
        font-size: 14px;
        font-weight: bold;
        margin-left:10px;
        cursor: pointer;
    }
    i{
        font-size: 20px;
    }
}
.help:hover{
    width: 100px;
    i{
        font-size: 14px;
    }
}
</style>