快捷導(dǎo)航

elementplus?card?懸浮菜單的實(shí)現(xiàn)

更新時(shí)間：2023年07月03日 09:50:23 作者：東方fan

本文主要介紹了elementplus?card?懸浮菜單的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

業(yè)務(wù)上需要實(shí)現(xiàn)一個(gè)功能，以卡片形式顯示機(jī)器列表，當(dāng)懸浮到卡片上時(shí)，在卡片上方向上滑出操作菜單。經(jīng)過(guò)一番嘗試總算實(shí)現(xiàn)了。效果如下：

懸浮菜單

<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">主機(jī)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">內(nèi)存</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">監(jiān)控</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">控制臺(tái)</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>

補(bǔ)：使用el-card第一行沒(méi)有對(duì)齊解決方法

當(dāng)使用element plus的el-card組件時(shí)候，第一行和后面會(huì)沒(méi)有對(duì)齊。

  <el-row>
    <el-col v-for="(o, index) in 10" :key="o" :span="6" :offset="index >= 0 ? 2 : 0">
      <el-card :body-style="{ padding: '0px' }">
          <img
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
            class="image"
          />
        <div style="padding: 14px">
          <span>Yummy hamburger</span>
          <div class="bottom">
            <time class="time">{{ currentDate }}</time>
            <el-button text class="button">Operating</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>

原因是el-col添加了offset列偏移。第一項(xiàng)沒(méi)有偏移。將其改成：

<el-col v-for="(o, index) in 10" :key="o" :span="6" :offset="index >= 0 ? 1 : 0">

到此這篇關(guān)于elementplus card 懸浮菜單的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)elementplus card 懸浮菜單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: