openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Demo：只读模式下隐藏相关侧边栏

Browse Source
This commit is contained in:
街角小林 2024-08-23 15:34:50 +08:00
parent 834651d471
commit faa2b94bc8
1 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/src/pages/Edit/components/SidebarTrigger.vue
View File

@ -4,7 +4,7 @@
@click.stop @click.stop
:class="{ hasActive: show && activeSidebar, show: show, isDark: isDark }" :class="{ hasActive: show && activeSidebar, show: show, isDark: isDark }"
> >
<div class="toggleShowBtn" :class="{hide: !show}" @click="show = !show"> <div class="toggleShowBtn" :class="{ hide: !show }" @click="show = !show">
<span class="iconfont iconjiantouyou"></span> <span class="iconfont iconjiantouyou"></span>
</div> </div>
<div class="trigger"> <div class="trigger">
@ -41,11 +41,25 @@ export default {
computed: { computed: {
...mapState({ ...mapState({
isDark: state => state.localConfig.isDark, isDark: state => state.localConfig.isDark,
activeSidebar: state => state.activeSidebar activeSidebar: state => state.activeSidebar,
isReadonly: state => state.isReadonly
}), }),
triggerList() { triggerList() {
return sidebarTriggerList[this.$i18n.locale] || sidebarTriggerList.zh let list = sidebarTriggerList[this.$i18n.locale] || sidebarTriggerList.zh
if (this.isReadonly) {
list = list.filter(item => {
return ['outline', 'shortcutKey'].includes(item.value)
})
}
return list
}
},
watch: {
isReadonly(val) {
if (val) {
this.setActiveSidebar(null)
}
} }
}, },
methods: { methods: {
@ -72,10 +86,10 @@ export default {
background-color: #262a2e; background-color: #262a2e;
.triggerItem { .triggerItem {
color: hsla(0,0%,100%,.6); color: hsla(0, 0%, 100%, 0.6);
&:hover { &:hover {
background-color: hsla(0,0%,100%,.05); background-color: hsla(0, 0%, 100%, 0.05);
} }
} }
} }
@ -98,7 +112,7 @@ export default {
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
cursor: pointer; cursor: pointer;
transition: left .1s linear; transition: left 0.1s linear;
z-index: 0; z-index: 0;
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;