Browse Source

docs: 菜单组件文档添加 toggle 事件说明 (#1818)

yangjinjun3 3 years ago
parent
commit
ea512f0e4d

+ 1 - 1
src/packages/__VUE/menu/demo.vue

@@ -37,7 +37,7 @@
     <h2>{{ translate('disableMenu') }}</h2>
     <nut-menu>
       <nut-menu-item disabled v-model="state.value1" :options="options1" />
-      <nut-menu-item disabled v-model="state.value2" @change="handleChange" :options="options2" />
+      <nut-menu-item disabled v-model="state.value2" :options="options2" />
     </nut-menu>
   </div>
 </template>

+ 5 - 17
src/packages/__VUE/menu/doc.en-US.md

@@ -323,12 +323,12 @@ export default {
 <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-item disabled v-model="state.value2" :options="state.options2" />
   </nut-menu>
 </template>
 
 <script>
-import { reactive, ref } from 'vue';
+import { reactive } from 'vue';
 
 export default {
   setup() {
@@ -368,21 +368,8 @@ export default {
       value3: 0
     });
 
-    const item = ref('');
-
-    const onConfirm = () => {
-      item.value.toggle();
-    }
-
-    const handleChange = val => {
-      console.log('val', val);
-    }
-
     return {
-      state,
-      item,
-      onConfirm,
-      handleChange
+      state
     };
   }
 }
@@ -426,4 +413,5 @@ export default {
 
 | Event  | Description                   | Arguments      |
 |--------|-------------------------------|----------------|
-| change | Emitted select option changed | Selected value |
+| change | Emitted select option changed | Selected value |
+| toggle | Toggle menu display status, `true` to show,`false` to hide, no param is negated | show?: boolean |

+ 5 - 17
src/packages/__VUE/menu/doc.md

@@ -324,12 +324,12 @@ export default {
 <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-item disabled v-model="state.value2" :options="state.options2" />
   </nut-menu>
 </template>
 
 <script>
-import { reactive, ref } from 'vue';
+import { reactive } from 'vue';
 
 export default {
   setup() {
@@ -369,21 +369,8 @@ export default {
       value3: 0
     });
 
-    const item = ref('');
-
-    const onConfirm = () => {
-      item.value.toggle();
-    }
-
-    const handleChange = val => {
-      console.log('val', val);
-    }
-
     return {
-      state,
-      item,
-      onConfirm,
-      handleChange
+      state
     };
   }
 }
@@ -425,4 +412,5 @@ export default {
 
 | 事件名 | 说明                 | 回调参数     |
 |--------|----------------------|--------------|
-| change | 选择 option 之后触发 | 选择的 value |
+| change | 选择 option 之后触发 | 选择的 value |
+| toggle | 切换菜单展示状态,传 `true` 为显示,`false` 为隐藏,不传参为取反 | show?: boolean |