123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209 |
- <template>
- <a-layout-sider
- :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
- width="200px"
- :collapsible="collapsible"
- v-model="collapsed"
- :trigger="null">
- <logo />
- <s-menu
- :collapsed="collapsed"
- :menu="menus"
- :theme="theme"
- @select="onSelect"
- :mode="mode"
- :style="smenuStyle">
- </s-menu>
- </a-layout-sider>
- </template>
- <script>
- import ALayoutSider from "ant-design-vue/es/layout/Sider"
- import Logo from '../tools/Logo'
- import SMenu from './index'
- import { mixin, mixinDevice } from '@/utils/mixin.js'
- export default {
- name: "SideMenu",
- components: { ALayoutSider, Logo, SMenu },
- mixins: [mixin, mixinDevice],
- props: {
- mode: {
- type: String,
- required: false,
- default: 'inline'
- },
- theme: {
- type: String,
- required: false,
- default: 'dark'
- },
- collapsible: {
- type: Boolean,
- required: false,
- default: false
- },
- collapsed: {
- type: Boolean,
- required: false,
- default: false
- },
- menus: {
- type: Array,
- required: true
- }
- },
- computed:{
- smenuStyle() {
- let style = { 'padding': '0' }
- if (this.fixSiderbar) {
- style['height'] = 'calc(100% - 59px)'
- style['overflow'] = 'auto'
- style['overflow-x'] = 'hidden'
- }
- return style
- }
- },
- methods: {
- onSelect (obj) {
- this.$emit('menuSelect', obj)
- }
- }
- }
- </script>
- <style lang="less" scoped>
- /* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
- .sider {
- @scrollBarSize: 10px;
- ul.ant-menu {
- /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
- &::-webkit-scrollbar {
- width: @scrollBarSize;
- height: @scrollBarSize;
- background-color: transparent;
- display: none;
- }
- & .-o-scrollbar {
- display: none;
- }
- /* 兼容IE */
- -ms-overflow-style: none;
- -ms-scroll-chaining: chained;
- -ms-content-zooming: zoom;
- -ms-scroll-rails: none;
- -ms-content-zoom-limit-min: 100%;
- -ms-content-zoom-limit-max: 500%;
- -ms-scroll-snap-type: proximity;
- -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
-
- /* 定义滚动条轨道 */
- &::-webkit-scrollbar-track {
- background-color: transparent;
- }
- /* 定义滑块 */
- &::-webkit-scrollbar-thumb {
- border-radius: @scrollBarSize;
- background-color: #eee;
- box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
- &:hover {
- background-color: #dddddd;
- }
- &:active {
- background-color: #bbbbbb;
- }
- }
- }
- /** 暗色系滚动条样式 */
- &.dark ul.ant-menu {
- &::-webkit-scrollbar-thumb {
- background-color: #666666;
- &:hover {
- background-color: #808080;
- }
- &:active {
- background-color: #999999;
- }
- }
- }
- }
- /* update_end author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
- </style>
- <!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
- <style lang="less">
- // .ant-menu.ant-menu-root {
- // & > .ant-menu-item:first-child {
- // background-color: transparent;
- // // & > a, & > a:hover {
- // // color: rgba(0, 0, 0, 0.65);
- // // }
- // // &.ant-menu-item-selected {
- // // & > a, & > a:hover {
- // // color: @primary-color;
- // // }
- // // }
- // }
- // &.ant-menu-dark > .ant-menu-item:first-child {
- // & > a, & > a:hover {
- // color: rgba(255, 255, 255, 0.65);
- // }
- // &.ant-menu-item-selected {
- // & > a, & > a:hover {
- // color: rgba(255, 255, 255, 1);
- // }
- // }
- // }
- // }
- </style>
- <!-- update_end author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
- <!--侧边栏的选中after显示在左侧 -->
- <style lang="less">
- ul.ant-menu-inline li.ant-menu-selected::after, ul.ant-menu-vertical li.ant-menu-selected::after,ul.ant-menu-vertical li.ant-menu-item-selected::after,ul.ant-menu-inline li.ant-menu-item-selected::after {
- -webkit-transform: scaleY(1);
- transform: scaleY(1);
- opacity: 1;
- -webkit-transition: opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
- transition: opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
- transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
- transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
- }
- .ant-menu-inline li.ant-menu-item::after ,.ant-menu-vertical li.ant-menu-item::after ,.ant-menu-vertical li.ant-menu-item::after{
- display: block;
- position: absolute;
- top: 0;
- left: 0px;
- right: 0;
- bottom: 0;
- border-left: 3px solid #1890ff;
- border-right: 0px ;
- -webkit-transform: scaleY(0.0001);
- transform: scaleY(0.0001);
- opacity: 0;
- -webkit-transition: opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
- transition: opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
- transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
- transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
- content: '';
- }
- </style>
|