taolin/docs_vue2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: fix toggle button display

Browse Source
This commit is contained in:
Justineo 2021-10-22 13:01:41 +08:00
parent 9411435247
commit b8432a870e
No known key found for this signature in database
GPG Key ID: B73F0979CF18A0EA
1 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/OneMenu.vue
View File

@ -33,12 +33,19 @@
<section class="search"> <section class="search">
<one-search/> <one-search/>
</section> </section>
<button <div
class="toggle" class="toggle"
@click="toggleMenu" @click="toggleMenu"
> >
<veui-icon name="hamburger"/> <veui-icon
</button> class="expanded-icon"
name="chevron-left"
/>
<veui-icon
class="collapsed-icon"
name="hamburger"
/>
</div>
</header> </header>
</template> </template>
<template #item-label="{ label, sub }"> <template #item-label="{ label, sub }">
@ -54,6 +61,7 @@ import OneSearch from './OneSearch'
import { Menu, Icon } from 'veui' import { Menu, Icon } from 'veui'
import outside from 'veui/directives/outside' import outside from 'veui/directives/outside'
import 'veui-theme-dls-icons/hamburger' import 'veui-theme-dls-icons/hamburger'
import 'veui-theme-dls-icons/chevron-left'
export default { export default {
name: 'one-menu', name: 'one-menu',
@ -217,12 +225,12 @@ export default {
@media (max-width 480px) @media (max-width 480px)
.one-nav .one-nav
z-index 20 z-index 20
transition transform 0.3s transition transform 0.3s, box-shadow 0.3s
transform translateX(-100%) transform translateX(-100%)
&.expanded &.expanded
transform translateX(0) transform translateX(0)
box-shadow 0 0 12px rgba(0, 0, 0, 0.2) box-shadow 0 0 48px rgba(0, 0, 0, 0.2)
header header
position relative position relative
@ -251,4 +259,23 @@ export default {
left -19px left -19px
width 20px width 20px
background-color #fff background-color #fff
.expanded-icon
.collapsed-icon
position absolute
transition transform 0.3s, opacity 0.3s
.expanded-icon
margin-left -4px
opacity 0
transform translateX(-10px)
.expanded &
opacity 1
transform none
.collapsed-icon
.expanded &
opacity 0
transform translateX(10px)
</style> </style>