element plus card 悬浮菜单

东方fan

已于 2023-04-14 08:17:37 修改

阅读量1.3k

点赞数 1

分类专栏： Web 文章标签： javascript vue.js 前端

于 2023-04-13 20:47:34 首次发布

本文链接：https://blog.csdn.net/FunnyWhiteCat/article/details/130138913

版权

Web 专栏收录该内容

29 篇文章

订阅专栏

本文展示了如何使用Vue.js和ElementPlus库创建一个卡片组件，该组件在鼠标悬浮时显示一个向上滑出的操作菜单。卡片包含主机信息和性能进度条，点击可跳转至监控页面，同时提供控制台、编辑和删除等操作选项。

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

业务上需要实现一个功能，以卡片形式显示机器列表，当悬浮到卡片上时，在卡片上方向上滑出操作菜单。经过一番尝试总算实现了。效果如下：

悬浮菜单

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ElCard, ElRow, ElCol, ElProgress, ElIcon, ElButton } from 'element-plus'
import { ref } from 'vue'

const router = useRouter()
const visible = ref(false)

const monitor = (e: any) => {
  router.push('/dashboard/workplace')
  e.stopPropagation()
}

const control = (e: any) => {
  window.open('http://localhost:6080/vnc.html')
  e.stopPropagation()
}
</script>

<template>
  <el-row>
    <el-card
      class="box-card"
      shadow="hover"
      @click="monitor"
      @mouseleave="visible = !visible"
      @mouseenter="visible = !visible"
    >
      <el-row justify="center"><Icon icon="svg-icon:windows" :size="40" /></el-row>
      <el-row class="row" justify="center">主机1</el-row>
      <el-row class="row" align="middle">
        <el-col :span="6" class="text">CPU</el-col>
        <el-col :span="18">
          <el-progress :percentage="50" />
        </el-col>
      </el-row>
      <el-row class="row" align="middle">
        <el-col :span="6" class="text">内存</el-col>
        <el-col :span="18">
          <el-progress :percentage="50" />
        </el-col>
      </el-row>
      <el-row class="row" align="middle">
        <el-col :span="6" class="text">硬盘</el-col>
        <el-col :span="18">
          <el-progress :percentage="50" />
        </el-col>
      </el-row>
      <transition name="slide">
        <div class="card-pop-menu" v-show="visible">
          <el-row>
            <el-col :span="12">
              <ElButton type="primary" plain @click="monitor">监控</ElButton>
            </el-col>
            <el-col :span="12">
              <ElButton type="primary" plain>编辑</ElButton>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <ElButton type="primary" plain @click="control">控制台</ElButton>
            </el-col>
            <el-col :span="12">
              <ElButton type="danger" plain>删除</ElButton>
            </el-col>
          </el-row>
        </div>
      </transition>
    </el-card>

    <el-card class="box-card" shadow="hover">
      <el-row justify="center" align="middle" style="height: 200px">
        <el-icon color="#409EFC" size="40">
          <Plus />
        </el-icon>
      </el-row>
    </el-card>
  </el-row>
</template>

<style lang="less" scoped>
.box-card {
  width: 240px;
  height: 240px;
  margin: 0 20px 20px 0;
  .row {
    margin-top: 14px;
  }
  .text {
    font-size: 14px;
  }
  .card-pop-menu {
    border-width: 1px 0 0 0;
    position: relative;
    top: -34px;
    width: 238px;
    height: 88px;
    margin: -20px;
    button {
      width: 100%;
      height: 44px;
      border-width: 0;
      border-radius: 0;
    }
  }
}

.slide-enter-active {
  transition: all 0.2s linear;
}

.slide-leave-active {
  transition: all 0.2s linear;
}

.slide-enter-from,
.slide-leave-to {
  transform: translateY(88px);
}
</style>