【sgHelp】自定义组件：网站、平台右下角的帮助助手、指导助理

sgHelp

<template>
  <div :class="$options.name">
    <div class="help-icon" @click.stop="show_sgFloatDialog = !show_sgFloatDialog">?</div>
    <!-- 指导帮助悬浮弹窗 -->
    <sgFloatDialog
      :data="data_sgFloatDialog"
      v-model="show_sgFloatDialog"
      v-if="show_sgFloatDialog"
    >
      <div class="content">
        <div class="top">
          <img
            src="~@/../static/img/product-logo.png"
            style="
              width: 120px;
              height: 40px;
              object-position: center;
              object-fit: contain;
              margin-bottom: 20px;
            "
          />

          <div class="title1">你好, 我是</div>
          <div class="title2">小智资源AI助理</div>
        </div>
        <div class="bt">底部信息</div>
      </div>
    </sgFloatDialog>
  </div>
</template>
<script>
import sgFloatDialog from "@/vue/components/admin/sgFloatDialog";

export default {
  name: "sgHelp",
  components: { sgFloatDialog },
  data() {
    return {
      form: {},
      data_sgFloatDialog: {
        title: `AI助理`,
      },
      show_sgFloatDialog: false,
      show_sgFloatDialog: true, //测试----------------------------------------
    };
  },
  props: ["data"],
  computed: {},
  watch: {
    data: {
      handler(newValue, oldValue) {
        //console.log(`深度监听${this.$options.name}：`, newValue, oldValue);
        if (Object.keys(newValue || {}).length) {
          this.form = JSON.parse(JSON.stringify(newValue));
        }
      },
      deep: true, //深度监听
      immediate: true, //立即执行
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    // 关闭托盘
    close({ cb } = {}) {
      this.show_sgFloatDialog = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.sgHelp {
  .help-icon {
    line-height: 1;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    font-family: Microsoft YaHei;
    position: fixed;
    background-color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    z-index: 5;
    color: #000;
    right: 40px;
    bottom: 120px;
    font-weight: bold;
    transition: 0.2s;
    /*禁止选中文本*/
    user-select: none;
    &:hover {
      transform: scale(1.1);
      color: #409eff;
    }
    &:active {
      transform: translate(1px, 1px);
      color: white;
      background-color: #409eff;
    }
  }
  .content {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    .top {
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      font-size: 24px;
      .title1 {
        margin-bottom: 10px;
        // font-family: Alimama_ShuHeiTi_Bold;
      }
      .title2 {
        // font-family: Alimama_ShuHeiTi_Bold;
        /*渐变文字（仅谷歌内核浏览器支持）*/
        background: -webkit-linear-gradient(0deg, #409eff, #f56c6c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .bt {
      font-size: 14px;
      text-align: center;
      box-sizing: border-box;
      padding: 20px;
    }
  }
}
</style>

demo

<template>
  <sgHelp :data="data_sgHelp" @s="s_sgHelp" />
</template>
<script>
import sgHelp from "@/vue/components/admin/sgHelp";

export default {
  components: { sgHelp },
  data() {
    return {
      data_sgHelp: {},
    };
  },
  methods: {
    s_sgHelp(d) {
      console.log(``, d);
    },
  },
};
</script>

依赖【sgFloatDialog】自定义组件：浮动弹窗，支持修改尺寸、拖拽位置、最大化、还原、最小化、复位-CSDN博客文章浏览阅读22次。文章浏览阅读245次。它允许用户自定义吸附距离，可以设置拖拽行为是否禁用，以及停靠边界距离。组件在拖拽过程中提供了半透明效果，并能在不同阶段监听和处理鼠标事件以实现拖拽、吸附和停靠功能。核心原理就是在四条边、四个顶点加上透明的div，给不同方向提供按下移动鼠标监听 ，对应计算宽度高度、坐标变化。【sgDragSize】自定义组件：自定义拖拽修改DIV尺寸组件，适用于窗体大小调整_div拖拽调整大小-CSDN博客。【sgDragMove】自定义组件：自定义拖拽组件，仅支持拖拽、设置吸附屏幕边界距离。https://blog.csdn.net/qq_37860634/article/details/146408896