浏览代码

fix(menu): 修改样式和文档 (#819)

yangjinjun3 4 年之前
父节点
当前提交
791e15efe4
共有 2 个文件被更改,包括 11 次插入4 次删除
  1. 10 4
      src/packages/__VUE/menu/doc.md
  2. 1 0
      src/packages/__VUE/menu/index.scss

+ 10 - 4
src/packages/__VUE/menu/doc.md

@@ -86,7 +86,7 @@ app.use(MenuItem);
 ### 自定义选项的选中态图标颜色
 
 ```html
-<nut-menu active-color="green">
+<nut-menu active-color="#0f0">
   <nut-menu-item title="全部商品" :options="options1"></nut-menu-item>
 </nut-menu>
 ```
@@ -96,8 +96,14 @@ app.use(MenuItem);
 ```html
 <nut-menu>
   <nut-menu-item title="筛选" ref="item">
-    <div class="customer-item-demo">
-      <div :style="{'display': 'flex','justify-content': 'space-between', 'align-items': 'center'}">
+    <div
+      :style="{
+        display: 'flex',
+        'justify-content': 'space-between',
+        'align-items': 'center'
+      }"
+    >
+      <div :style="{ 'font-size': '12px' }">我是自定义内容</div>
       <nut-button @click="handleClick">关闭</nut-button>
     </div>
   </nut-menu-item>
@@ -108,7 +114,7 @@ app.use(MenuItem);
   const item = ref<HTMLElement>()
 
   const handleClick = () => {
-    item.value.toggle()
+    (item.value as any).toggle()
   }
  }
 ```

+ 1 - 0
src/packages/__VUE/menu/index.scss

@@ -55,6 +55,7 @@
     li {
       line-height: 38px;
       padding-left: 24px;
+      box-sizing: border-box;
 
       .nut-icon-Check {
         vertical-align: middle;