blackteay/vue-element-admin
1
0
Fork 0
mirror of https://github.com/PanJiaChen/vue-element-admin.git synced 2025-08-10 20:39:48 +08:00
Code Issues Releases Wiki Activity

优化 PanelGroup 某个Panel被选中时保持hover的状态

Browse Source
This commit is contained in:
SurKaa 2023-07-24 10:50:21 +08:00
parent 0caa975ee2
commit 72d1ca3d6f
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/dashboard/admin/components/PanelGroup.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<el-row :gutter="40" class="panel-group"> <el-row :gutter="40" class="panel-group">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('newVisitis')"> <div class="card-panel" :class="{active: clicked==='newVisitis'}" @click="handleSetLineChartData('newVisitis')">
<div class="card-panel-icon-wrapper icon-people"> <div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon" /> <svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div> </div>
@ -14,7 +14,7 @@
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('messages')"> <div class="card-panel" :class="{active: clicked==='messages'}" @click="handleSetLineChartData('messages')">
<div class="card-panel-icon-wrapper icon-message"> <div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" class-name="card-panel-icon" /> <svg-icon icon-class="message" class-name="card-panel-icon" />
</div> </div>
@ -27,7 +27,7 @@
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('purchases')"> <div class="card-panel" :class="{active: clicked==='purchases'}" @click="handleSetLineChartData('purchases')">
<div class="card-panel-icon-wrapper icon-money"> <div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="money" class-name="card-panel-icon" /> <svg-icon icon-class="money" class-name="card-panel-icon" />
</div> </div>
@ -40,7 +40,7 @@
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('shoppings')"> <div class="card-panel" :class="{active: clicked==='shoppings'}" @click="handleSetLineChartData('shoppings')">
<div class="card-panel-icon-wrapper icon-shopping"> <div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="shopping" class-name="card-panel-icon" /> <svg-icon icon-class="shopping" class-name="card-panel-icon" />
</div> </div>
@ -62,8 +62,16 @@ export default {
components: { components: {
CountTo CountTo
}, },
data() {
return {
// 被选中的值
clicked: 'newVisitis'
}
},
methods: { methods: {
handleSetLineChartData(type) { handleSetLineChartData(type) {
// 更新被选中的
this.clicked = type
this.$emit('handleSetLineChartData', type) this.$emit('handleSetLineChartData', type)
} }
} }
@ -89,7 +97,7 @@ export default {
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05); box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .05);
&:hover { &:hover, &.active {
.card-panel-icon-wrapper { .card-panel-icon-wrapper {
color: #fff; color: #fff;
} }