docs(menu、divider): 增加在线文档、Menu 组件修复 issue 958 (#972)

src/packages/__VUE/divider/doc.md

@@ -23,43 +23,85 @@ app.use(Divider);
 
 默认渲染一条水平分割线。
 
+:::demo
+
 ``` html
-<nut-divider />
+<template>
+    <nut-cell>
+        <nut-divider />
+    </nut-cell>
+</template>
 ```
 
+:::
+
 ### 展示文本
 
 通过插槽在可以分割线中间插入内容。
 
+:::demo
+
 ``` html
-<nut-divider>文本</nut-divider>
+<template>
+    <nut-cell>
+        <nut-divider>文本</nut-divider>
+    </nut-cell>
+</template>
 ```
 
+:::
+
 ### 内容位置
 
 通过 content-position 指定内容所在位置。
 
+:::demo
+
 ``` html
-<nut-divider content-position="left">文本</nut-divider>
-<nut-divider content-position="right">文本</nut-divider>
+<template>
+    <nut-cell>
+        <nut-divider content-position="left">文本</nut-divider>
+    </nut-cell>
+    <nut-cell>
+        <nut-divider content-position="right">文本</nut-divider>
+    </nut-cell>
+</template>
 ```
 
+:::
+
 ### 虚线
 
 添加 dashed 属性使分割线渲染为虚线。
 
+:::demo
+
 ``` html
-<nut-divider dashed />
+<template>
+    <nut-cell>
+        <nut-divider dashed>文本</nut-divider>
+    </nut-cell>
+</template>
 ```
 
+:::
+
 ### 自定义样式
 
 可以直接通过 style 属性设置分割线的样式。
 
+:::demo
+
 ``` html
-<nut-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">文本</nut-divider>
+<template>
+    <nut-cell>
+        <nut-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">文本</nut-divider>
+    </nut-cell>
+</template>
 ```
 
+:::
+
 ## API
 
 ### Props

src/packages/__VUE/menu/doc.md

@@ -21,13 +21,17 @@ app.use(Menu);
 
 ### 基础用法
 
+:::demo
+
 ```html
-<nut-menu>
-  <nut-menu-item v-model="state.value1" :options="state.options1" />
-  <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
-</nut-menu>
-```
-```js
+<template>
+  <nut-menu>
+    <nut-menu-item v-model="state.value1" :options="state.options1" />
+    <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
+  </nut-menu>
+</template>
+
+<script>
 import { reactive, ref } from 'vue';
 
 export default {
@@ -43,6 +47,92 @@ export default {
         { text: '好评排序', value: 'b' },
         { text: '销量排序', value: 'c' },
       ],
+      value1: 0,
+      value2: 'a'
+    });
+
+    const handleChange = val => {
+      console.log('val', val);
+    }
+
+    return {
+      state,
+      handleChange
+    };
+  }
+}
+</script>
+```
+
+:::
+
+### 自定义菜单内容
+使用实例上的 toggle 方法可以手动关闭弹框。
+
+:::demo
+
+```html
+<template>
+  <nut-menu>
+    <nut-menu-item v-model="state.value1" :options="state.options1" />
+    <nut-menu-item title="筛选" ref="item">
+      <div :style="{display: 'flex', flex: 1, 'justify-content': 'space-between', 'align-items': 'center'}">
+        <div>自定义内容</div>
+        <nut-button @click="onConfirm">关闭</nut-button>
+      </div>
+    </nut-menu-item>
+  </nut-menu>
+</template>
+
+<script>
+import { reactive, ref } from 'vue';
+
+export default {
+  setup() {
+    const state = reactive({
+      options1: [
+        { text: '全部商品', value: 0 },
+        { text: '新款商品', value: 1 },
+        { text: '活动商品', value: 2 }
+      ],
+      value1: 0
+    });
+
+    const item = ref('');
+
+    const onConfirm = () => {
+      item.value.toggle();
+    }
+
+    return {
+      state,
+      item,
+      onConfirm
+    };
+  }
+}
+</script>
+```
+
+:::
+
+### 一行两列
+
+:::demo
+
+```html
+<template>
+  <nut-menu>
+    <nut-menu-item v-model="state.value3" :cols="2" :options="state.options3" />
+  </nut-menu>
+</template>
+
+<script>
+import { reactive, ref } from 'vue';
+
+export default {
+  setup() {
+    const state = reactive({
       options3: [
         { text: '全部商品', value: 0 },
         { text: '家庭清洁/纸品', value: 1 },
@@ -63,16 +153,50 @@ export default {
         { text: '汽车用品', value: 16 },
         { text: '家居日用', value: 17 },
       ],
-      value1: 0,
-      value2: 'a',
       value3: 0
     });
 
-    const item = ref('');
+    return {
+      state
+    };
+  }
+}
+</script>
+```
 
-    const onConfirm = () => {
-      item.value.toggle();
-    }
+:::
+
+### 自定义选中态颜色
+
+:::demo
+
+```html
+<template>
+  <nut-menu active-color="green">
+    <nut-menu-item v-model="state.value1" :options="state.options1" />
+    <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
+  </nut-menu>
+</template>
+
+<script>
+import { reactive, ref } from 'vue';
+
+export default {
+  setup() {
+    const state = reactive({
+      options1: [
+        { text: '全部商品', value: 0 },
+        { text: '新款商品', value: 1 },
+        { text: '活动商品', value: 2 }
+      ],
+      options2: [
+        { text: '默认排序', value: 'a' },
+        { text: '好评排序', value: 'b' },
+        { text: '销量排序', value: 'c' },
+      ],
+      value1: 0,
+      value2: 'a'
+    });
 
     const handleChange = val => {
       console.log('val', val);
@@ -80,55 +204,91 @@ export default {
 
     return {
       state,
-      item,
-      onConfirm,
       handleChange
     };
   }
 }
+</script>
 ```
 
-### 自定义菜单内容
-使用实例上的 toggle 方法可以手动关闭弹框。
+:::
 
-```html
-<nut-menu>
-  <nut-menu-item v-model="state.value1" :options="state.options1" />
-  <nut-menu-item title="筛选" ref="item">
-    <div :style="{display: 'flex', flex: 1, 'justify-content': 'space-between', 'align-items': 'center'}">
-      <div>自定义内容</div>
-      <div @click="onConfirm">关闭</div>
-    </div>
-  </nut-menu-item>
-</nut-menu>
-```
+### 禁用菜单
 
-### 一行两列
+:::demo
 
 ```html
-<nut-menu>
-  <nut-menu-item v-model="state.value3" :cols="2" :options="state.options3" />
-</nut-menu>
-```
+<template>
+  <nut-menu>
+    <nut-menu-item disabled v-model="state.value1" :options="state.options1" />
+    <nut-menu-item disabled v-model="state.value2" @change="handleChange" :options="state.options2" />
+  </nut-menu>
+</template>
 
-### 自定义选中态颜色
+<script>
+import { reactive, ref } from 'vue';
 
-```html
-<nut-menu active-color="green">
-  <nut-menu-item v-model="state.value1" :options="state.options1" />
-  <nut-menu-item v-model="state.value2" @change="handleChange" :options="state.options2" />
-</nut-menu>
-```
+export default {
+  setup() {
+    const state = reactive({
+      options1: [
+        { text: '全部商品', value: 0 },
+        { text: '新款商品', value: 1 },
+        { text: '活动商品', value: 2 }
+      ],
+      options2: [
+        { text: '默认排序', value: 'a' },
+        { text: '好评排序', value: 'b' },
+        { text: '销量排序', value: 'c' },
+      ],
+      options3: [
+        { text: '全部商品', value: 0 },
+        { text: '家庭清洁/纸品', value: 1 },
+        { text: '个人护理', value: 2 },
+        { text: '美妆护肤', value: 3 },
+        { text: '食品饮料', value: 4 },
+        { text: '家用电器', value: 5 },
+        { text: '母婴', value: 6 },
+        { text: '数码', value: 7 },
+        { text: '电脑、办公', value: 8 },
+        { text: '运动户外', value: 9 },
+        { text: '厨具', value: 10 },
+        { text: '医疗保健', value: 11 },
+        { text: '酒类', value: 12 },
+        { text: '生鲜', value: 13 },
+        { text: '家具', value: 14 },
+        { text: '传统滋补', value: 15 },
+        { text: '汽车用品', value: 16 },
+        { text: '家居日用', value: 17 },
+      ],
+      value1: 0,
+      value2: 'a',
+      value3: 0
+    });
 
-### 禁用菜单
+    const item = ref('');
 
-```html
-<nut-menu>
-  <nut-menu-item disabled v-model="state.value1" :options="state.options1" />
-  <nut-menu-item disabled v-model="state.value2" @change="handleChange" :options="state.options2" />
-</nut-menu>
+    const onConfirm = () => {
+      item.value.toggle();
+    }
+
+    const handleChange = val => {
+      console.log('val', val);
+    }
+
+    return {
+      state,
+      item,
+      onConfirm,
+      handleChange
+    };
+  }
+}
+</script>
 ```
 
+:::
+
 ## API
 
 ### Menu Props

src/packages/__VUE/menuitem/index.scss

@@ -34,7 +34,7 @@
 .nut-menu__pop {
   transition: all 0 ease 0;
   transform: none;
-  top: auto !important;
+  // top: auto !important;
 }
 
 .placeholder-element {