1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- <template>
- <a-layout-sider
- :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
- width="160px"
- :collapsible="collapsible"
- v-model="collapsed"
- :trigger="null">
- <vue-scroll :ops="ops" style="width:100%;height:100%">
- <logo />
- <s-menu
- :collapsed="collapsed"
- :menu="menus"
- :theme="theme"
- :mode="mode"
- @select="onSelect"
- style="padding: 10px 0px;"></s-menu>
- </vue-scroll>
- </a-layout-sider>
- </template>
- <script>
- import Logo from '@/components/tools/Logo'
- import SMenu from './index'
- import { mixin, mixinDevice } from '@/utils/mixin'
- export default {
- name: 'SideMenu',
- components: { 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
- }
- },
- data () {
- return {
- ops: {
- vuescroll: {},
- scrollPanel: {},
- rail: {
- keepShow: true
- },
- bar: {
- hoverStyle: true,
- onlyShowBarOnScroll: false, // 是否只有滚动的时候才显示滚动条
- background: this.navTheme == 'dark' ? '#00557f' : '#9d9d9d', // 滚动条颜色
- opacity: 0.5, // 滚动条透明度
- 'overflow-x': 'hidden'
- }
- }
- }
- },
- methods: {
- onSelect (obj) {
- this.$emit('menuSelect', obj)
- }
- }
- }
- </script>
- <style lang="less">
- /deep/.__bar-is-vertical {
- right: -1px !important;
- }
- /deep/.__bar-is-horizontal {
- display: none !important;
- }
- </style>
|