业务上需要实现一个功能，以卡片形式显示机器列表，当悬浮到卡片上时，在卡片上方向上滑出操作菜单。经过一番尝试总算实现了。效果如下：
<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>
补：使用el-card第一行没有对齐解决方法
当使用element plus的el-card组件时候，第一行和后面会没有对齐。
<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列偏移。第一项没有偏移。将其改成：
<el-col v-for="(o, index) in 10" :key="o" :span="6" :offset="index >= 0 ? 1 : 0">
到此这篇关于elementplus card 悬浮菜单的实现的文章就介绍到这了,更多相关elementplus card 悬浮菜单内容请搜索本网站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本网站！
您可能感兴趣的文章:
- element-ui 设置菜单栏展开的方法
- Element-Ui组件 NavMenu 导航菜单的具体使用
- Element Dropdown下拉菜单的使用方法
- vue3使用element-plus搭建后台管理系统之菜单管理功能
- 解决elementui中NavMenu导航菜单高亮问题(解决多种情况)
- Vue3+Element-Plus实现左侧菜单折叠与展开功能示例
- Vue使用element-ui实现菜单导航
- vue.js+element-ui动态配置菜单的实例
- vue+element使用动态加载路由方式实现三级菜单页面显示的操作
- Vue+element-ui添加自定义右键菜单的方法示例
