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.$emit('getPageInfo', type) this.$nextTick(() => {
this.$emit('getPageInfo', type)
})
} }
}, },
methods: { methods: {
@ -53,9 +55,38 @@ 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 {
.component-item-box { .side-catalog-wrap {
.component-item-box {
width: 100%;
padding: 8px 16px;
display: flex;
justify-content: space-between;
&:hover {
cursor: pointer;
}
}
}
.side-catalog-wrap {
padding-top: 16px;
width: 220px;
height: 100%;
box-sizing: border-box;
color: var(--bs-el-title);
background-color: var(--bs-background-2);
.side-catalog-box {
height: calc(100% - 50px);
overflow-y: auto;
.side-catalog-all {
font-weight: bold;
}
.side-catalog-item {
width: 100%; width: 100%;
padding: 8px 16px; padding: 8px 16px;
display: flex; display: flex;
@ -64,87 +95,76 @@ export default {
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
}
} .el-icon-more {
.side-catalog-wrap{ transform: rotate(90deg);
padding-top: 16px; color: var(--bs-el-title);
width: 220px; font-weight: 400;
height: 100%;
box-sizing: border-box;
color: var(--bs-el-title);
background-color: var(--bs-background-2);
.side-catalog-box{
height: calc(100% - 50px);
overflow-y: auto;
.side-catalog-all{
font-weight: bold;
}
.side-catalog-item{
width: 100%;
padding: 8px 16px;
display: flex;
justify-content: space-between;
&:hover{
cursor: pointer;
}
.el-icon-more{
transform: rotate(90deg);
color: var(--bs-el-title);
font-weight: 400;
}
.active-icon-more{
color:var(--bs-el-text);
}
.catalog-name{
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
.page-list-dropdown{
opacity: 0;
}
.dropdown-show{
opacity: 1;
}
} }
/*菜单激活时的样式*/
.active-catalog{ .active-icon-more {
background-image: linear-gradient(to right , var(--bs-el-color-primary), var(--bs-background-2));
background-repeat: round;
color: var(--bs-el-text); color: var(--bs-el-text);
} }
}
.add-catalog-box{ .catalog-name {
padding: 10px 0; overflow: hidden;
box-sizing: border-box; white-space: nowrap;
display: flex; text-overflow: ellipsis;
justify-content: center; -o-text-overflow: ellipsis;
align-items: center;
border-radius: 10px;
margin: 0 8px;
&:hover{
background-color: var(--bs-background-1);
cursor: pointer;
color: var(--bs-el-text);;
} }
.el-icon-plus{
padding: 0 5px; .page-list-dropdown {
opacity: 0;
}
.dropdown-show {
opacity: 1;
} }
} }
/*菜单激活时的样式*/
.active-catalog {
background-image: linear-gradient(to right, var(--bs-el-color-primary), var(--bs-background-2));
background-repeat: round;
color: var(--bs-el-text);
}
} }
.dropdown-menu-box{
left: 50%; .add-catalog-box {
transform: translateX(-40%); padding: 10px 0;
width: 100px!important; box-sizing: border-box;
/deep/.el-dropdown-menu__item{ display: flex;
text-align: center; justify-content: center;
padding: 5px; align-items: center;
border-radius: 10px;
margin: 0 8px;
&:hover {
background-color: var(--bs-background-1);
cursor: pointer;
color: var(--bs-el-text);
;
} }
/deep/.popper__arrow{
left: 50% !important; .el-icon-plus {
transform: translateX(-50%) !important; padding: 0 5px;
} }
} }
</style>
}
.dropdown-menu-box {
left: 50%;
transform: translateX(-40%);
width: 100px !important;
/deep/.el-dropdown-menu__item {
text-align: center;
padding: 5px;
}
/deep/.popper__arrow {
left: 50% !important;
transform: translateX(-50%) !important;
}
}</style>

Loading…
Cancel
Save