使用vue实现一个网页的贴边组件。

使用vue实现一个网页的贴边组件。

先来看效果：



2024-01-04 10.46.22
https://www.haolu.com/share/V00O6HWYR8/36207fc21c35b2a8e09bf22787a81527

下面是具体代码实现：

1、父组件。（用于贴边展示的组件）

<template>
  <div class="floating-component">
    <!-- 悬浮内容 -->
    <slot>
      <!-- 点击登录认证进行弹框 -->
      <div v-if="logbtnFlag" style="margin-bottom: 2%;">
        <el-popover placement="right" width="300" trigger="click" append-to-body>

          <!-- 登录认证表单 -->
          <Auth-login v-if="authFlag && logbtnFlag" @close-event="closeEvent"></Auth-login>

          <el-button type="primary" class="vertical-button" slot="reference" @click="openAuth">数电登录&认证</el-button>

        </el-popover>
      </div>
      <!-- 默认展示图标 -->
      <div @mouseover="handleMouseEnter" @mouseleave="handleMouseLeave">
        <el-button type="primary" @click="openBtn">
          <i class="el-icon-d-arrow-left" v-show="showIcon"></i>
          <span v-show="!showIcon && !logbtnFlag">{{btnText}}</span>
          <span v-show="!showIcon && logbtnFlag">{{btnText}}</span>
        </el-button>
      </div>
    </slot>
  </div>
</template>
<script>
  import AuthLogin from './auth.vue';
  export default {
    components: {
      AuthLogin
    },
    data() {
      return {
        authFlag: false, //是否展示认证登录组件
        showIcon: true, //是否展示图标
        logbtnFlag: true, //是否展示登录认证按钮
        btnText: '收起'
      };
    },
    created() {},
    methods: {
      //监听组件传来数据
      closeEvent(val) {
        this.authFlag = false
        this.showIcon = true
      },
      openAuth() {
        this.authFlag = !this.authFlag
      },
      handleMouseEnter() {
        this.showIcon = false
      },
      handleMouseLeave() {
        this.showIcon = true
      },
      openBtn() {
        this.authFlag = false
        this.logbtnFlag = !this.logbtnFlag
        if (this.logbtnFlag) {
          this.btnText = "收起"
        } else {
          this.btnText = "展开"
        }
      }
    },
  };
</script>

<style>
  .vertical-button {
    width: 46px;
    text-align: center;
    white-space: initial;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 800;
    font-size: 14px;
    line-height: 23px;
  }

  .floating-component {
    position: fixed;
    float: right;
    top: 45%;
    right: -1%;
    /* background-color: rgba(0, 0, 0, 0.5); */
    color: white;
    padding: 10px;
    border-radius: 4px;
    z-index: 1000;
    /* 设置 z-index 确保悬浮在顶层 */
  }
</style>

2、子组件（用于处理业务逻辑的页面）

<!-- 登录认证表单 -->
<template>
 <div>
<h1>具体业务表单</h1>
 </div>
</template>
<script>
  import {xxx} from "@/api/xxx";
  export default {
    components: {
     
    },
    data() {
      return {
        
      };
    },
    created() {
      this.init()
    },
    methods: {
      init() {},
    }
  };
</script>

<style>
  
</style>