elementplus card 悬浮菜单的实现
作者：东方fan
本文主要介绍了elementplus card 悬浮菜单的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
业务上需要实现一个功能，以卡片形式显示机器列表，当悬浮到卡片上时，在卡片上方向上滑出操作菜单。经过一番尝试总算实现了。效果如下：
<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 悬浮菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！