DataOps-web/src/components/Knowledge/index.vue

<template>
  <div>
    <v-avatar
      ref="box"
      class="box point elevation-5"
      color="indigo"
      @mousedown="handleMousedown"
      @click="handleClick"
    >
      <v-icon dark large>
        mdi-face-agent
      </v-icon>
    </v-avatar>
    <v-navigation-drawer
      v-model="show"
      absolute
      temporary
      hide-overlay
      right
      width="500"
      style="z-index: 400"
    >
      <m-talk v-if="show" :title="title" :type="type" v-bind="$attrs">
        <template v-for="name in Object.keys(this.$scopedSlots)" v-slot:[`${name}`]="slotProps">
          <slot :name="name" v-bind="slotProps"></slot>
        </template>
      </m-talk>
    </v-navigation-drawer>
  </div>
</template>

<script>
import MTalk from './talk'
export default {
  name: 'knowledge-component',
  components: {
    MTalk
  },
  props: {
    // 1 手册探索 2 图表实验室 3 产品知识库
    type: {
      type: Number,
      default: 1
    },
    title: {
      type: String,
      default: '数据探索'
    },
    handle: Function
  },
  data () {
    return {
      show: false,
      lock: false,
      isDragging: false,
      info: {}
    }
  },
  mounted () {
    this.$nextTick(() => {
      document.addEventListener('mouseup', this.handleMouseup)
      document.addEventListener('mousemove', this.handleMousemove)
      this.$once('hook:beforeDestroy', () => {
        document.removeEventListener('mouseup', this.handleMouseup)
        document.removeEventListener('mousemove', this.handleMousemove)
      })
    })
  },
  methods: {
    handleClick () {
      if (this.isDragging) {
        return
      }
      if (this.handle) {
        this.handle()
        return
      }
      this.show = !this.show
    },
    // 记录当前位置
    handleMousedown (e) {
      this.lock = true
      const { left, top, height, width } = this.$refs.box.$el.getBoundingClientRect()
      this.info = {
        click: {
          x: e.clientX,
          y: e.clientY
        },
        left,
        top,
        height,
        width,
        clientX: e.clientX,
        clientY: e.clientY
      }
    },
    // 移动位置
    handleMousemove (e) {
      if (!this.lock) return
      const xLen = Math.abs(this.info.click?.x - e.clientX)
      const yLen = Math.abs(this.info.click?.y - e.clientY)
      // 拖动距离触发
      if (xLen < 20 && yLen < 20) {
        return
      }

      // 计算移动距离
      const clientX = e.clientX - this.info.clientX
      const clientY = e.clientY - this.info.clientY
      this.isDragging = true
      this.info.left += clientX
      this.info.top += clientY
      this.$refs.box.$el.style.left = this.info.left + 'px'
      this.$refs.box.$el.style.top = this.info.top + 'px'
      this.info.clientX = e.clientX
      this.info.clientY = e.clientY
    },
    handleMouseup (e) {
      this.lock = false
      setTimeout(() => {
        this.isDragging = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.point {
  cursor: pointer;

}
.box {
  z-index: 9;
  position: fixed;
  right: 50px;
  bottom: 100px;
}
</style>