前端vue2实现头部组件(自定义背景icon+抽屉式使用指南展示)

本文介绍了如何在Vue2中创建一个可全局复用的头部组件`OperatingGuide.vue`，该组件包含自定义背景图、抽屉式使用指南。组件结构包括左侧文字栏、中间图标和右侧的使用指南按钮，点击按钮会显示一个从右侧滑出的使用说明drawer。此外，文章还提供了页面使用该组件的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、文章引导

二、博主简介

🌏博客首页： 水香木鱼
📌专栏收录：后台管理
📑文章摘要：vue2 后台管理 组件化 重复使用 CSS3
💌木鱼寄语：故木秀于林，风必摧之；堆出于岸，流必湍之；行高于人，众必非之。

三、文章内容

本期木鱼为大家分享的是，前端vue2实现头部组件【可全局复用】

在这里插入图片描述

①、OperatingGuide.vue 组件

使用指南小icon 需要自行替换

<!--使用指南-->
<template>
  <div class="intro">
    <!-- 左侧文字栏 -->
    <div class="intro-text">
      <div class="main">
        <span class="word1">{{ data.name }}</span>
        <span class="info1">{{ data.intro }}</span>
        <div class="layer"></div>
      </div>
    </div>
    <!-- 中间图标 -->
    <div class="intro-pic">
      <!-- 背景icon 自行去替换 -->
      <img :src="data.img" />
    </div>
    <!-- 右侧 文字提示 -->
    <div class="intro-guide" @click="showGuide">
      <!-- icon 自行去替换 -->
      <img
        class="icon1"
        referrerpolicy="no-referrer"
        src="@/assets/icon_guide.png"
      />
      <span class="title1">使用指南</span>
    </div>
    <!-- 显示-使用指南 -->
    <el-drawer
      :visible.sync="guideVisible"
      :with-header="false"
      :direction="'rtl'"
      size="30%"
    >
      <div class="guide">
        <div class="guide-title">开发环境</div>
        <div class="guide-content">
          <p>演示环境介绍</p>
          <p>演示文字.....................................</p>
          <p>演示文字.....................................</p>
          <p>演示文字.....................................</p>
          <p>演示文字.....................................</p>
          <p>演示文字.....................................</p>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "OperatingGuide",
  props: ["data"],
  data() {
    return {
      guideVisible: false,
    };
  },
  methods: {
    showGuide() {
      this.guideVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.intro {
  width: 100%;
  height: 200px;
  border-radius: 2px;
  background: linear-gradient(83deg, #ffffff 0%, #f4f8ff 100%);
  position: relative;
  display: flex;
  &-text {
    margin: 41px 0px 20px 51px;
    width: 60%;
    .main {
      width: 97%;
      .word1 {
        width: 100%;
        height: 28px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(66, 70, 86, 1);
        font-size: 20px;
        text-transform: uppercase;
        font-family: PingFangSC-Heavy;
        white-space: nowrap;
        line-height: 28px;
        text-align: left;
      }
      .info1 {
        width: 100%;
        max-height: 68px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(66, 70, 86, 1);
        font-size: 13px;
        text-transform: uppercase;
        line-height: 17px;
        text-align: left;
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .layer {
        width: 46px;
        height: 5px;
        border-radius: 2.5px 0 0 2.5px;
        background-image: linear-gradient(
          90deg,
          rgb(124, 70, 7) 0%,
          rgba(254, 254, 255, 0) 100%
        );
        margin-top: 10px;
      }
    }
  }
  &-pic {
    width: 20%;
    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
  &-guide {
    height: 38px;
    margin: 12px 30px;
    text-align: right;
    cursor: pointer;
    .icon1 {
      width: 16px;
      height: 16px;
      margin: -4px 4px -4px -4px;
    }
    .title1 {
      height: 17px;
      display: inline-block;
      overflow-wrap: break-word;
      color: rgba(66, 70, 86, 1);
      font-size: 12px;
      text-transform: uppercase;
      white-space: nowrap;
      line-height: 17px;
    }
  }
}
.intro-guide {
  display: flex;
  align-items: center;
}
.guide {
  padding: 20px 32px;
  &-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 36px;
  }
  &-content p {
    line-height: 22px;
    margin-bottom: 13px;
    font-size: 13px;
  }
}
</style>

②、页面使用方式

<template>
  <div>
    <OperatingGuide :data="intro"></OperatingGuide>
  </div>
</template>
<script>
import OperatingGuide from "../../components/OperatingGuide.vue";
export default {
  components: {
    OperatingGuide,
  },
  data() {
    return {
      // 顶部介绍
      intro: {
        name: "演示仓库",
        intro: "演示文字简介...........................",
        img: require("@/assets/warehouse.png"),//需要自行替换背景icon
      },
    };
  },
};
</script>