mjz update
This commit is contained in:
mjz
262
vdoing/components/RightMenu.vue
Normal file
262
vdoing/components/RightMenu.vue
Normal file
@@ -0,0 +1,262 @@
|
||||
<template>
|
||||
<div class="right-menu-wrapper">
|
||||
<div
|
||||
title="切换视图"
|
||||
class="views-switch button blur theme-mode-but iconfont icon-yuedu"
|
||||
@mouseenter="showModeBox = true"
|
||||
@mouseleave="showModeBox = false"
|
||||
@click="showModeBox = true"
|
||||
>
|
||||
<transition name="mode">
|
||||
<ul
|
||||
class="select-box"
|
||||
ref="modeBox"
|
||||
v-show="showModeBox"
|
||||
@click.stop
|
||||
@touchstart.stop
|
||||
>
|
||||
<li
|
||||
v-for="item in modeList"
|
||||
:key="item.KEY"
|
||||
class="iconfont"
|
||||
:class="[item.icon, { active: item.KEY === modeView }]"
|
||||
@click="toggleMode(item.KEY)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<div class="docs-box" v-show="modeView === 'h5' ">
|
||||
<iframe :src="iframeUrl" frameborder="0" ref="iframeId"></iframe>
|
||||
</div>
|
||||
<div class="right-menu-margin" v-show="modeView === 'mu' ">
|
||||
<div class="right-menu-title">目录</div>
|
||||
<div class="right-menu-content">
|
||||
<div
|
||||
:class="[
|
||||
'right-menu-item',
|
||||
'level' + item.level,
|
||||
{ active: item.slug === hashText }
|
||||
]"
|
||||
v-for="(item, i) in headers"
|
||||
:key="i"
|
||||
>
|
||||
<a :href="'#' + item.slug">{{ item.title }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
headers: [],
|
||||
hashText: '',
|
||||
iframeUrl: 'https://miren123.gitee.io/colorui-h5/#/',
|
||||
modeView: 'h5',
|
||||
showModeBox: false,
|
||||
modeList: [
|
||||
{
|
||||
name: '视图模式',
|
||||
icon: 'icon-rijianmoshi',
|
||||
KEY: 'h5'
|
||||
},
|
||||
{
|
||||
name: '目录模式',
|
||||
icon: 'icon-yejianmoshi',
|
||||
KEY: 'mu'
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getHeadersData()
|
||||
this.getHashText()
|
||||
this.getIframeUrl()
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.headers = this.$page.headers
|
||||
this.getHashText()
|
||||
this.getIframeUrl()
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleMode (key) {
|
||||
this.modeView = key
|
||||
},
|
||||
getIframeUrl() {
|
||||
const path = this.$page.path.indexOf('base') > -1 ? '/' : this.$page.path
|
||||
this.iframeUrl = 'https://miren123.gitee.io/colorui-h5/#' + path || ''
|
||||
},
|
||||
getHeadersData() {
|
||||
this.headers = this.$page.headers
|
||||
},
|
||||
getHashText() {
|
||||
this.hashText = decodeURIComponent(window.location.hash.slice(1))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='stylus'>
|
||||
.views-switch
|
||||
position fixed
|
||||
top calc(var(--navbar-height) + 50px)
|
||||
right 31px
|
||||
width 2.2rem
|
||||
height 2.2rem
|
||||
line-height 2.2rem
|
||||
border-radius 50%
|
||||
box-shadow 0 2px 6px rgba(0, 0, 0, 0.15)
|
||||
margin-top 0.9rem
|
||||
text-align center
|
||||
cursor pointer
|
||||
transition all 0.5s
|
||||
background var(--blurBg)
|
||||
z-index 9
|
||||
&:hover
|
||||
background $accentColor
|
||||
box-shadow 0 0 15px $accentColor
|
||||
&:before
|
||||
color #fff
|
||||
.select-box
|
||||
margin 0
|
||||
padding 0.8rem 0
|
||||
position absolute
|
||||
bottom -2rem
|
||||
right 2rem
|
||||
background var(--mainBg)
|
||||
border 1px solid var(--borderColor)
|
||||
width 120px
|
||||
border-radius 6px
|
||||
box-shadow 0 0 15px rgba(255, 255, 255, 0.2)
|
||||
li
|
||||
list-style none
|
||||
line-height 2rem
|
||||
font-size 0.95rem
|
||||
&:hover
|
||||
color $accentColor
|
||||
&.active
|
||||
background-color rgba(150, 150, 150, 0.2)
|
||||
color $accentColor
|
||||
|
||||
.docs-box
|
||||
position fixed
|
||||
top calc(var(--navbar-height) + 50px)
|
||||
right 72px
|
||||
width 320px
|
||||
height 627px
|
||||
z-index -1
|
||||
background-image: url(https://www.uviewui.com/common/iPhone13.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
padding: 48px 13px 25px;
|
||||
iframe
|
||||
display block
|
||||
width 100%
|
||||
height 627px
|
||||
border-radius: 10px 10px 22px 22px
|
||||
|
||||
.theme-style-line
|
||||
.right-menu-wrapper
|
||||
.right-menu-margin
|
||||
border-left 1px solid var(--borderColor)
|
||||
.right-menu-wrapper
|
||||
width $rightMenuWidth
|
||||
float right
|
||||
margin-right -($rightMenuWidth + 55px)
|
||||
// margin-top -($navbarHeight *2 + 1.5rem)
|
||||
position sticky
|
||||
top 0
|
||||
font-size 0.8rem
|
||||
.right-menu-margin
|
||||
margin-top: ($navbarHeight + 1rem)
|
||||
border-radius 3px
|
||||
overflow hidden
|
||||
.right-menu-title
|
||||
padding 10px 15px 0 15px
|
||||
background var(--mainBg)
|
||||
font-size 1rem
|
||||
&:after
|
||||
content ''
|
||||
display block
|
||||
width 100%
|
||||
height 1px
|
||||
background var(--borderColor)
|
||||
margin-top 10px
|
||||
.right-menu-content
|
||||
max-height 80vh
|
||||
position relative
|
||||
overflow hidden
|
||||
background var(--mainBg)
|
||||
padding 4px 3px 4px 0
|
||||
&::-webkit-scrollbar
|
||||
width 3px
|
||||
height 3px
|
||||
&::-webkit-scrollbar-track-piece
|
||||
background none
|
||||
&::-webkit-scrollbar-thumb:vertical
|
||||
background-color hsla(0, 0%, 49%, 0.3)
|
||||
&:hover
|
||||
overflow-y auto
|
||||
padding-right 0
|
||||
.right-menu-item
|
||||
padding 4px 15px
|
||||
// border-left 1px solid var(--borderColor)
|
||||
overflow hidden
|
||||
white-space nowrap
|
||||
text-overflow ellipsis
|
||||
position relative
|
||||
&.level2
|
||||
font-size 0.8rem
|
||||
&.level3
|
||||
padding-left 27px
|
||||
&.level4
|
||||
padding-left 37px
|
||||
&.level5
|
||||
padding-left 47px
|
||||
&.level6
|
||||
padding-left 57px
|
||||
&.active
|
||||
&:before
|
||||
content ''
|
||||
position absolute
|
||||
top 5px
|
||||
left 0
|
||||
width 3px
|
||||
height 14px
|
||||
background $accentColor
|
||||
border-radius 0 4px 4px 0
|
||||
a
|
||||
color $accentColor
|
||||
opacity 1
|
||||
a
|
||||
color var(--textColor)
|
||||
opacity 0.75
|
||||
display inline-block
|
||||
width 100%
|
||||
overflow hidden
|
||||
white-space nowrap
|
||||
text-overflow ellipsis
|
||||
&:hover
|
||||
opacity 1
|
||||
&:hover
|
||||
color $accentColor
|
||||
.have-body-img
|
||||
.right-menu-wrapper
|
||||
.right-menu-margin
|
||||
// padding 0.3rem 0
|
||||
// background var(--sidebarBg)
|
||||
// border-radius 5px
|
||||
.right-menu-item
|
||||
// border-color transparent
|
||||
// &.active
|
||||
// border-left 0.2rem solid $accentColor
|
||||
// &:hover
|
||||
// border-left 0.2rem solid $accentColor
|
||||
</style>
|
||||
Reference in New Issue
Block a user