blackteay/vue-element-admin
1
0
Fork 0
mirror of https://github.com/PanJiaChen/vue-element-admin.git synced 2025-08-07 18:25:45 +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>
<el-row :gutter="40" class="panel-group">
<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">
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div>
@ -14,7 +14,7 @@
</div>
</el-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">
<svg-icon icon-class="message" class-name="card-panel-icon" />
</div>
@ -27,7 +27,7 @@
</div>
</el-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">
<svg-icon icon-class="money" class-name="card-panel-icon" />
</div>
@ -40,7 +40,7 @@
</div>
</el-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">
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
</div>
@ -62,8 +62,16 @@ export default {
components: {
CountTo
},
data() {
return {
// 被选中的值
clicked: 'newVisitis'
}
},
methods: {
handleSetLineChartData(type) {
// 更新被选中的
this.clicked = type
this.$emit('handleSetLineChartData', type)
}
}
@ -89,7 +97,7 @@ export default {
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
&:hover {
&:hover, &.active {
.card-panel-icon-wrapper {
color: #fff;
}