update Menu

update Menu

update Menu
梁灏
1 parent ab673ebc
Showing 4 changed files with 42 additions and 4 deletions Show diff stats
src/components/menu/menu.vue
src/styles/components/menu.less
src/styles/themes/default/custom.less
test/routers/menu.vue
@@ -45,7 +45,7 @@
                     `${prefixCls}`,
                     {
                         [`${prefixCls}-${this.mode}`]: this.mode,
-                        [`${prefixCls}-${this.theme}`]: this.theme
+                        [`${prefixCls}-${this.theme}`]: this.mode === 'horizontal' || (this.mode === 'vertical' && this.theme !== 'primary')
                     }
                 ]
             }
@@ -166,6 +166,11 @@
             padding-left: 28px;
         }
     }
+    &-dark&-vertical &-item-group{
+        &-title{
+            color: @text-color;
+        }
+    }
  
     &-light&-vertical &-item{
         border-right: 2px solid transparent;
@@ -175,5 +180,30 @@
             z-index: 2;
         }
     }
+
+    &-dark&-vertical &-item, &-dark&-vertical &-submenu-title{
+        color: @subsidiary-color;
+        &-active:not(.@{menu-prefix-cls}-submenu), &:hover{
+            background: @menu-dark-active-bg;
+        }
+        &-active:not(.@{menu-prefix-cls}-submenu){
+            color: @primary-color;
+            border-right: 2px solid @primary-color;
+        }
+    }
+    &-dark&-vertical &-submenu &-item{
+        &:hover{
+            background: @title-color;
+        }
+        &-active{
+            border-right: none;
+            color: #fff;
+            background: @primary-color;
+        }
+    }
+
+    &-dark&-vertical &-opened{
+        background: @menu-dark-active-bg;
+    }
 }
 .select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls);
 \ No newline at end of file
@@ -42,6 +42,7 @@
 @table-td-stripe-bg           : #f5f7f9;
 @table-td-hover-bg            : #ebf7ff;
 @table-td-highlight-bg        : #ebf7ff;
+@menu-dark-active-bg          : #313540;
  
 // Shadow
 @shadow-color           : rgba(0, 0, 0, .2);
 <template>
     <div>
-        <Menu mode="horizontal" active-key="1">
+        <Menu mode="horizontal" :theme="theme" active-key="1">
             <Menu-item key="1">
                 <Icon type="ionic"></Icon><span>导航一</span>
             </Menu-item>
@@ -19,7 +19,13 @@
             <Menu-item key="4">导航四</Menu-item>
         </Menu>
         <br><br>
-        <Menu :mode="mode" active-key="1" @on-open-change="change">
+        <Radio-group :model.sync="theme">
+            <Radio value="light"></Radio>
+            <Radio value="dark"></Radio>
+            <Radio value="primary"></Radio>
+        </Radio-group>
+        <br><br>
+        <Menu :mode="mode" :theme="theme" active-key="1" @on-open-change="change">
             <Menu-item key="1">
                 <Icon type="ionic"></Icon>
                 <span>导航一</span>
@@ -114,7 +120,8 @@
         props: {},
         data () {
             return {
-                mode: 'vertical'
+                mode: 'vertical',
+                theme: 'dark'
             }
         },
         computed: {},