fix: 修复业务组件编辑的时候,返回没有激活对应的侧边菜单的情况

main
wu.jian2 2 years ago
parent 6a948e4f7e
commit b5b3119f19

@ -2,10 +2,10 @@
<div class="side-catalog-wrap"> <div class="side-catalog-wrap">
<el-scrollbar class="side-catalog-box"> <el-scrollbar class="side-catalog-box">
<div <div
v-for="(com,index) in componentList" v-for="(com, index) in componentList"
:key="index" :key="index"
class="component-item-box" class="component-item-box"
:class="{'active-catalog':activeType === com.type}" :class="{ 'active-catalog': activeType === com.type }"
@click="componentHandle(com)" @click="componentHandle(com)"
> >
{{ com.name }} {{ com.name }}
@ -16,7 +16,7 @@
<script> <script>
export default { export default {
components: { }, components: {},
data () { data () {
return { return {
componentList: [ componentList: [
@ -40,7 +40,9 @@ export default {
const type = this.$route?.query?.type const type = this.$route?.query?.type
if (type) { if (type) {
this.activeType = type this.activeType = type
this.$nextTick(() => {
this.$emit('getPageInfo', type) this.$emit('getPageInfo', type)
})
} }
}, },
methods: { methods: {
@ -53,8 +55,9 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~packages/assets/style/bsTheme.scss'; @import '~packages/assets/style/bsTheme.scss';
.side-catalog-wrap {
.side-catalog-wrap {
.component-item-box { .component-item-box {
width: 100%; width: 100%;
padding: 8px 16px; padding: 8px 16px;
@ -65,57 +68,69 @@ export default {
cursor: pointer; cursor: pointer;
} }
} }
} }
.side-catalog-wrap{
.side-catalog-wrap {
padding-top: 16px; padding-top: 16px;
width: 220px; width: 220px;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
color: var(--bs-el-title); color: var(--bs-el-title);
background-color: var(--bs-background-2); background-color: var(--bs-background-2);
.side-catalog-box{
.side-catalog-box {
height: calc(100% - 50px); height: calc(100% - 50px);
overflow-y: auto; overflow-y: auto;
.side-catalog-all{
.side-catalog-all {
font-weight: bold; font-weight: bold;
} }
.side-catalog-item{
.side-catalog-item {
width: 100%; width: 100%;
padding: 8px 16px; padding: 8px 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
&:hover{
&:hover {
cursor: pointer; cursor: pointer;
} }
.el-icon-more{
.el-icon-more {
transform: rotate(90deg); transform: rotate(90deg);
color: var(--bs-el-title); color: var(--bs-el-title);
font-weight: 400; font-weight: 400;
} }
.active-icon-more{
color:var(--bs-el-text); .active-icon-more {
color: var(--bs-el-text);
} }
.catalog-name{
overflow:hidden; .catalog-name {
overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
-o-text-overflow:ellipsis; -o-text-overflow: ellipsis;
} }
.page-list-dropdown{
.page-list-dropdown {
opacity: 0; opacity: 0;
} }
.dropdown-show{
.dropdown-show {
opacity: 1; opacity: 1;
} }
} }
/*菜单激活时的样式*/ /*菜单激活时的样式*/
.active-catalog{ .active-catalog {
background-image: linear-gradient(to right , var(--bs-el-color-primary), var(--bs-background-2)); background-image: linear-gradient(to right, var(--bs-el-color-primary), var(--bs-background-2));
background-repeat: round; background-repeat: round;
color: var(--bs-el-text); color: var(--bs-el-text);
} }
} }
.add-catalog-box{
.add-catalog-box {
padding: 10px 0; padding: 10px 0;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -123,28 +138,33 @@ export default {
align-items: center; align-items: center;
border-radius: 10px; border-radius: 10px;
margin: 0 8px; margin: 0 8px;
&:hover{
&:hover {
background-color: var(--bs-background-1); background-color: var(--bs-background-1);
cursor: pointer; cursor: pointer;
color: var(--bs-el-text);; color: var(--bs-el-text);
;
} }
.el-icon-plus{
.el-icon-plus {
padding: 0 5px; padding: 0 5px;
} }
} }
} }
.dropdown-menu-box{
.dropdown-menu-box {
left: 50%; left: 50%;
transform: translateX(-40%); transform: translateX(-40%);
width: 100px!important; width: 100px !important;
/deep/.el-dropdown-menu__item{
/deep/.el-dropdown-menu__item {
text-align: center; text-align: center;
padding: 5px; padding: 5px;
} }
/deep/.popper__arrow{
/deep/.popper__arrow {
left: 50% !important; left: 50% !important;
transform: translateX(-50%) !important; transform: translateX(-50%) !important;
} }
} }</style>
</style>

Loading…
Cancel
Save